Embedded Files
HTML5 Semantic Elements
HTML5 Semantic Elements
The newest version of HTML5 brings with it various features. The major structural change is the introduction of semantic elements that define different areas of the web page.
A definition of semantic is: relating to meaning in language or logic
They are designed to allow browsers to derive some meaning about the content of the element.
They can also enhance the readability of the code.
Elements such as DIV give no indication as to what this content may be and you may have numerous DIV tags which could affect the readability and maintainability of the code.
HTML5 Elements Covered at Higher
HTML5 Elements Covered at Higher
The semantic elements we will look at during the Higher course are:
Header - The header element represents introductory content. A header typically contains a title, company logo and/or link to a home page.
Nav - The nav element represents a section of a page that links to other pages or to parts within the page. So will usually contain a navigation bar.
Main - A main element contains the main content section of the body of a document.
Section - A section element represents a generic section of a document. Each section should be identified, typically by including a heading (h1-h6 element).
Footer - A footer element contains information about its section such as who wrote it, links to related documents, copyright data or contact details.
Comparison of use of HTML5 elements
Comparison of use of HTML5 elements
HTML Element Wireframe
Implemented HTML Page
HTML Element Wireframe
Implemented HTML Page
Browser Compatibility
Browser Compatibility
HTML5 is still being implemented and not all browsers implement it fully, with some support certain features but not others.
You must ensure that you test your website on different browsers
https://html5test.com/ is a website which allows you test which features your browser supports and which it does not
Page updated
Report abuse