Sections
In this module we will do the following:
Explanation of sections.
Create a section that covers the entirety of the page, has a heading, and some text.
Customize with some basic inline CSS.
Create two sections side by side, using a little CSS.
Discuss the difference between div and section
File Location
For this module, you should be working in the following location:
DotNetProjects
└── HTMLCSSPreWork
└── 1-HTML-Basics
10-sections.html <---You should be here.
└── 2-CSS-Basics
└── 3-assetsDescription
Sections are like divs, but they are semantic groupings. They help the browser and the developer understand that there is a particular grouping coming. The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
Sample Code
Add the following sample code to your file:
Discussion
Introduced in HTML5, the section tag is helpful in allowing us to avoid 'divitis'. Having a variety of ways to separate our code is useful, but the real advantage is that content inside <section> is grouped to indicate a common theme. A <section> is usually indicated by a heading (<h1>-<h6>) as a nested or child element. This contrasts with <div> where the elements contained within it are only related by being children of the <div> and by attributes assigned to the <div>.
This is another example of intentional programming in that an unaware, or apathetic, developer may sling <div> tags around with no recognition for the superior accessibility to screen readers and easier maintainability for authors that <section> offers.
Challenge
Experiment with the sections you just made, changing the inline styling or adding other elements to the document.
Extra Reading
This is an excellent resource from the team that defines the standards that the internet operates by. Start getting into the habit of looking for information from first-party sources and the authors of the technology that we all use.
Last updated