A web page usually has the following components:
- A header
- A navigation menu
- A main section that holds the main content for the page
- Sidebars
- A footer
HTML provides elements that are intended to hold these and other sections of a web page. They are called semantic elements because their names imply their functionality.
Some of the semantic elements in HTML 5 are:
|
section: h1-h6 elements are included in page outline
1x: only one element of this type can exist in a page root: creates a new new document outline |
Besides the fact that semantic elements help organize the contents of an HTML file, they are especially useful to visually impaired individuals that use screenreaders. Through these screenreaders, users can instruct the reader to read specific parts of the web page like the navigation menu or the main content.
Screen readers and other assistive technology can provide their users with outlines of a webpage. The body, nav, main, section, article, and aside elements define sections within a page that can be parsed to produce an outline. See Using HTML sections and outlines for a complete discussion.
Non-semantic Elements
HTML also includes non-semantic elements that can be used to define portions of code that need to have the content within them stylized but that don’t have an appropriately named semantic element. These are called div and span. The div element is a block-level element and span is an inline element.
Example
<section> <h2>Notes</h2> <article> <h3>Getting Started</h3> In this course you’ll learn how to create a dynamic website on the Internet using HTML, CSS and JavaScript. <a href="http://www.n0code.net/wp/csci240/getting-started/">Read more</a> </article> </section>
The above code produces the following HTML.
Notes
Getting Started
In this course you’ll learn how to create a dynamic website
on the Internet using HTML, CSS and JavaScript.
Read more
© 2018 – 2019, Eric. All rights reserved.