1. <div>
Type: Block-level
Use: For grouping larger sections of content.
When to use: If you want a block-level alternative to <span>.
|
1 |
<div class="highlight">This is a block-level alternative.</div> |
2. <label>
Type: Inline
Use: For labeling form elements.
When to use: When you’re working with form controls.
|
1 2 |
<label for="name">Name:</label> <input type="text" id="name"> |
3. <mark>
Type: Inline
Use: To highlight text.
When to use: To emphasize or highlight a portion of text.
|
1 |
<p>This is a <mark>highlighted</mark> word.</p> |
4. <strong> or <b>
Type: Inline
Use: To indicate importance or bold text.
|
1 |
<p>This is <strong>important</strong>.</p> |
5. <em> or <i>
Type: Inline
Use: To italicize or emphasize text.
|
1 |
<p>This is <em>emphasized</em> text.</p> |
6. <code>, <kbd>, <samp>
Type: Inline
Use: For inline code or keyboard inputs.
|
1 |
<p>Use <code>Ctrl + S</code> to save.</p> |
7. <small>, <sub>, <sup>
Type: Inline
Use: To style text in specific ways (smaller size, subscript, superscript).
|
1 |
<p>Water is H<sub>2</sub>O</p> |
8. Custom Inline Elements (HTML5)
Use: You can use custom tags with proper styling/semantics in JavaScript frameworks or modern HTML, though <span> is often simpler.
Summary
Use <span> when you just need a simple, generic inline container. But for more semantic or styled content, the above tags can be more meaningful and appropriate.