Advertisement
Google Ad Slot: content-top
Blocks & inline
In HTML, elements are categorized into two main types based on how they are rendered: block-level elements and inline elements. Understanding the difference between these two types is key to controlling the layout and structure of a webpage.
Block-Level Elements
- Behavior: Block-level elements occupy the full width available, regardless of their content, and always start on a new line. This means they stack vertically in the document flow.
- Usage: Block-level elements are typically used for structuring the major sections of a webpage, such as paragraphs, headers, footers, and divisions of content.
-
<address>
-
<article>
-
<aside>
-
<blockquote>
-
<canvas>
-
<dd>
-
<div>
-
<dl>
-
<dt>
-
<fieldset>
-
<figcaption>
-
<figure>
-
<footer>
-
<form>
-
<h1> to <h6>
-
<header>
-
<hr>
-
<li>
-
<main>
-
<nav>
-
<noscript>
-
<ol>
-
<p>
-
<pre>
-
<section>
-
<table>
-
<tfoot>
-
<ul>
-
<video>
Example
<div>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
Inline Elements
- Behavior: Inline elements take up only as much width as necessary to display their content. They do not start on a new line; instead, they flow alongside other inline elements and content within the same block-level element.
- Usage: Inline elements are used to style or format specific pieces of content within a block-level element, such as emphasizing text, linking to another page, or inserting images within text.
-
<a>
-
<abbr>
-
<acronym>
-
<b>
-
<bdo>
-
<big>
-
<br>
-
<button>
-
<cite>
-
<code>
-
<dfn>
-
<em>
-
<i>
-
<img>
-
<input>
-
<kbd>
-
<label>
-
<map>
-
<object>
-
<output>
-
<q>
-
<samp>
-
<script>
-
<select>
-
<small>
-
<span>
-
<strong>
-
<sub >
-
<sup>
-
<textarea>
-
<time>
-
<tt>
-
<var>
Example
<p>This is a <span style="color: green;">Whereisstuff</span> word in a paragraph.</p>