HTML Layout lesson

You might have noticed that websites can look entirely different but have similar structures. Developers achieve this by positioning the various HTML layout elements to provide the most comfortable and intuitive layout for all users to read and scan pages.

Moreover, when HTML structure and formatting are in line with the displayed content, it benefits website ranking in search engines. In this lesson, we cover the most fundamental layout elements and how to use them correctly.

Exercise #1

Layout elements

Like any other language, HTML contains elements that carry some meaning and compose content and elements that bring no meaning but exist only to organize content. The first group refers to semantic elements like <form>, <table>, and <article>, while the second group contains non-semantic elements like <div> and <span>.

Such semantic elements like <header>, <nav>, <section>, <article>,<aside>, and <footer> define the most typical website layouts. From the accessibility perspective, it's crucial to respect semantics and use the right element for the right job. It helps assistive technologies like screenreaders recognize section elements and navigate users with visual or motor impairments to places they need, like main navigation or footer.

Exercise #2

The <header> tag

The <header> element is located at the "head" of the website and represents introductory content or a set of navigational links.

Generally, the header element includes:

• One or more headings (<h1> - <h6>)

• Logo or icon

• Authorship information

Remember that the <header> element requires both the start and end tags. The HTML page may include more than one <header> but it cannot sit inside <footer>, <address>, or another <header> element.

Exercise #3

The <nav> tag

The HTML <nav> tag stands for navigation and provides navigation links, either within the current document or to other pages. Typically, the <nav> element includes menus, tables of contents, and indexes. Like the <header>, the <nav> requires both opening and closing tags.^[1]

Pro Tip: The <nav> element shouldn't include all links from the web page, only the main navigation. For instance, the <footer> has its own set of links that don't need to be in a <nav> element.

Exercise #4

The <section> tag

The <section> element represents a thematic group, typically with a heading. Developers use this tag for "dumping" content that doesn't fit into any other semantic element. For example, if the content represents useful information that provides some extra details to the main content, like related links or an author bio, use the <aside> element instead. Both opening and closing tags are mandatory for the <section> element.

Exercise #5

The <article> tag

The HTML <article> element represents a self-sufficient, standalone piece that makes sense on its own so that users can share it independently from the rest of the website.

Examples include:

• Forum posts

• Blog posts

• Newspaper or magazine articles

• Product cards

• User comments below the article or posts

An HTML page can contain multiple <article> elements with one or more <section> tags within. Both start and end tags are mandatory for the <article> element.

Exercise #6

The <aside> tag

Developers use the <aside> element for accessory information that should be included without distracting users from the main content. The most common examples include sidebars or inline menus. Unsurprisingly, the <aside> element requires both start and end tags like other semantic elements.^[2]

Exercise #7

The <footer> tag

The <footer> element normally lies at the web page's ground and contains copyright information, some navigational links, links with contacts, and external social media references.

The <footer> element can occupy any place inside the <body>, but you can't put it within an <address> (which provides contact information), <header> or another <footer> element.

Exercise #8

The <details> tag

The <details> element includes extra information that users can look at or hide on demand. Think of accordions or tooltips as the most familiar examples of the <details> element. These elements give developers and designers the ability to save space while avoiding overwhelming users with data.

To specify that the details should be visible to users (by default, they're hidden), you should use the open attribute. The syntax flows like this: <details open>...</details>^[3]

Exercise #9

The <summary> tag

The <summary> element goes in tandem with the <details> tag. It references the heading that users should click or tap to see details. For example, the accordion control represents a stack of collapsed sections. The <summary> tag defines a heading, while the <details> tag specifies the section content that stays invisible until users click it.

Exercise #10

The <figure> tag

If you have taken our HTML Images lesson, you'd know that for adding an image on a page, we use the <img> tag. What's the <figure> element for? Developers use the <figure> element to specify self-contained content, like illustrations, diagrams, photos, or code snippets.

This tag translates to the browser that the image is a part of the main flow, but its position is independent. If you decide to remove this image, it won't affect the layout. If you look at the syntax, you'll see that the <img> tag is a child of the <figure> element.

Exercise #11

The <main> tag

The <main> element defines the most important and unique content of the page. It can't contain repetitive elements like navigation links, menus, site logos, and search forms that users can meet throughout the website.

From the accessibility standpoint, the <main> element acts as a prominent landmark. Simply put, this tag indicates the largest and most crucial part of the page to screenreader users so they can skip the navigation part and jump right into the content.

The HTML page can contain only one <main> element, and it can't be a child of an <article>, <aside>, <footer>, <header>, or <nav> element.