HTML Inline elements are used as a part of the main text and not as a separate section. These elements are occupied as the only required place within the parent (main) element. Where the block-level elements begin on new lines.
List of inline elements
The following elements are inline by default (although block and inline elements are no longer defined in HTML 5.
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<sub>
<sup>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<textarea>
<time>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<tt>
<var>
Let’s see inline elements examples in HTML
Some of the important and most using inline elements are <a>,<span>,<img>,<code>,<cite>,<button>,<input> etc.
<span> Element
The <span> element is often used as a container for some text and has no required attributes, but style, class and id are common.
How to use in HTML:-
<!DOCTYPE html>
<html>
<title>HTML codes</title>
<body>
<p>My <span style="color:red">Important</span> Chapter in HTML</p>
</body>
</html> Output:
Supported Browsers:
- Google Chrome
- Mozilla Firefox
- Edge
- Safari
- Opera
The important point for Inline elements
- Appear in the body of an HTML page.
- It can contain data and other inline elements.
- By default, inline elements do not begin on new lines or not required.
- It has shorter structures compare to block level elements).
Do comment if you have any doubts and questions on this tutorial.
Note: The All Examples code HTML is tested on the Safari browser (Version 12.0.2).
OS: macOS 10.14 Catalina
Code: HTML 5 Version