Semantic header, main, footer, and aside tags

by Wayne Smith

Page Structure or Region HTML Tags

These tags, (header, main, footer, and aside), can be thought of as the basic web page structure tags, Along with the nav tag which is nuanced enough to have a dedicated page.

The regional tag that is most important for ARIA devices is the main tag. Readers allow one to skip the header and navigation and jump straight to the main tag or tag with the role of the main content section of the page. There should only be one tag on the page with this role.

Search engines may treat content differently depending on the region but what they consider is what part of a page is the same as other pages on the site. Regardless of what AI may say about semantic tags in general, regional tags are very useful for page design, styling, and maintenance. But to maintain ARIA support avoid using the tag names in CSS; think in terms of how the page is to be read for these tags.

A typical layout may look something like this using semantic tags.

Responsive Semantic HTML Diagram

A typical layout has the header at the top, the main in the middle, and the footer at the bottom. On a desktop screen readability of the article is improved by not forcing the reader to read from the left edge to the right edge of the screen. If content is not in columns, something is normally placed on one or both of the side margins. For responsive design, on a cell phone, the aside may be best placed under the main content or article.

Avoid Styling Semantic Tags

To maintain ARIA readability use of Semantic tags, coding, and maintenance becomes problematic when these tags need to have both the role of readability and visual styling. Content changes may require HTML coding changes. For example, if something instead of an article was the main content ... styling works by using classes for elements, which can be moved to any tag.