Sections and Articles
Part of the Fundamentals section of Coddy's HTML journey — lesson 28 of 60.
In HTML, <section> and <article> tags are used to organize content into logical parts.
The <section> tag defines a section in a document, such as chapters, headers, footers, or any other sections of the document. It's a way to group related content together. For example, you might use <section> to divide a page into an introduction, content, and contact information.
Here's how you can use the <section> tag:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>The <article> tag specifies independent, self-contained content. It should make sense on its own, and it should be possible to read it independently from the rest of the web site. Examples of where an <article> element can be used: a forum post, a blog entry, a news story, or a comment.
Here's how you can use the <article> tag:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
Challenge
EasyCreate an HTML document that uses <section> and <article> tags to structure a web page. Include the following sections:
- A
<main>section to hold the main content of the page. - Inside
<main>, create a<section>with a heading (<h2>) that says "Upcoming Events". - Inside the
<section>, create two<article>elements. - Each
<article>should have a heading (<h3>) and a paragraph (<p>) with some dummy text. Use "Event 1" and "Event 2" for the headings and "Event 1 details..." and "Event 2 details..." for the paragraphs.
Cheat sheet
The <section> tag defines a section in a document to group related content together:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>The <article> tag specifies independent, self-contained content that should make sense on its own:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>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