What is div element in html with Examples

Progressive Markup

Progressive improvement is a procedure for dealing with varied browser support. It begins with markup that follows to web standards, making it usable by all browsers, regardless of technologies like JavaScript and CSS. We then gradually enhance the user experience for more capable browsers by incorporating CSS styling and eventually JavaScript. This approach confirms that even older browsers that don’t understand the latest features still provide a usable experience.

Using <div> with HTML5 id and class Names for Older Browsers

Older browsers, versions of Internet Explorer before IE9, do not integrally recognise the new semantic elements introduced in HTML5, such as <header>, <nav>, <article>, <aside>, <section>, and <footer>. These browsers treat these new elements as inline elements, which can root important problems with styling.

To address this, a technique known as using “Plain Old Semantic Markup (POSH)” or mirroring the semantic structure with <div> elements and descriptive id and class names was hired. The idea is to use <div> elements but give them id or class attributes that reflect the semantic meaning of the new HTML5 elements. This allows developers to:

Provide semantic meaning in the markup even for older browsers. While the browser doesn’t characteristically understand <header>, a <div id=”header”> or <div class=”header”> provides a clue to developers and potentially to assistive technologies about the content’s purpose.
Apply CSS styles constantly. CSS selectors, including those based on id and class attributes, work in older browsers. By using meaningful names, you can style these div elements to create the desired layout and appearance, similar to how you would style the actual HTML5 semantic elements in modern browsers.
Facilitate a smoother transition to HTML5. This allows developers to adopt the semantic structure conceptually, and later, when supporting older browsers becomes less critical, they can easily replace the div elements with the corresponding HTML5 semantic tags.

It’s important to note that simply using <div> with semantic names doesn’t make older browsers fully understand the semantic meaning in the same way a modern browser understands the new HTML5 elements for features like the document outline. However, it provides a important improvement over using generic <div> elements without any semantic context.

Examples

Example 1: Using <div> with id attributes to mirror HTML5 semantic structure

In this example, div elements are used with id attributes like header, nav, main, article, aside, and footer to represent the semantic structure that would be achieved with the corresponding HTML5 elements in modern browsers. The closing </div> tags are often commented to help identify the end of each section.

<body>
  <div id="header">
    <p>My Blog Title</p>
    <div id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!--end nav-->
  </div><!--end header-->
  <div id="main">
    <div class="article">
      <p>First Blog Post</p>
      <p>This is the content of the first blog post.</p>
      <div id="footer">
        <p>Published on January 1, 2023</p>
      </div><!--end footer-->
    </div><!--end article-->
    <div class="article">
      <p>Second Blog Post</p>
      <p>This is the content of the second blog post.</p>
      <div id="footer">
        <p>Published on January 15, 2023</p>
      </div><!--end footer-->
    </div><!--end article-->
  </div><!--end main-->
  <div id="aside">
    <p>Categories</p>
    <ul>
      <li><a href="#">Technology</a></li>
      <li><a href="#">Travel</a></li>
      <li><a href="#">Food</a></li>
    </ul>
  </div><!--end aside-->
  <div id="footer">
    <p>&copy; 2023 My Blog</p>
  </div><!--end footer-->
</body>

First Blog Post

This is the content of the first blog post.

Second Blog Post

This is the content of the second blog post.

More details about the topic.

Last updated: Today

Enabling Styling of HTML5 Elements in Older IE

While using <div> with semantic names provides a structural and styling fallback, to actually style the new HTML5 elements in older versions of Internet Explorer (pre-IE9), a small piece of JavaScript known as the HTML5 shiv or shim is required. This script uses the DOM’s document.createElement() method to inform IE about the new element names, allowing CSS to be applied to them. This script is typically placed within conditional comments in the <head> section of the HTML:

<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Additionally, you often need to clearly set the display property of the new HTML5 elements to block in your CSS to ensure they behave as expected in older browsers:

header, nav, article, aside, section, footer {
  display: block;
}

Libraries like Modernizr can also be used to detect browser support for HTML5 features and apply necessary fallbacks. Modernizr includes the HTML5 shiv functionality.

By combining the use of semantic div elements with CSS styling and the HTML5 shiv, developers could achieve a degree of progressive enhancement, providing a functional and reasonably well-styled experience even in older browsers while leveraging the semantic benefits of HTML5 for modern browsers.

HTML5 Topics

Page Content

Tutorials

What is div element in html with Examples

Examples

LEAVE A REPLY Cancel reply