Divisions
Part of the Fundamentals section of Coddy's HTML journey — lesson 25 of 60.
Imagine you want to break your webpage into blocks to organize your content. In HTML, you can use a div to group elements together.
div tags are great for creating layouts and separating sections.
Here's the basic syntax:
<div>
<!-- Content goes here -->
</div>You can add other HTML elements inside a div, such as paragraphs, headings, images, and even other div elements.
Here's an example of how to use div tags to create a simple layout with a header, main content area, and footer:
<div>
<h1>Header</h1>
</div>
<div>
<p>Main content goes here.</p>
</div>
<div>
<p>Footer</p>
</div>
Challenge
EasyCreate 3 div elements, placed one after another in your HTML document.
Inside each div, add a p tag that contains the name of a movie you like.
Cheat sheet
Use div tags to group elements together and organize content into blocks:
<div>
<!-- Content goes here -->
</div>You can nest other HTML elements inside a div, including paragraphs, headings, images, and other div elements:
<div>
<h1>Header</h1>
</div>
<div>
<p>Main content goes here.</p>
</div>
<div>
<p>Footer</p>
</div>Try it yourself
<!DOCTYPE html>
<html>
<body>
<!-- Write code here -->
</body>
</html>
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.
All lessons in Fundamentals
2Text and Formatting
HeadingsParagraphsLine BreaksBold and Italic TextBold and Italic AgainRecap - Formatting8Forms and Inputs Part 1
Form BasicsText InputsInput AttributesPassword FieldLabels for InputsRecap - Basic Form11Event Registration Page
Project OverviewHeader Section
Event Details SectionRegistration FormFooter Section9Forms and Inputs Part 2
Radio ButtonsCheckboxesDropdownsButtonsButtons in FormsRecap - Forms #1Recap - Forms #2