HTML

HTML Inline Elements

HTML inline elements do not require a new line to start. They only take as much width as needed. This property keeps several inline elements within one line, ensuring seamless integration of other components and the text. 

<head>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <span class="highlight">inline elements</span> 
    <a href="#">links</a>, 
    <strong>bold text</strong>, 
    <em>italic text</em>, 
</body>

Characteristics of Inline Elements

  • Content Flow: HTML inline elements maintain content flow because they don’t start on a new line and take less width than HTML block elements. 
  • Constant width: The content determines inline elements’ height and width. No custom height and width rule exists for inline elements unless the block-level elements display it. 
  • Multiple inline elements in a row:We can add various inline elements in one row.
  • Margins and Padding: The inline elements can have left and right margins and padding, but the top and bottom margins and padding do not affect the surrounding content flow.

Common HTML Inline Elements

Here are some of the most commonly used HTML inline elements:

<a>: Defines a hyperlink.
<span>: Used as a container for text.
<img>: Embeds an image.
<strong>: Makes text bold.
<em>: Emphasizes text (usually italicized).
<code>: Displays code snippets.
<br>: Inserts a line break.
<sub>: Defines subscript text.
<sup>: Defines superscript text.

The <a> Element

The <a> element, or anchor tag, creates hyperlinks. It allows users to navigate from one webpage to another or different sections within the same page.

<p>Click here to <a href="#">read more</a></p>

The <span> Element

The <span> inline element is a non-specific container that targets a specific portion of the content. It is added in a line that needs to be styled by CSS or directed by JavaScript.

<p>This is a <span style="color: red;">red</span> word.</p>

The <strong> and <em> Elements 

The <strong> element is similar to <b> inline element. It indicates vital importance or emphasis in any portion of the content. Moreover, it makes the text bold to show its significance.

The <em> element is also used to emphasize certain parts of the text, rendering it in italics.

<p><strong>Important:</strong> This is crucial information.</p>

<p><em>Note:</em> This is an emphasized note.</p>

The <img> Element

The <img> tag links image addresses within the content. It requires a particular src attribute that specifies the image’s source and an alt attribute that provides alternative text.

<img src="#" alt="A beautiful scenery">

The <code> Element

The <code> element is used to add a computer code. It is displayed as a short fragment of a computer code. The <code> element typically displays the text in monospaced font.

<p>Use the <code>&lt;div&gt;</code> tag to create a division.</p>

The <abbr> Element

The <abbr> element defines an abbreviation or acronym, providing a complete description via the title attribute.

<p>The
    <abbr title="HyperText Markup Language">HTML</abbr>
    is a standard markup language.
</p>

The <button> Element

A <button> tag creates a clickable button within the text. It can only be added one time in a document. The element on which <button> inline element is inserted has a particular input focus when the page loads.

<p>The
    <abbr title="HyperText Markup Language">HTML</abbr>
    is a standard markup language.
</p>

The <b> and <br>Elemen

The <b> element is added to make the text bold. Whereas <br> is added to insert a line break.

<p>
    This is some <b>bold text</b> in a paragraph. <br>
    This line starts after a line break.
</p>

Learning and understanding the purpose of inline elements is essential to creating a pleasing and easily accessible web page. From highlighting important information to adding hyperlinks or a particular feature, inline elements provide the flexibility to enhance web development projects and improve web page performance.

Prev
Next
Scroll to Top