Balises en ligne en HTML

Pour créer une page Web, les éléments HTML jouent un rôle important dans le développement de la page Web. Ces éléments HTML sont spécifiquement divisés en 2 sous-catégories comme les éléments en ligne et les éléments de niveau bloc. Les éléments en ligne sont ceux qui ne commencent pas par la nouvelle ligne. De plus, il n’occupe pas toute la largeur de la page Web. Ce type d'élément n'occupe que l'espace nécessaire pour s'adapter aux éléments inclus. Il existe différentes balises en ligne en HTML. Nous verrons tout cela un par un plus tard. L'élément fonctionne comme un conteneur pour le texte inclus dans HTML. La plupart du temps, des éléments en ligne sont utilisés dans un autre élément HTML.

La syntaxe de création d'éléments en ligne est la suivante :

Syntaxe :

<span>Contents</span>

• Comme indiqué ci-dessus, les éléments span sont traités comme un conteneur pour les éléments inclus. Il n'est pas nécessaire d'attribuer à la balise span. Il utilise un nom de classe, un identifiant ou un style comme attribut.
• Les éléments en ligne sont inclus dans la partie du corps. Ces éléments créent une structure plus courte que d'autres éléments.

Top 20 des balises en ligne en HTML

Plusieurs balises en ligne seront utilisées en HTML ; voyons un par un :

1.  : Cette balise est utilisée pour placer des abréviations du texte, comme HTML, WWW, ASAP, PFA, etc.

Syntaxe :

<abbr title="Text">Abbrevation_text</abbr>

2.  : Cette balise est utilisée pour décrire l'acronyme. C'est comme la NASA, l'interface graphique, etc. Cette balise n'est plus utilisée de nos jours en HTML 5. Elle donne des informations sur le navigateur, le moteur de recherche, etc.

Syntaxe :

<acronym title="Text">text</acronym>

3.  : Définit le texte au format gras.

Syntaxe :

<b>Text</b>

4.  : Cette balise en ligne en HTML définit le remplacement bidirectionnel. Cela aide l'utilisateur à remplacer la direction déjà existante du texte. Il a deux valeurs de gauche à droite et de droite à gauche.

Syntaxe :

<bdo dir="ltr">Text </bdo>

5.  : Il s'agit de l'une des balises en ligne utilisées pour définir le texte plus grand.

Syntaxe :

<big >Text</big>

6. <br> : Cette balise est utilisée pour donner un saut de ligne ou un espace dans le code HTML.

Syntaxe :

<br>

7.  : Balise Button en HTML utilisée pour créer un bouton cliquable.

Syntaxe :

<button type="button"> Text</button>

8.  : L'un des éléments en ligne importants est , qui définit le titre de l'œuvre ou du document en utilisant HTML.

Syntaxe :

<p><cite >Text </cite>other text</p>

9.  : Cet élément en ligne est utilisé pour définir un morceau de code informatique. Il est traité comme une balise de phrase.

Syntaxe :

<code>Text</code>

10.  : Cet élément en ligne est utilisé pour définir l'instance du terme dans le code HTML.

Syntaxe :

<p><dfn> text</dfn ></p>

11.  : Ceci est également traité comme une balise de phrase rendue avec du texte souligné.

Syntaxe :

<em>Text</em>

12.  : Cette balise est utilisée pour expliquer une partie du texte dans une ambiance alternative. Il est principalement utilisé pour afficher le texte contenu en italique. C'est ce qu'on appelle un terme technique.

Syntaxe :

<p> <i>text</i>another text</p>

13.  : L'un des éléments en ligne les plus importants est inclus sous forme d'image sur notre page Web. Cette balise permet donc d'inclure une image dans notre page Web comme suit :

Syntaxe :

<img src="Image_URL"  alt="text" height="value" width="value">

14.  : Ce type d'élément en ligne sera utilisé dans

élément. Il permet à l'utilisateur de placer des données d'entrée.

Syntaxe :

<form>
<input type=" text" name="value">
<input type=" text" name="value">
</form>

15.  : Ceci est également connu sous le nom de balise de phrase en HTML, qui est utilisée pour saisir la saisie du clavier.

Syntaxe :

<kbd>keyboard input</kbd>

16.  : Ces éléments en ligne seront utilisés dans

, ,,, , <input>, <meter> etc.</p> <p><strong><b>Syntaxe : </b></strong></p> <pre class="brush:php;toolbar:false"><form> <label for="value">Text </label> <input type='radio" name="value" id="" value=""><br> <label for="value">Text </label> <form></pre> <p><b></b><strong>17. <map> :</strong> Cet élément était utilisé pour représenter la zone cliquable côté client. C'est une image avec des zones cliquables. Il contient des attributs tels que <img >, <area> comme indiqué dans la syntaxe ci-dessous :</p> <p><strong><b>Syntaxe :</b></strong></p> <pre class="brush:php;toolbar:false"><img src="URL" width="value" height="value" alt="text" usemap="#map_name "> <map name="map_name "> <area shape="Shape_type" coords="value" href="URL" alt="text"> </map></pre> <p><b></b><strong>18. <q>:</strong> This inline element is used to show quotations around the text.</p> <p><strong><b>Syntax:</b></strong></p> <pre class="brush:php;toolbar:false"><q>Text</q></pre> <p><b></b><strong>19. <sub>:</strong> This element is used to show the subscript of the text.</p> <p><strong><b>Syntax:</b></strong></p> <pre class="brush:php;toolbar:false"><p>text <sub> text</sub></p></pre> <p><b></b><strong>20. <sup>:</strong> This element is used to give superscript to the text as shown in the below syntax,</p> <p><strong><b>Syntax:</b></strong></p> <pre class="brush:php;toolbar:false"><p>text <sub> text</sub></pre> <h3>Examples of Inline Tags in HTML</h3> <p>Following are the different examples of inline tags in HTML.</p> <h4> <b></b>Example #1</h4> <p>This example is showing some basic inline tags are as follows:</p> <p><strong>Code:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <h4>Abbreviation tag</h4> <abbr title="HyperTextMarkupLaanguage">HTML</abbr> <h4>Acronym tag</h4> <acronym title="UserInterface">UI</acronym> <h4>Bold tag</h4> <p>Not everyone will understand your journey. <b>You are here to live your life, not to make everyone understand</b></p> <h4>Bidirectional tag</h4> <p><bdo dir="rtl">Train your mind to stay calm in every situation</bdo></p> <h4>Big tag</h4> <p>Image of the day: Isro launches talking human robot <big>Vyommitra</big></p> <h4>Image tag</h4> <img src="C:\Users\Sonali\Desktop\t3.jpg"> </body> </html></pre> <p><strong><b>Output:</b></strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543831113825.jpg" alt="Balises en ligne en HTML" ></p> <h4> <b></b>Example #2</h4> <p>As earlier, we had discussed, inline tags are also useful in form elements as input fields for text input, radio buttons, buttons, dates, select tags, and so many. The following example illustrates the use of those inline tag for form building.</p> <p><strong><b>Code:</b></strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <style> .card{ border:2px solid black; } </style> </head> <body> <div class="card"> <h3 style="text-align: center;">Employee Details</h3> <form> <table align="center" cellpadding = "4"> <tr> <td>FIRST NAME</td> <td><input type="text" name="First_Name"/> </td> </tr> <tr> <td>LAST NAME</td> <td><input type="text" name="Last_Name"/> </td> </tr> <tr> <td>Employee ID</td> <td><input type="text" name="empid" /> </td> </tr> <tr> <td>DATE OF BIRTH</td> <td><input type="date" name="Birth_date" /></td> </tr> <tr> <td>EMAIL ID</td> <td><input type="text" name="Email_Id" maxlength="100" /></td> </tr> <tr> <td>MOBILE NUMBER</td> <td> <input type="text" name="Mobile_Number" maxlength="10" /> </td> </tr> <tr> <td>GENDER</td> <td> Male <input type="radio" name="Gender" value="Male" /> Female <input type="radio" name="Gender" value="Female" /> Transgender <input type="radio" name="Gender" value="Transgender" /> </td> </tr> <tr> <td>CITY</td> <td><input type="text" name="City" maxlength="20" /> </td> </tr> <tr> <td>Department</td> <td><input type="text" name="dept"  /> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </td> </tr> </table> </form> </div> </body> </html></pre> <p><strong><b>Output:</b></strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543831324064.jpg" alt="Balises en ligne en HTML" ></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543831697024.jpg" alt="Balises en ligne en HTML" ></p> <h4> <b></b>Example #3</h4> <p>This example is showing some basic inline tags are as follows:</p> <p><strong><b>Code:</b></strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <h4>Cite tag</h4> <p><cite >EDUCBA</cite>  What do you want to learn?</p> <h4>dfn tag</h4> <p> <dfn>Beautiful sunset</dfn></p> <h4>em tag</h4> <p>Oh dear sunrise  <em>Are you Real???</em></p> <h4>q tag</h4> <p>Time<q>Its never seen, but teach us many things </q></p> </body> </html></pre> <p><strong><b>Output:</b></strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543831810063.jpg" alt="Balises en ligne en HTML" ></p> <h3>Conclusion</h3> <p>So, Inline tags create smaller code structure. It takes minimal space around the element. Different elements comes under Inline tags are <q>, <em>, <dfn>, <input>, <img>, <cite>, <map>, <sup>, <code>, <label>, <bdo>, <sub> etc. Inline tags never create a new line.</p><p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">html</a> <a href="javascript:void(0);">define</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">format</a> <a href="javascript:void(0);">include</a> <a href="javascript:void(0);">break</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">map</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">kind</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Balise de figure HTML" href="http://m.php.cn/fr/faq/1796600093.html">Balise de figure HTML</a></span><span>Article suivant：<a class="dBlack" title="Balise de figure HTML" href="http://m.php.cn/fr/faq/1796600095.html">Balise de figure HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/fr/login"><b class="icon5"></b><p>Mon</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>