Creating the Document Structure Using HTML

#html #beginners #tutorial #webdev

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.

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now