![]() So I’m totally on board with your suggestion here to just use header/nav/main/aside/footer for the top-level page structure. For a while I was chugging along with the “document outline” concept, but it is terribly confusing and not even used for any purpose by browsers or screen readers. I *so* want to structure my markup to a generally-agreed-upon standard, but there doesn’t appear to be any. To mark up more granular content, within regions, use article/section/headings/paragraphs/lists etc.As their number increases their utility to users decreases. Less is more, regions are macro structures, so use them parsimoniously.Ensure all page content is within a region.There are a few general rules that will help users get the most out of your semantic markup: When it comes to using HTML5 structural elements to define page regions the semantic magic is done by the browser (mapping the elements to ARIA landmark roles). Page with navigation within the header region If you content organisation is such that a region is nested within another region, go for it. Page layout with a fat footer at the top, followed by the main content and navigation at the bottom. Hell, if your content is organised such that you have a fat footer at the top of the page and navigation at the bottom, then so be it. The order in which the elements are organised and the region types used is based on your content organisation. By using just 5 elements ( aside, footer, header, main and nav) available in HTML5 you can provide the understanding and navigation benefits of content organisation to users who would otherwise not be able to perceive it from the visual cues alone: Page layout with header at top, nav on right side, main in the middle, aside on right side and footer at bottom. With HTML5 you can express this visual organisation semantically in your code. Usually these regions are identifiable visually by design and the type of content they contain, a user can scan the page and quickly get a feel for the page content and find what they are looking for. Doing an image search for typical web page returns lots of examples of diagrammatic representations of web pages with similar regions delineated:Īll of the page content is organised into a small number of regions which are parents of the rest of the page content. Typically designers and web developers divide web pages into macro content areas (let’s call them regions).
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |