Inline Elements
An inline element is the opposite of the block-level element. It does not start on a new line and takes up only the necessary width ie., it only occupies the space bounded by the tags defining the HTML element, instead of breaking the flow of the content.
Supported tags:
- <br> Tag
- <button> Tag
- <time> Tag
- <tt> Tag
- <var> Tag
- <a> Tag
- <abbr> Tag
- <acronym> Tag
- <b> Tag
- <cite> Tag
- <code> Tag
- <dfn> Tag
- <em> Tag
- <i> Tag
- <output> Tag
- <q> Tag,
- <samp> Tag
- <script> Tag
- <select> Tag
- <small> Tag
- <span> Tag
- <strong> Tag
- <sub> Tag
- <sup> Tag
- <textarea> tag
- <bdo> Tag
- <big> Tag
- <img> Tag
- <input> Tag
- <kbd> Tag
- <label> Tag
- <map> Tag
- <Object> tag
span element:
The <span> tag is used as a container for text. It has no required attributes. Style, class, and id are the commonly used attributes.
Syntax:
<span>GFG</span>
Example: The below code illustrates the implementation of <span> tag.
HTML
<!DOCTYPE html> < html > < head > < title >HTML span element</ title > < style > body { text-align: center; } h1 { color: green; } span { color: red; } </ style > </ head > < body > < h1 >Geeks < span > for</ span > Geeks </ h1 > </ body > </ html > |
Output:
HTML Block and Inline Elements
HTML Block elements, are used to structure the main content of a webpage. They typically start on a new line and take up the full width of their container examples <div>, <p>, <h1> to <h6>, and <ul>, etc.
On the other hand, Inline elements are used within block-level elements to style or format specific parts of the content. They don’t start on a new line and only take up as much width as necessary for example include <span>, <a>, <strong>, and <em>.
Example: This example illustrates the use of the block-level element & inline element.
HTML
<!DOCTYPE html> < html > < body > < div >w3wiki</ div > Checkout the w3wiki alt = "w3wiki" > official</ a > website for the articles on various courses. </ body > </ html > |
Output: