{"id":21696311,"url":"https://github.com/dinanathsj29/html5-semantic-tags","last_synced_at":"2026-01-04T15:05:52.216Z","repository":{"id":121990072,"uuid":"185114790","full_name":"dinanathsj29/html5-semantic-tags","owner":"dinanathsj29","description":"An introduction to new latest meaningful HTML5 semantic tags like HEADER, SECTION, FOOTER, ARTICLE, ASIDE, NAV, and accessibility WAI-ARIA","archived":false,"fork":false,"pushed_at":"2019-05-06T03:08:22.000Z","size":4,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-25T14:11:22.718Z","etag":null,"topics":["article","aside","div","footer","header","html-tag","html5-semantic-structure","html5-semantic-tags","html5-tutorial","nav","search-engine","section","semantic-elements","wai-aria"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dinanathsj29.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-06T03:07:00.000Z","updated_at":"2024-07-26T11:34:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"51676ad4-ff3b-45e4-a81c-442c8ab34e9b","html_url":"https://github.com/dinanathsj29/html5-semantic-tags","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fhtml5-semantic-tags","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fhtml5-semantic-tags/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fhtml5-semantic-tags/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fhtml5-semantic-tags/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dinanathsj29","download_url":"https://codeload.github.com/dinanathsj29/html5-semantic-tags/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244635919,"owners_count":20485440,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["article","aside","div","footer","header","html-tag","html5-semantic-structure","html5-semantic-tags","html5-tutorial","nav","search-engine","section","semantic-elements","wai-aria"],"created_at":"2024-11-25T19:19:25.926Z","updated_at":"2026-01-04T15:05:47.179Z","avatar_url":"https://github.com/dinanathsj29.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"Section 1. Structuring Content with HTML5 Semantic tags\n=====================\n1.1. Structure\n---------------------\n- HTML allows us to structure the document as per the meaning of the content\n- Div, Table tags are used to create structure, layout but its not semantic\n- HTML Semantic Tags - Structure of the webpage to show meaning, not just layout \n- HTML Semantic Structural/Sectioning Elements helps to create pages more readable, accessible, better search engine results-oriented, easy to modify/update\n- A semantic element clearly describes its meaning to both the browser and the developer\n\u003e **Note**: HTML5 semantic elements are supported in all modern browsers.\n\n#### HTML Heading Sectioning Elements\nh1 to h6\n                      \n#### HTML5 Semantic Structural/Sectioning Elements\n\n| Tag                 | Use                                                 |\n| ----------------- |-----------------------------------------------------|\n| `\u003cmain\u003e`          | Specifies the main content of a document            |\n| `\u003cheader\u003e`        | Specifies a header for a document or section        |\n| `\u003cnav\u003e`           | Defines navigation links                            |\n| `\u003csection\u003e`       | Defines a section in a document                     |\n| `\u003carticle\u003e`       | Defines an article.                                 |\n| `\u003caside\u003e`         | Defines content aside from the page content         |\n| `\u003cfooter\u003e`        | Defines a footer for a document or section          |\n\n#### Why HTML5 Semantic Structural/Sectioning Elements introduced?\n- Earlier with HTML, developers used/created their own id/class names to style elements like header, footer, top nav, bottom nav, main menu, nav - navigation, main left right top bottom container, content, left article, right sidebar, etc.\n- This made it difficult and impossible for search engines to identify the correct web page content also a developer to the browser and edit content\n- With the new HTML5 semantic/meaningful elements like (`\u003cheader\u003e \u003cfooter\u003e \u003cnav\u003e \u003csection\u003e \u003carticle\u003e \u003caside\u003e`), this will become easier\n- HTML5 semantic/meaningful elements make pages more readable for machines as well users with accessibility, search engine results, more consistent and easier to use and style\n- \u003e According to the W3C, a Semantic Web: \"Allows data to be shared and reused across applications, enterprises, and communities\"\n\n#### Implementing structural hierarchy\nIt's really up to you what exactly the elements involved represent, as long as the hierarchy makes sense. You just need to bear in mind a few best practices as you create such structures:\n- Preferably you should just `use a single \u003ch1\u003e per page` — this is the top level heading, and all others sit below this in the hierarchy\n- Make sure you use the headings in the correct order in the hierarchy. Don't use `\u003ch3\u003es` to represent subheadings, followed by `\u003ch2\u003es` to represent sub-subheadings — that doesn't make sense and will lead to weird results\n\n#### Why do we need structure?\n- Users looking at a web page tend to scan quickly to find relevant content. If they can't see anything useful within a few seconds, they'll likely get frustrated and go somewhere else.\n- Search engines indexing your page consider the contents of headings as important keywords for influencing the page's search rankings. Without headings, your page will perform poorly in terms of `SEO (Search Engine Optimization)`\n- Visually impaired people often don't read web pages; they listen to them instead.  If headings are not available, they will be forced to listen to the whole document read out loud\n\n1.2. Outlines\n---------------------\n- HTML uses Semantic Elements, Headings, Semantic Tags to generate/describe the Document Outline of page content (Document Outline = Topics, Table of Contents, Index)\n- Document Outline is used by devices/browsers to scan \u0026 search content, navigate to a particular/specific section, also to determine how contents relate to each other\n- HTML5 Outliner is used to understand \u0026 know the exact outline ie page structure of HTML page/document\n- Use outliner utility: https://gsnedders.html1.org/outliner/\n- Text Editor like Brackets uses a `Document Outliner Plugin/extension` to show proper document outline/table of contents/topics/Indexing of page\n- Brackets -\u003e View menu -\u003e Show Document Outline\n\n1.3. Nav\n---------------------\n- Represents a section of the document intended for navigation\n- The \u003cnav\u003e element defines a set of navigation links\n- The HTML \u003cnav\u003e element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents\n- Common examples of navigation sections are menus, tables of contents, and indexes\n\u003e **Note**: It's NOT a rule that all links of a document should be inside an \u003cnav\u003e element The \u003cnav\u003e element is intended only for a major block of navigation links\n\n1.4. Section\n---------------------\n- Represents a generic document or application section\n- The \u003csection\u003e element defines a section in a document\n- The HTML \u003csection\u003e element represents a standalone section\n- \u003e According to W3C's HTML5 documentation: \"A section is a thematic grouping of content, typically with a heading\"\n- A web page could normally be split into sections for introduction, content, the middle section with left and right sections, etc.\n\n1.5. Article\n---------------------\n- Represents an independent piece of content of a document, such as a blog entry or newspaper article\n- The \u003carticle\u003e element specifies independent, self-contained content\n- The HTML \u003carticle\u003e element represents a self-contained composition in a document\n- The HTML \u003carticle\u003e tag is used in a blog/forum post, newspaper article, blog entry etc.\n\n1.6. Aside\n---------------------\n- Represents a piece of content that is only slightly related to the rest of the page\n- The \u003caside\u003e element defines some content aside from the content it is placed in (like a sidebar)\n- Asides are frequently presented as sidebars or call-out boxes\n\n1.7. Header\n---------------------\n- Represents a group of introductory or navigational aids\n- The \u003cheader\u003e element specifies a header for a document or section\n- The \u003cheader\u003e element should be used as a container for introductory content\n- The HTML \u003cheader\u003e element represents introductory content, typically a group of introductory or navigational aids\n- It may contain some heading elements but also a logo, a search form, an author name, and other elements\n- You may have several \u003cheader\u003e elements in one document\n\n1.8. Footer\n---------------------\n- Represents a footer for a section\n- The \u003cfooter\u003e element specifies a footer for a document or section\n- The HTML \u003cfooter\u003e element represents a footer for its nearest sectioning content or sectioning root element\n- A footer typically contains information about the author of the section, copyright data or links to related documents\n- You may have several \u003cfooter\u003e elements in one document\n\n1.9. Div\n---------------------\n- The div tag is known as `Division, Divider tag`\n- The HTML Content Division element (\u003cdiv\u003e) is the generic container for flow content\n- Prior to HTML5 Semantic Tags, the Div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc)\n- The \u003cdiv\u003e tag is an empty container tag, which defines a division or a section by specifying child elements\n- With HTML5 Semantic Tags, Div a powerful tag also used for structuring, dividing, Layout, Sectioning page/content with CSS or manipulated with scripts\n- The \u003cdiv\u003e tag is a block-level element, so a line break is placed before and after it\n- The Div is the most usable tag in web development because it helps us to separate out data in the web page and we can create a particular section\n- It is used to the group of various tags of HTML so that sections can be created and style can be applied to them\n\n1.10. WAI-ARIA\n---------------------\n- Web Accessibility Initiative-Accessible Rich Internet Application\n- It is a set of attributes to help enhance the semantics of a web site or web application to help assistive technologies, such as screen readers for the blind, make sense of certain things that are not native to HTML\n- ARIA (WAI-ARIA) is a set of attributes that you can add to HTML elements. These attributes communicate role, state, and property semantics to assistive technologies via the accessibility APIs implemented in browsers\n- ARIA (WAI-ARIA) provides the user with a good way to navigate and interact with your site. Make your HTML code as semantic as possible, so that the code is easy to understand for visitors and screen readers\n- WAI-ARIA is an incredibly powerful technology that allows developers to easily describe the purpose, state and other functionality of visually rich user interfaces\n- **Landmark Roles (Screen Readers and other devices scan and jump to the required role)**\n```\n    - \u003cheader role=\"banner\"\u003e\n    - \u003cnav role=\"navigation\"\u003e\n    - \u003cmain role=\"main\"\u003e\n    - \u003carticle role=\"article\"\u003e\n    - \u003cfooter role=\"footer\"\u003e\n    - \u003caside role=\"complementary\"\u003e\n    - \u003cfooter role=\"contentinfo\"\u003e\n```\n\n1.11. Websites / Blogs\n---------------------\n- https://www.w3schools.com/html/html_accessibility.asp\n- https://www.w3.org/WAI/standards-guidelines/aria/\n- https://www.w3.org/TR/wai-aria/\n- https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fhtml5-semantic-tags","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdinanathsj29%2Fhtml5-semantic-tags","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fhtml5-semantic-tags/lists"}