DEV Community

loading...

Creating the Document Structure Using HTML

Stella Mwanahamuntu
Hey, glad you stumbled on my dev.to account, this place place is great right?! Anyways, I make apps, websites and everything else pretty and usable. Javascript is pretty cool so I am into that too.
・2 min read

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.

Discussion (0)

Forem Open with the Forem app