<p>Inline Elements don't start on a new line. It only takes the width required to cover the content.</p>
<p>HTML elements are generally divided into two categories: <strong>Block-level</strong> and <strong>Inline</strong> elements.</p>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-inline-elements/inline-block-image.jpg" alt="cwh tutorial image" width="630"></p>
<p>No matter what the width is, block elements will always start on a new line and take up the full available width of their container by default. This means they essentially claim all the horizontal space for themselves, pushing any content that comes after them to a new line. But the inline elements will fit snugly within the flow of other elements, taking up only as much width as their content requires.</p>
<h2>What are Inline Elements?</h2>
<p>Inline elements do not start on a new line and only take up as much width as necessary. They are part of the flow within other elements.</p>
<p>Inline elements can contain other inline elements, but they generally should not contain block-level elements. For example, you could nest a <code>&lt;strong&gt;</code> (strong emphasis) element within a <code>&lt;span&gt;</code> (a generic inline container) element, like so:</p>
<pre class="language-markup"><code>&lt;span&gt;This is &lt;strong&gt;important&lt;/strong&gt; text.&lt;/span&gt;</code></pre>
<p>However, placing a block-level element like a <code>&lt;div&gt;</code> or <code>&lt;p&gt;</code> inside an inline element like <code>&lt;span&gt;</code> or <code>&lt;a&gt;</code> is typically considered incorrect HTML and could lead to unexpected behavior in terms of layout and styling.</p>
<pre class="language-markup"><code>&lt;!-- This is generally considered incorrect --&gt;
&lt;span&gt;This is &lt;div&gt;not recommended&lt;/div&gt; text.&lt;/span&gt;
</code></pre>
<h2>Common Inline Elements</h2>
<ul>
<li><code>&lt;span&gt;</code>: A generic inline container for text</li>
<li><code>&lt;a&gt;</code>: Defines a hyperlink</li>
<li><code>&lt;strong&gt;</code>: Defines important text</li>
<li><code>&lt;em&gt;</code>: Defines emphasized text</li>
<li><code>&lt;img&gt;</code>: Embeds an image</li>
<li><code>&lt;input&gt;</code>: Defines an input control</li>
</ul>
<h2>Examples</h2>
<p>Here is an example of using <span style="color: blue;">inline elements</span> within a paragraph.</p>
<p>This text contains <a href="#">a link</a>, an <strong>important text</strong>, and an <em>emphasized text</em>.</p>
<h2>Styling Inline Elements</h2>
<p>You can use CSS to style inline elements. However, some properties like <code>width</code> and <code>height</code> may not apply.</p>
<p>Here is an exhaustive list of the most used <strong>Inline Elements:</strong></p>
<ul>
<li><code>&lt;a&gt;</code></li>
<li><code>&lt;abbr&gt;</code></li>
<li><code>&lt;acronym&gt;</code></li>
<li><code>&lt;button&gt;</code></li>
<li><code>&lt;br&gt;</code></li>
<li><code>&lt;big&gt;</code></li>
<li><code>&lt;bdo&gt;</code></li>
<li><code>&lt;b&gt;</code></li>
<li><code>&lt;cite&gt;</code></li>
<li><code>&lt;code&gt;</code></li>
<li><code>&lt;dfn&gt;</code></li>
<li><code>&lt;i&gt;</code></li>
<li><code>&lt;em&gt;</code></li>
<li><code>&lt;img&gt;</code></li>
<li><code>&lt;input&gt;</code></li>
<li><code>&lt;kbd&gt;</code></li>
<li><code>&lt;label&gt;</code></li>
<li><code>&lt;map&gt;</code></li>
<li><code>&lt;object&gt;</code></li>
<li><code>&lt;output&gt;</code></li>
<li><code>&lt;tt&gt;</code></li>
<li><code>&lt;time&gt;</code></li>
<li><code>&lt;samp&gt;</code></li>
<li><code>&lt;script&gt;</code></li>
<li><code>&lt;select&gt;</code></li>
<li><code>&lt;small&gt;</code></li>
<li><code>&lt;span&gt;</code></li>
<li><code>&lt;strong&gt;</code></li>
<li><code>&lt;sub&gt;</code></li>
<li><code>&lt;sup&gt;</code></li>
<li><code>&lt;textarea&gt;</code></li>
</ul>

HTML Inline Elements

<p>Our day-to-day lives often involve the use of lists. For example, when we go shopping, the bill we receive includes a list of all the items we've purchased. In a similar manner, web developers use lists to neatly display data on websites.</p>
<h2>Types of HTML Lists</h2>
<p>HTML provides different types of lists to display data in various forms. Each list contains one or more list items.</p>
<ul style="list-style-type: square;">
<li><strong>Unordered List:</strong> Displays items using bullets.</li>
<li><strong>Ordered List:</strong> Displays items in a numerical sequence, and supports various numbering styles like Arabic numerals, Roman numerals, and so on.</li>
<li><strong>Definition List:</strong> Organizes items in a format similar to a dictionary, with terms and their corresponding definitions.</li>
</ul>
<h3>An Unordered List</h3>
<p>An unordered list uses bullets to display items. It is suitable for listing items where the order doesn't matter. We will soon explore unordered lists in great detail</p>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-lists/unordered-list-example.png" alt="cwh tutorial image" width="641" height="345"></p>
<h3>An Ordered List</h3>
<p>An ordered list uses numbers or other types of markers to indicate the sequence of items. It's ideal for listing steps in a process or ranking items in order of importance. We will soon explore ordered lists in great detail</p>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-lists/ordered-list-example.png" alt="cwh tutorial image" width="639" height="345"></p>
<h3>A Definition List</h3>
<p>A definition list arranges items in a way similar to a dictionary, with a term followed by its definition. This is useful for glossaries or to display metadata.</p>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-lists/definition-list-html.png" alt="cwh tutorial image" width="637" height="344"></p>

HTML Lists

<p>You already know about HTML inline elements. All HTML tags have specific display behavior: they are either block-level elements or inline elements.</p>
<h2>What are Block-level Elements?</h2>
<p>Block-level elements are those that start on a new line and take up the entire width of their container by default. They essentially claim all the horizontal space for themselves, pushing any content that comes after them to a new line.</p>
<h3><strong>Characteristics of Block-level Elements:</strong></h3>
<ul>
<li>Always start on a new line.</li>
<li>Take up the full width available.</li>
<li>Width and height can be controlled via CSS.</li>
<li>Can contain other block-level as well as inline elements.</li>
</ul>
<h3><strong>Common Block-level Elements:</strong></h3>
<ul>
<li><code>&lt;h1&gt;,&lt;h2&gt;,&lt;h3&gt;,&lt;h4&gt;,&lt;h5&gt;,&lt;h6&gt;</code> - Headings</li>
<li><code>&lt;p&gt;</code> - Paragraphs</li>
<li><code>&lt;hr&gt;</code> - Horizontal rule</li>
<li><code>&lt;address&gt;</code> - Address information</li>
<li><code>&lt;article&gt;</code> - Article content</li>
<li><code>&lt;aside&gt;</code> - Sidebar content</li>
<li><code>&lt;blockquote&gt;</code> - Block quotations</li>
<li><code>&lt;canvas&gt;</code> - Drawing area</li>
<li><code>&lt;dd&gt;</code> - Description in a description list</li>
<li><code>&lt;div&gt;</code> - Generic container</li>
<li><code>&lt;dl&gt;</code> - Description list</li>
<li><code>&lt;dt&gt;</code> - Term in a description list</li>
<li><code>&lt;fieldset&gt;</code> - Group of related form elements</li>
<li><code>&lt;figcaption&gt;</code> - Caption for a figure</li>
<li><code>&lt;figure&gt;</code> - Image or media with a caption</li>
<li><code>&lt;footer&gt;</code> - Footer of a section or page</li>
<li><code>&lt;form&gt;</code> - HTML form</li>
<li><code>&lt;header&gt;</code> - Header of a section or page</li>
<li><code>&lt;li&gt;</code> - List item</li>
<li><code>&lt;main&gt;</code> - Main content of a document</li>
<li><code>&lt;nav&gt;</code> - Navigation links</li>
<li><code>&lt;noscript&gt;</code> - Alternate content when JavaScript is not enabled</li>
<li><code>&lt;ol&gt;</code> - Ordered list</li>
<li><code>&lt;ul&gt;</code> - Unordered list</li>
<li><code>&lt;pre&gt;</code> - Preformatted text</li>
<li><code>&lt;section&gt;</code> - Standalone section in a document</li>
<li><code>&lt;table&gt;</code> - Table</li>
<li><code>&lt;video&gt;</code> - Video content</li>
</ul>

HTML Block Elements