Jump Straight to the Content Using the main Element:
HTML5 introduced several new elements that give developers more options while also incorporating accessibility features. These tags include main, header, footer, nav, article, and section, among others.
By default, a browser renders these elements similar to the humble div.
However, using them where appropriate gives additional meaning to your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content.
Assistive technologies can access this information to provide better page summary or navigation options to their users.
The main element is used to wrap (you guessed it) the main content, and there should be only one per page. It's meant to surround the information related to your page's central topic. It's not meant to include items that repeat across pages, like navigation links or banners.
The main tag also has an embedded landmark feature that assistive technology can use to navigate to the main content quickly.
If you've ever seen a "Jump to Main Content" link at the top of a page, using the main tag automatically gives assistive devices that functionality.
Wrap Content in the article Element:
the article is another one of the new HTML5 elements that add semantic meaning to your markup.
article is a sectioning element and is used to wrap independent, self-contained content.
The tag works well with blog entries, forum posts, or news articles.
Determining whether content can stand alone is usually a judgment call, but you can use a couple of simple tests.
Ask yourself if you removed all surrounding context, would that content still make sense?
Similarly, for text, would the content hold up if it were in an RSS feed?
Remember that folks using assistive technologies rely on organized, semantically meaningful markup to better understand your work.
Note: The section element is also new with HTML5, and has a slightly different semantic meaning than article.
An article is for standalone content, and a section is for grouping thematically related content. They can be used within each other, as needed.
For example, if a book is the article, then each chapter is a section. When there's no relationship between groups of content, then use a div.
<div> - groups content <section> - groups related content <article> - groups independent, self-contained content
No comments:
Post a Comment