HTML

HTML Block Elements

HTML block elements are fundamental to creating the structure of a webpage. These elements cover the entire width of their parent container, thus forming a block of content.

<!-- HTML Block Elements -->

<div class="container">
    <p>This is a paragraph inside a div.</p>
</div>

<h1>This is heading</h1>

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

Characteristics of Block Elements

  • Occupy Full Width: Block elements take up the entire width by default.
  • Start on a New Line: Each block element starts on a new line, creating a vertical stack of elements.
  • Contain Other Elements: Block elements can contain other blocks or inline elements, making them flexible for content composition.

Common HTML Block Elements

Here are some of the most commonly used HTML block elements:

The <div> Element

The <div> element is a general container that groups other elements. It has no specific meaning or style by default but is highly useful for applying CSS styles or JavaScript interactions.

<div class="container">
    <p>This is a paragraph inside a div.</p>
</div>

The <p> Element

The <p> element acts as a paragraph of text. It automatically adds some space before and after the text, making it easy to separate different blocks of text.

<p>This is a paragraph.</p>

The <h1> to <h6> Elements 

The <h1> to <h6> elements represent headings. The <h1> is the highest heading, and <h6> is the lowest. These elements define the hierarchical structure of content.

<h1>Main Heading</h1>
<h2>Subheading</h2>

The <ul> and <ol> Elements

The <ul> element creates an unordered list (bulleted list), while the <ol> element creates an ordered list (numbered list). Both elements require list items (<li>) as children.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

The <blockquote> Element

The <blockquote> element is used for quoting a large section of text from another source. It often includes citation information.

<blockquote>
    "This is a block quotation."
</blockquote>

The <header> and <footer> Elements

The <header> element represents introductory content or a set of navigational links. The <footer> element shows the footer for the website page or its nearest sectioning content.

<header>
    <h1>Website Title</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
</header>
<footer>
    <p>© 2024 Company Name. All rights reserved.</p>
</footer>

The <section> and <article> Elements

The <section> element defines a section, such as a chapter or a content group. The <article> element is self-contained content that can be independently distributed or reused, such as a blog post, news story, or forum entry.

<section>
    <h2>Section Title</h2>
    <p>Content of the section.</p>
</section>
<article>
    <h2>Article Title</h2>
    <p>Content of the article.</p>
</article>

The <nav> Element

The <nav> element represents a section intended for navigation links. Users can navigate through the website with the help of <nav> element.

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Well-structured and visually appealing web pages can be created by understanding the utilization of HTML block elements. By using these elements, developers can ensure that their content is accessible, organized, and easy to read.

Prev
Next
Scroll to Top