Welcome to Web Development: Lesson 03 — Semantic Elements & Page Layouts

Organizing your pages in ways that help everyone

Photo by CHUTTERSNAP on Unsplash

Websites are pieced together block by block until it becomes a fully functional website. As HTML has grown and evolved, we have gotten access to more types of blocks to be even more efficient and organized with our building. In this lesson, we will take a deeper dive into some of these blocks, as well as showcasing one basic website layout.

Semantic Elements

Semantic elements are elements that have meaning. For awhile, we used to utilize attributes like role="navigation" inside of more generic elements like a <div> tag. Now, we have elements like <nav> with some of the meaning built into it!

Common Semantic Elements

• Article — Contains content that should be able to stand on its own and still make sense to the readers.
• Aside — Contains indirectly related content, often like a sidebar.
• Figure/Figcaption — Contains content like photos, illustrations, and more (that sit inside of an img tag). Figcaption, which goes inside of Figure, sets a caption for the figure element.
• Footer — Contains footer content for a page or individual section.