Lesson 12

HTML Structure

0

When writing HTML content like paragraphs, lists or links, you provide meaning to your text. But you might want to group some of these elements together.

For example, a blog’s webpage can be divided in 4 parts:

  • a header that is similar on every page, and is the main navigation of the website

  • a main content, that changes for every page: a list of articles, a single article with comments, an about page…

  • a sidebar that links to monthly archives and categories

  • a footer for additional links to less important pages

There are some structural HTML elements you can use as containers for other elements.

Header

The header is usually the first HTML element in the code. It acts as an introduction to the webpage, with the logo, a tagline, and navigation links.

Footer

As opposed to the header, the footer is usually the last element of a page, where the main navigation links are repeated and secondary ones added.

Main

The main element contains, as its name suggests, the most important content of the page, the one that defines the purpose of the page.

While all webpages of a website contain common elements (like the header, the navigation, the footer…), the main element focuses on unique content.

For example, the article you are currently reading lies within the main element of this webpage, because its content is unique throughout the whole MarkSheet website.

Aside

The aside element usually lives alongside the main and contains additional information related to the main content.

Section

The section element allows to group

Sections themselves don’t carry a specific meaning. It’s more about the relation between its child elements rather than its own meaning within the overall page.

The MarkSheet homepage displays 3 sections:

  • the heading (logo, title, subtitle)

  • the introduction (“Short”, “Simple”, “Free”)

  • the chapters (“Web”, “HTML”, “CSS”)

They all reside within the homepage main element, but are divided logically to group similar content and provide more meaning to the page’s structure.

HTML Basics by Jeremy Thomas is licensed under CC BY-NC-SA 4.0

Comments

icon

Be the first to comment!