<div> TagsIntroduction to <div> Tags
Imagine <div> tags as building blocks for your webpage, like the boxes you use to organize different items when you’re moving houses. Each box (or <div>) can hold different parts of your webpage, helping to keep everything tidy and manageable.
Basic Usage of <div> Tags
A <div> is a block-level element, which means it automatically starts on a new line and stretches out as wide as possible to the left and right sides. This characteristic makes <div> tags ideal for creating distinct sections on a webpage.
Example Structure Using <div> Tags
Here’s a simple way to organize a webpage using <div> tags:
<div id="header">This is the Header</div>
<div id="navigation">Navigation Bar</div>
<div id="main-content">Main Content Area</div>
<div id="sidebar">Sidebar with additional links</div>
<div id="footer">Footer Information</div>
Applying Margins to <div> Tags
While this lesson won’t cover complex CSS, understanding how to use margins can help manage the spacing between your <div> sections. Margins control the space around elements, which is crucial for a clean layout.
Simple Margin Styling
#header, #footer {
margin-bottom: 20px; /* Adds space below the header and footer */
}#navigation {
margin: 10px 0; /* Adds vertical space above and below the navigation bar */
}#main-content {
margin-right: 10px; /* Adds space to the right of the main content, next to the sidebar */
}#sidebar {
margin-left: 10px; /* Adds space to the left of the sidebar */
}Practical Use of <div> Tags for Basic Layouts
Let’s apply what we’ve learned to create a basic page layout that organizes content effectively:
<div id="header">Header</div>
<div id="navigation">Navigation</div>
<div id="main-content">Content</div>
<div id="sidebar">Sidebar</div>
<div id="footer">Footer</div>
In this example, each <div> represents a different area of the webpage. The margins we’ve added help to ensure that these areas do not touch each other directly, improving the overall visual separation and readability of the page.
Task for You
Using what you’ve learned, create a simple webpage layout for a local community center. Include sections like a header, a navigation bar, a main content area for news and announcements, a sidebar for upcoming events, and a footer. Apply margins to ensure each section is distinct and well-spaced.