Lab 25 Semantic HTML

Goals

Structure, not Style

Now that you've created an entire website in HTML, the key idea you should remember is that HTML should not be used just to make pages look a certain way, but to reinforce their meaning or semantics. Whenever possible, use tags that make logical sense and that provide a richer, clearer idea of what the role of certain components or content are.

You could accomplish all same things as <header> , <nav> , <body> and <footer> with just <div>, but it would be a less meaningful and more confusing structure to understand.

Used correctly, semantic HTML webpages are understandable solely from their HTML structure, improving accessibility. They are also more share-able and more search-able across many different platforms, increasing their discover-ability and impact.

Tags Galore

We've reviewed some of the most essential tags here, but feel free to explore the many other capabilities of HTML. You might be wondering: What about videos on my page? How do I post code? Can I put a mixtape on my website?

We encourage you to explore the Mozilla Developer Network Web Documentation for HTML here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element.

When developing, always remember to keep semantic HTML in mind!