Introduction to HTML Layout

HTML layout refers to how elements on a web page are structured and positioned. It involves organizing content in a way that is visually appealing and easy to navigate for users.

Using the div Tag for Layout

The div tag is a versatile container that can be used to group and style elements on a web page. By using CSS, we can control the layout and positioning of div elements to create a unique page design.

<div id="header">
   <h1>Welcome to our Website</h1>
</div>

<div id="content">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div id="footer">
   <p>© 2022 All rights reserved.</p>
</div>

Using CSS to Style Layouts

CSS (Cascading Style Sheets) is used to style HTML elements and control their appearance on a web page. By applying CSS rules to div elements, we can customize the layout, colors, fonts, and spacing of our content.

#header {
   background-color: #333;
   color: #fff;
   text-align: center;
   padding: 10px;
}

#content {
   margin: 20px;
}

#footer {
   background-color: #333;
   color: #fff;
   text-align: center;
   padding: 10px;
}

4. Creating Responsive Layouts

Responsive design is important for ensuring that your web page looks good on all devices, including desktops, tablets, and smartphones. Using CSS media queries, we can adjust the layout of our page based on screen size.

@media only screen and (max-width: 600px) {
   #content {
      margin: 10px;
   }
}

5. Summary

Congratulations! You have learned the basics of HTML layout and how to create structured and visually appealing web pages. By using div elements and CSS, you can customize the layout of your content and create a unique user experience.