Block-level elements

When crafting web pages, understanding different HTML elements is like knowing the building materials for your digital structure. Among these essential materials, block-level elements form the core sections of your web pages. They create the framework that holds everything together. This topic will guide you through the concept of block-level elements, how they function, and why they are indispensable when creating well-structured and visually appealing web pages.

Understanding HTML elements

As you know, HTML files can be opened in browsers. After receiving an HTML document, the browser reads the tags in it and uses them to create a HTML page that users see on their monitor screens. All you see on the page in your browser viewer are HTML elements.

There are two main types of page elements: block-level elements and inline elements.

Block-level Elements

Block-level elements start on a new line and stretch out to fill the available width of their parent container, thereby creating distinct sections or blocks within the page. This characteristic makes them essential for organizing content and creating well-structured layouts.

Key Characteristics of Block-Level Elements are:

New Line Start: Each block-level element begins on a new line, separating it from other content. This behavior ensures that each block-level element stands out as a distinct section within the web page.

Full-Width: By default, these elements extend to take up the entire width of their parent container. This full-width behavior allows them to create large, easily distinguishable sections.

To verify it, open the developer tools by pressing Ctrl+Shift+I or Cmd+Opt+I keys on a web page and point the mouse cursor at some object. In the browser, rectangles of different height and widths will be highlighted in color. This is the area occupied by the elements you select:

Contain Other Elements: Block-level elements can contain other block-level elements or inline elements, enabling the creation of complex and nested layouts. This feature allows for greater flexibility and control over web page design.

Semantic Meaning: Many block-level elements carry semantic meaning, indicating the type of content they contain (e.g., <header> for page headers, <article> for self-contained content).

Common Examples of Block-Level Elements include:

• <div> is used to group similar HTML elements. Whenever you want to divide the sections on the webpage you can use the div element. Here is how you can create a section using the <div> element:

  <div>
    <h1>Element h1 is inside the div</h1>
    <p>Element p is also inside the div</p>
  </div>
  

• <p> defines a text paragraph:

  <p>It's a paragraph of the text</p>
  <p>And this is another paragraph</p>
  

  This is how it looks in the browser:

  

• <h1> - <h6> are header tags that define headings, with <h1> being the highest level and <h6> the lowest.

  <h1>Heading level 1</h1>
  <h2>Heading level 2</h2>
  <h3>Heading level 3</h3>
  <h4>Heading level 4</h4>
  <h5>Heading level 5</h5>
  <h6>Heading level 6</h6>
  

  The result will be displayed in the browser as follows:

• <ul> defines an unordered list.

• <ol> defines an ordered list.

• <li> defines a list item (used within <ul> or <ol>).

• <table> defines a table.

• <section> defines a section of content.

• <article> represents a self-contained composition.

• <header> represents introductory content or a set of navigational links.

• <footer> represents footer content for its nearest sectioning content or sectioning root element.

• <hr> creates a horizontal line:

  <hr>
  

  Now let's see how it's displayed in the browser:

  

Structured Web Pages with Block-Level elements

Using block-level elements effectively can transform a basic HTML document into a well-structured web page. For instance, <div> elements can be used to create distinct sections such as headers, footers, navigation bars, and content areas. By nesting block-level elements, you can build detailed and responsive layouts.

Example of a structured web page using block-level elements:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Structured Web Page</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My Website</h1>
    </header>
    <div>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>     
        <li><a href="#contact">Contact</a></li>     
      </ul>   
    </div>
    <div>  
      <p>This is an example of a structured web page using block-level elements</p>  
    </div>
    <footer> 
      <p>Website by Khan designs</p>
    </footer>
  </body>
</html>

In this example, each section of the web page is clearly defined using block-level elements, making the HTML more readable and easier to maintain. This is how it looks in the browser:

Conclusion

Block-level elements are indispensable for creating well-structured and organized web pages. They provide a clear separation of content, making your web pages more readable and maintainable. By mastering block-level elements, you will be better equipped to design and develop professional and user-friendly websites. Keep experimenting with different block-level elements to understand their behavior and enhance your web development skills.