Grouping html elements

Grouping html elements

Developers group html elements to create unique layouts for their websites. There are a number of additional tags that allow us to group related HTML content together. Some examples include <header><section><article> and <footer>. All of these HTML elements (including <div>) have no effect on the HTML content itself, but instead group and contain other elements. In this tutorial, we’ll cover <div>, <header> and <footer>.

The <div> tag is used to group other HTML content together. The <div> element doesn’t add or change the content of your HTML. Instead, its main purpose is to provide an easy way to target and each group.

Creating a div

To create a new <div>, we simply surround groups of HTML elements with an opening and closing <div></div> tag.

<!Doctype html>
 <html>
      <head>
      
       <title> My webpage </title>
     </head>

     <body>

       <header>
          <h1> My webpage header </h1>
       </header>

       <section>
         <div>
         <h1>This is a 1st Section Heading</h1>
         <p>Insert additional paragraph content here...</p>
         </div>
       </section>

       <section>
       <div>
       <h1>This is a 2nd Section Heading</h1>
       <p>Insert additional paragraph content here...</p>
       </div>
      </section>

     <footer>
           Copyright 2020 learncode-a-z.com
     </footer>
  </body>
</html>

This is a Basic structure how to group elements in html. Now try by your self to create others with Text editor, use for example brackets or visual studio and click go live to see the outcomes.

One thought on “Grouping html elements

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow by Email
LinkedIn
LinkedIn
Share
Instagram
error: Content is protected !!