OBJECTIVE : Structure the UI by using semantic markup, including markup for search engines and screen readers, such as Section, Article, Nav, Header, Footer, and Aside; create a layout container in HTML.
Semantic Elements clearly describe their meaning to both the browser and the developer.
Some and I think all the new HTML semantic elements include:
- <article> - Defines self contained areas on a page.
- <aside> - Like a sidebar, it defines smaller content areas outside the normal layout of the webpage.
- <details> - Defines additional details that the user can choose to view or hide.
- <figcaption> - Defines the caption of a figure eg. an image.
- <figure> - Groups together an image and caption
- <footer> - Defines the footer section of a document or section in the document
- <header> - Defines the header section of the document or a section in the document
- <main> - Specifies the main content of a document.
- <mark> - Defines marked or highlighted text
- <nav> - Defines navigation links
- <progress> - Represents the progress of an objective or task.
- <section> - Defines a section in the document
- <summary> - Defines a visible heading for <details>
- <time> - Defines date and time
Yep that is about it on Creating the document structure. The next post will be on Writing Code that Interacts with UI Controls and hopefully I will have learned how to embed code snippets and images.
Thank you and comments and discussions are welcome.
Top comments (0)