Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:40 minutes
Semantic 1
  • Overview
  • Transcript

3.1 Final Thoughts

I hope you have learned a lot more about what semantic HTML is. This short course should have given you a solid idea of how to appropriately (and semantically) use HTML5 elements in your markup.

Related Links

3.1 Final Thoughts

Well, that wraps it up for our semantic HTML course on how to structure web pages. In this course, we've learned how to take a website and make it more semantic. And by doing so, we've made it much more powerful, because now, we can allow screen readers and other automated technologies to parse through our documents in order to see the structure of our document, to see our intended structure. So, we can see two different versions of our website here. The one on the left looks just like the one on the right except for a little bit more text that we may have added. But if we look at the outlines for these two, the outlines are significantly different. And the outline on the right looks much closer to how our content really should be outlined to start with. And the reason for that is we used semantic elements in our page on the right. Whereas in our page on the left, we simply use a bunch of divs. And again, divs have no semantic meaning, no semantic impact, whatsoever on your document. As I mentioned before, it's okay to use divs but only when you need to throw some tags around a particular piece of content in order to target it with your CSS or maybe even to target with jQuery, or JavaScript, or something like that. But other than for those uses, you really need to try to use as much semantic markup as you can. Now, having said all of this, I should probably point out that there isn't a lot of software out there yet that makes full use of the HTML5 outlining algorithm. In other words, not all screen readers and search bots are going to come up with this fancy new outline just because we've used these semantic elements. So, until those technologies fully catch up with the HTML5 outline specification, it's a good idea to keep a close eye on the level of heading tags that you use, H1 through H6, and to structure H1 through H6 tags in such a way that you will come up with the same outline that we see here. So I hope that you've learned a lot in this course, and I hope that this really makes you think though the way that you structure your documents. And I hope that you will stop using all of these divs for every single element on your page, and that you will start using more semantic markup, especially when it comes to laying out your page. So, thank you for watching. Again, my name is Craig Campbell, and I'll see you next time.

Back to the top