HTML Blocks and Inline Elements

byLearn Code and Programing -
0
HTML Blocks and Inline Elements

HTML Block Elements

Every element in HTML has a default display behavior, which are typically categorized as block-level or inline. How does an HTML Block work? Every element in HTML is either an inline element or a block-level element.

What are Block-level Elements?

In HTML, a block-level element occupies the entire width of its parent container by default and always begins on a new line. This indicates that subsequent content will appear on the following line. Block elements stack vertically and help structure the layout of your content, similar to a webpage's building blocks. Tags like <div>, <p>, <h1> to <h6>, and <section> are typical examples.

Key Characteristics of Block-Level Elements

  1. Always starts on a new line, even if space is available on the current line.
  2. By default, stretches to take up the full width of its container unless a specific width is set.
  3. Can hold both other block-level elements and inline elements inside it.
  4. Supports margins and padding, which affect spacing around and inside the element.
  5. Can be styled with CSS properties such as width, height, border, background, and more.

HTML Container Elements

<h1> <h6>
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<figcaption>
<header>
<noscript>
<table>
div>
<figure>
<hr>
<ol>
<tfoot>
<dl>
<footer>
<li>
<p>
<ul>
<dt>
<form>
<main>
<pre>
<video>
<fieldset>
<nav>
<section>

HTML Blocks

<!DOCTYPE html> <html> <head> <title>HTML Block Level Elements</title> </head> <body> <h3>HTML Block Level Elements</h3> <p> Always starts on a new line . </p> <hr /> <p> Even if space is available on the current line. </p> </body> </html>

HTML Inline Elements

Elements inline An inline element does not begin on a new line; rather, it remains on the same line as the content that surrounds it. It only requires the width required by its contents. It can only contain additional inline elements, not block elements typically.

Inline Elements

<br>
<button>
<time>
<tt>
<var>
<a>
<abbr>
<acronym>
<b>
<cite>
code>
<dfn>
<em>
<i>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<bdo>
<big>
<img>
<kbd>
<input>
<label>
<map>
<object>

<!DOCTYPE html> <html> <head> <title>HTML inline Element</title> </head> <body> <!-- Using <b> inline element --> <p>This <b>paragraph</b> is bold.</p> <!-- Using <i> inline element --> <p>This is an <i>italic</i> paragraph.</p> </body> </html>

Difference Between Block and Inline Elements

Block element: The block element has a full width and always starts on a new line.

Inline element: The inline element occupies only the necessary width while remaining in the same line.

<p> This is a <span style="color:red;" >red word</span> inside a paragraph. </p>

<p>= block element

<span>= Inline element


<!DOCTYPE html> <html> <head> <title>Grouping Block and Inline Elements</title> </head> <body> <!-- Grouping Block Elements with div --> <div style="background-color: lightblue; padding: 10px;"> <h2>My Heading</h2> <p>This paragraph is grouped inside a block-level <b>div</b>.</p> </div> <!-- Grouping Inline Elements with span --> <p> This is a sentence with <span style="color: red; font-weight: bold;">important text</span> inside it. </p> </body> </html>
Tags:
أحدث أقدم