HTML5 Page Structure Basics

Detailed explanation of HTML5 semantic elements and guide to building page structure

Core points

• HTML5 introduces new semantic elements to enhance the meaning of document structures, such as header, section, article, nav, aside, and footer elements. These elements can be used to divide the page and clarify the purpose of the content.
The
• header element is not only used for page titles, but also introduces every part of the content. The section element represents the subject grouping of content, usually with a title. The article element represents a complete and independent component in the document and can exist independently.
The
• nav element represents a set of navigation links and should be reserved for the primary navigation. The aside element represents a part of the page, indirectly related to the surrounding content, and can be considered separate from the content.
The
• footer element represents the footer of its most recent ancestor content section. It usually contains copyright information, related link lists, author information, and similar information that you usually think is at the end of the content block.

(The following is excerpted from the book "HTML5 & CSS3 for the Real World, 2nd Edition" co-authored by Alexis Goldstein, Louis Lazaris and Estelle Weyl. The book is available in stores around the world, and you can also find it here. Purchase the e-book version. )

After breaking down the basics of the template, let's start adding some content to the page and building its structure.

After this book, we will specifically introduce the addition of CSS3 features and other HTML5 elements; for now, we will consider the elements to use when building the overall layout of the website. In this section and in the following chapters, we will cover semantics extensively. When we use the term "semantic", we refer to the way a given HTML element describes the meaning of its content.

If you look back at the screenshot of The HTML5 Herald (or view the website online), you will see that it is divided into the following sections:

• Header section with logo and title
• Navigation Bar
• The main content divided into three columns
Articles and ad blocks in the
• column
• Footer containing some author and copyright information

Before we determine which elements are suitable for these different parts of the page, let's consider some options. First, we'll introduce you to some new HTML5 semantic elements that can be used to help divide pages and add more meaning to the document structure.

header element

Naturally, we will focus on the header element first. The specification concisely describes it as "a set of introductory or navigation aids."

Contrary to what you usually assume, you can include a new header element to introduce each part of the content. It's not limited to page headers (you may usually use <div> to tag). When we use the word “section” here, we are not limited to the actual section elements described in the next section; technically, we refer to what HTML5 calls “sectioning content”. This means any content block that may require your own header, even if it means there are multiple such blocks on a page. The header element can be used to include introductory content or navigational aids that are specific to any single part of the page, or to apply to the entire page, or both. <p>While the header element is usually placed on the top of a page or section, its definition has nothing to do with its position. Your website layout may require the title of the article or blog post to be on the left, right, or even below the content; in either case, you can still use a header to describe this content. </p> <p><strong>section element </strong></p> <p>The next element you should be familiar with is the section element of HTML5. The specification defines section as follows: </p> <blockquote> The <p>section element represents a common part of a document or application. In this context, section is a topic grouping of content, usually with a title. </p> </blockquote> <p> It further explains that section should not be used as a general-purpose container for style or script purposes only. If you can't use section as a general purpose container (for example, to implement the required CSS layout), what should you use? Our old friend div element, it semantically means nothing. </p> <p> Back to the definition in the specification, the content of the section element should be "thematic", so it is incorrect to use it in a common way to wrap unrelated parts. </p> Some examples of acceptable uses of the <p>section element include: </p> <ul> <li>Sections of tabbed interface</li> <li>The section of the "About" page; for example, the company's "About" page may contain sections about company history, mission statements, and teams</li> <li>Different sections of the long Terms of Service page</li> <li>Each section of an online news website; for example, articles can be grouped into sections covering sports, international affairs and economic news</li> </ul> <p><strong>Note: Use section correctly</strong></p> <p>Every time a new semantic marker is provided to web designers, the correct use of these elements, the intent of the norm, etc. are discussed. You may remember the previous discussion of the appropriate usage of dl elements in the HTML specification. As expected, HTML5 is not immune to this phenomenon, especially in terms of section elements. Even Bruce Lawson, a highly respected HTML5 authority, admits to using section incorrectly in the past. For a clearer understanding, it is well worth reading Bruce’s article which explains his mistakes. </p> <p>In short: </p> <ul> <li>section is <em>generic </em>, so if a more specific semantic element applies (such as article, aside, or nav), use that element instead. </li> <li>section <em> has semantic meanings; this means that what it contains is related to some extent. If you can't use just a few words to concisely describe everything you're trying to put in the section, you might want a semantically neutral container: an inconspicuous div. </em> </li> </ul> That is, like semantics, it can be interpreted in some cases. If you feel you can explain why you are using the given element instead of another element, go ahead. If someone really criticizes you about this, the resulting discussion will be both interesting and beneficial for all participants and may even help the broader community understand the norm. <p> </p> Also remember that if appropriate, you can nest section elements into existing section elements. For example, for online news sites, the World News section can be further subdivided into sections of each major global region. <p> </p> <p>article element<strong></strong> The </p>article element is similar to the section element, but has some significant differences. The following are the definitions in the specification: <p> </p> The <blockquote>article element represents a complete or independent component of a document, page, application, or site and can in principle be distributed independently or reused, for example in a joint release. <p> </p> </blockquote>The keywords in this definition are <p> independent components <em> and </em> independently distributed <em>. While section can contain anything that can be grouped by topic, article must be a single content that can exist independently. This difference can be difficult to understand, so if you have questions, try a joint publishing test: if the content can be reposted on another website without modification, or if it can be made via RSS or social media sites like Twitter or Facebook Push is an update, then it has the characteristics of an article. </em> </p> Ultimately, it's up to you to decide what constitutes an article, but here are some suggestions that comply with the specifications: <p> </p> <ul>Forum Posts<li> </li>Magazine or newspaper article<li> </li>Blog Posts<li> </li>Comments on blog posts or articles submitted by users<li> </li> </ul>Lastly, just like the section element, the article element can be nested in other article elements. You can also nest sections in articles and vice versa. It all depends on what you want to mark. <p> </p> <p>nav element<strong></strong> </p>To be sure, the nav element appears in almost every project. nav As its meaning means: a set of navigation links. While the most common use of nav is an unordered list of wrapping links, there are other options. For example, you can wrap the nav element around a text paragraph containing the main navigation link for the page or page section. <p> </p>In either case, the nav element should be reserved for the most important navigation. Therefore, it is recommended that you avoid using nav for short link lists in the footer, for example. <p> </p> <p>Note: Skip the navigation link <strong></strong></p> <p>One design pattern you may see implementing on many websites is the "Skip Navigation" link. The purpose is to allow screen reader users to quickly skip the main navigation of the website if they have heard it – after all, there is no need to listen to the entire navigation menu of a large website every time they click on a new page! The nav element has the potential to eliminate this need; if the screen reader sees the nav element, it can allow its users to skip navigation without additional links. The specification states: "A user agent for users who may benefit from omitting navigation information in the initial rendering or may benefit from providing navigation information immediately, such as a screen reader, can use this element to determine whether to initially skip or provide on demand on the page. Content (or both). ”</p> <p>While not all auxiliary devices recognize nav, by building standards now you can ensure that your page will become more accessible over time as screen readers improve. </p> <p><strong>Note: User Agent</strong></p> <p>You will often encounter the term "user agent" when browsing specifications. In fact, it's just a fancy term for the browser - the software "agent" used by users to access the content of the page. The reason why the specification does not simply say "browser" is that user agents can include screen readers or any other technical means of reading web pages. </p> <p>You can use nav multiple times on a given page. If you have the main navigation bar for your website, you need a nav element. Additionally, if you have a set of auxiliary links to different parts of the current page (using in-page anchors or "local" links), this can also be wrapped in the nav element. </p> <p> As with section , there is some debate about what constitutes an acceptable use of nav and why it is not recommended in some cases (e.g. in the footer). Some developers believe this element is suitable for paging or breadcrumb links, or for search forms that make up the main navigation of the website (as in the case on Google). </p> <p>This decision ultimately depends on you, the developer. Ian Hickson, the main editor of WHATWG's HTML5 specification, answered the question directly: "Use it any time you would have used class=nav". <sup>[7]</sup></p> <p><strong>aside element</strong></p> <p>This element represents a part of the page, "indirectly related to the content around the aside element and can be considered separate from the content". </p> The <p>aside element can be used to wrap content parts that are indirectly related to: </p> <ul> <li>Specific independent content (such as articles or sections). </li> <li>The entire page or document, which is usually done when adding a sidebar to a page or website. </li> </ul> <p>aside element is never used to wrap the page part where the main content is; in other words, aside does not refer to clauses. aside content can exist independently, but it should still be part of a larger whole. </p>Some possible uses of <p>aside include sidebars, auxiliary link lists, or ad blocks. It should also be noted that the aside element (like the header) is not defined by its position on the page. It may be on the side or elsewhere. Defines its content itself and its relationship to other elements. </p> <p><strong>footer element</strong></p> <p>The last element that will be discussed in this chapter is the footer element. Like header you can have multiple footer elements on a single page and you should use footer instead of something common like <code><div>. By specification, the footer element represents the footer of its most recent ancestor content section. The content part can be the entire document, or it can be a section, article, or aside element. <p>footer usually contains copyright information, related link lists, author information, and similar information that you usually think is at the end of a content block; however, like aside and header, the footer element is not defined by its position on the page, so it does not have to Appears at the end of a section or at the bottom of the page. It's likely it will, but it's not necessary. For example, information about the author of a blog post may be displayed above the article rather than below it and is still considered footer information. </p> <p><strong>Note: How did we get to this point? </strong></p> <p>If you have some questions about the path to HTML5 and the tags we end up with, you might want to check out Luke Stevens’ book The Truth about HTML5. Luke's book is currently published in the second edition, and the content is somewhat controversial. In addition to covering many HTML5 technologies such as videos and canvases, he also delves into the history of HTML5, explains some of the semantics and accessibility issues inherent in new elements, and provides some suggestions on how to deal with them. . </p> <hr> <p><sup>[7]</sup> See <a href="https://www.php.cn/link/729db3e07a09db3a41dc1734e04ce44e"> https://www.php.cn/link/729db3e07a09db3a41dc1734e04ce44e</a>. </p> <p><strong>HTML5 Page Structure FAQ (FAQ)</strong></p> <h3>What is the meaning of the statement in HTML5? </h3> <p>The declaration is the first line of the HTML5 document. It is not an HTML tag; it is a directive about which version of HTML the page uses. In HTML5, the declaration is simplified to <code><!DOCTYPE html>. This helps ensure that the browser renders the page in standard mode, which supports the latest HTML specifications.

How does an element work in an HTML5 document?

The

element is a container of metadata (data about data) that is located between the tag and the tag. Metadata will not be displayed on the page, but can be parsed by the machine. It usually defines document titles, character sets, styles, scripts, and other meta information. The content of the element can include elements such as <title></title>, <meta>, <link>, <style></style> and <base>.

What is the function of the

element in HTML5? The

element contains the main content of the HTML document or the portion of the HTML document that will be directly visible on your web page. This can include text, images, tables, links, forms, and other types of data. tags are usually followed by tags.

How does an element enhance HTML5 structure?

The

element in HTML5 is used to contain introductory content or a set of navigation links. It can contain some title elements, and it can also contain other elements such as logos, titles for wrapping parts, search forms, and more. <header></header> Elements usually contain one or more title tags (h1 – h6), logos or icons, and author information. <header></header>

What is the purpose of the

element in HTML5? <footer></footer>

The

element in HTML5 is used to define the footer of a document or part. It usually contains information about the authors in this section, copyright information, links to related documents, and so on. You can include multiple <footer></footer> elements in one document. <footer></footer>

How do elements improve HTML5 page structure? <nav></nav>

The

element in HTML5 is used to define a set of navigation links. Not all link groups on the page need to be in the <nav></nav> element, which is only used for the main navigation link block. A browser (such as a screen reader for a disabled user) can use this element to determine whether to omit the initial rendering of this content. <nav></nav> What is the function of the

element in HTML5?

<article></article> The

element in HTML5 represents a complete or independent component of a document, page, application, or site. This can be a forum post, magazine or newspaper article, blog post, user-submitted comments, interactive widgets or widgets, or any other standalone content item.

<article></article>How does the element promote HTML5 structure?

The

element in HTML5 represents a separate functional part contained in an HTML document, usually with a title rather than a more specific semantic element, such as

or <section></section>. It is a topic grouping of content, usually with a title, making the document structure easy to understand. <article></article> What is the function of the <aside></aside> element in HTML5?

The <aside></aside> element in HTML5 is used to represent a part of a document whose content is only indirectly related to the main content of the document. Aside is usually presented as a sidebar or a label box.

<aside></aside> How do elements enhance HTML5 structures?

The <main></main> element in HTML5 represents the main content of the document

. The main content area consists of content or central functions of the application that is directly related to the central topic of the document or extends the central topic. It should be document-specific and does not include duplicate content in a set of documents (such as site navigation links, header or footer information).