Most HTML elements are either block or inline elements.
Block elements always begin on a new line, they will stack on top of each other, and occupy the full available width. You can nest block elements inside each other and wrap inline elements. The header elements <h1> and paragraph <p> elements you have seen so far are block elements.
language=>HTML
<h1>h1 is a block element</h1>
<p>p is also a block element</p>
Inline elements don't begin on a new line. Instead, they line up one after the other based on the order they appear in HTML. Inline elements will only occupy the width of their content. You can nest inline elements inside each other, but you cannot wrap block elements with inline elements. Inline elements are usually smaller contents such as a word in a paragraph. The element <strong> gives text strong importance and is typically displayed in bold. The element <em> marks text that has stress emphasis.
<em>Inline</em><em>Elements</em><em><em>Line up one after the other</em></em>
<p>Inline elements can be <strong>nested</strong> in block elements</p>
<p>Inline elements can be <em>also be <strong>nested</strong></em> in inline elements</p>
Div and Span
Let's talk about a pair of commonly used elements that carry no semantic values. Division <div> and span <span> are HTML elements for styling purposes only. They are simply containers used to structure your data.
Recall semantic values are used by screen readers and web crawlers to better understand the context of your content. For more about semantic values of HTML elements, please refer back to chapter 4.1.
The <div> element is the generic container for flow content and does not inherently represent anything. Use it to group elements for purposes such as styling.
You can identify <div> and <span> with Class and Id. When choosing a name for Class and Id, it's a good practice to use names that describe the content of the element, rather than the appearance of the element. For example, the below <div>s contain paragraphs about men and women.
language=>HTML
<div class="men">
<!-- You can nest block elements in block elements -->
<!-- paragraphs have blue backgrounds -->
<p>something about men</p>
<p>something about men</p>
</div>
<div class="women">
<!-- paragraphs have pink backgrounds -->
<p>something about women</p>
<p>something about women</p>
</div>
The <span> element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes). We are going to make prices red and bold.
language=>HTML
<p>Toothpaste <span class="price">$ 3.99</span></p>
<p>Toothbrush <span class="price">$ 1.99</span></p>
<p>Mouth wash <span class="price">$ 2.99</span></p>
To clone the demo, click the "Fork" button on the right.
