You may have noticed that websites may look completely different but have similar structures. Developers achieve this by locating various HTML layout elements to provide the most comfortable and intuitive layout for all users to read and scan the page.
In addition, when the HTML structure and format are consistent with the displayed content, it is conducive to the ranking of websites in search engines. In this article, we will introduce the most basic layout elements and how to use them correctly.
Layout Elements
Like any other language, HTML contains elements that have some meaning and constitute content, and elements that have no meaning but are only used to organize content. The first group refers to semantic elements, such as<- form>,<- table>, and<- article>, while the second group contains non semantic elements, such as<- div>and<- span>.
Semantic elements<- footer>such as<- header>,<- nav>,<- section>,<- article>,<- aside>define the most typical website layout. From an accessibility perspective, it is critical to respect semantics and use the right elements for the right work. It helps screen readers and other assistive technologies to identify some elements and navigate users with visual or motion impairments to the location they need, such as the main navigation or footer.
<-header>tag
Theelement is located in the “head” of the website, representing introductory content or a set of navigation links. In general, title elements include:
- One or more titles
- Logo or icon
- Author information
Remember that thiselement requires opening and closing tags. HTML pages may contain multiple elements, butcannot be located in,, or otherelements.
<- nav>tag
HTML<- nav>tags represent navigation and provide navigation links, which can be used in the current document or to other pages. Typically, this<- nav>element includes menus, directories, and indexes. Same as<- header>,<- nav>needs start and end tags.
This<- nav>element should not contain all links in the web page, only the main navigation. For example,<- footer>has its own set of links and does not need to be in the<- nav>element.
<- section>label
The<- section>element represents a topic group, usually with a title. Developers use this tag to “dump” content that is not suitable for any other semantic element. For example, if the content representation provides useful information with some additional details for the main content, such as relevant links or author profiles, use this<- aside>element instead. Both the start tag and the end tag of the element are required<- section>.
<- main>tag
The element defines the most<- main>important and unique content in the page. It cannot contain duplicate elements that users can encounter throughout the site, such as navigation links, menus, site logos, and search forms.
From an accessibility perspective, the<- main>element is a prominent landmark. Simply put, this tag indicates the largest and most critical part of the page to screen reader users, so that they can skip the navigation part and jump directly to the content.
An HTML page can only contain one<- main>element, and cannot be a<- article>,<- aside>,<- footer>,<- header>, or child<- nav>element of the element.
