HTML Tutorial
INTRODUCTION
HTML BASIC TAGS
INLINE & BLOCK ELEMENTS
HTML LISTS
HTML TABLES
HTML FORMS
HEAD ELEMENTS
HTML MEDIA
MISCELLANEOUS TAGS
HTML Inline Elements
In HTML, every element is either block-level or inline by default. This classification affects how they have behaved within a layout.
What are Inline Elements?
Inline elements do not start on a new line. Instead, they stay in the flow of surrounding content, only taking up as much horizontal space as necessary.
Unlike block-level elements – which stretch across the full width of their container – inline elements neatly wrap around the content they hold and allow other elements to sit beside them.
Behavior of Inline Elements
Inline elements:
- Fit within lines of text
- Don’t cause line breaks
- Can be styled, though size-related properties like
widthandheightusually don’t apply changed with CSS (like usingdisplay: inline-block)
Nesting Inline Elements
Inline elements can be placed inside other inline elements. For example:
<span>This is <strong>important</strong> text.</span>
However, placing a block-level element inside an inline element like this:
<span>This is <div>not recommended</div> text.</span>
Is considered invalid HTML and may cause layout issues.
Example of Inline Elements
Let’s look at some commonly used inline elements:
<a>– Hyperlink<span>– Generic inline container<strong>– Strong importance (usually bold)<em>– Emphasized text (usually italic)<img>– Embeds an image<input>– Form input field
Example in a Paragraph
<p>
This is a <a href="#">link</a>,
<strong>important</strong> text, and
<em>emphasized</em> text within a paragraph.
</p>
All of these elements stay within the same line flow of the paragraph.
Styling Inline Elements
You can style inline elements using CSS. For example:
a {
color: blue;
text-decoration: none;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
However, properties like margin-top, height, and width won’t have an effect unless you change the display behavior (e.g., display: inline-block).
Common Inline Elements List
Although we aim to avoid large lists, here are few notable inline elements:
<a>, <abbr>, <b>, <cite>, <code>, <em>, <i>, <img>, <input>,
<label>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <time>
These elements are meant to work inside lines of text or within other inline-level containers.
Conclusion
Understanding inline elements is essential for controlling layout and text flow in HTML. They play a vital role in formatting without disrupting the surrounding structure, making the indispensable for clean, semantic design.