HTML Block and Inline Elements

In HTML, elements can be classified into two main categories based on how they interact with other elements and how they are displayed on the web page
  1. block-level elements
  2. inline elements

Block-level Elements

Block-level elements are HTML elements that create a "block" on the web page, taking up the full width available by default.
They usually start on a new line and stack vertically, meaning that they do not appear inline with other elements unless explicitly styled to do so.

Block-Level Elements

<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

<!DOCTYPE html>
<html>
    <head>
        <title>block-level Example</title>
    </head>
    <body>
        <p>This is a block-level paragraph.</p>
    </body>
</html>


Inline Elements

Inline elements, on the other hand, do not create a new block on the web page.
They only take up as much width as necessary for their content and typically appear inline with the surrounding text or other inline elements.
Inline elements can be used within block-level elements to style certain parts of the content.
Block-Level Elements

<a>

<abbr>

<acronym>

<b>

<br>

<button>

<cite>

<code>

<data>

<em>

<i>

<img>

<input>

<label>

<mark>

<q>

<s>

<samp>

<select>

<small>

<span>

<strong>

<sub>

<sup>

<textarea><time>

<u>

<var>


Example

<!DOCTYPE html>
<html>
    <head>
        <title>Inline Example</title>
    </head>
    <body>
        <p>This is a <span style="color: red;">red</span> word.</p>
    </body>
</html>

Quick Recap - Topics Covered

Block-level Elements
Inline Elements

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

Example js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK

Rating


Message