Semantic HTML Tags | HTML5 Semantic Elements Tutorial

Published: 04 January 2022
on channel: Dave Gray

53,289

1.5k

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Learn how to use Semantic HTML tags in this full tutorial. HTML5 semantic elements convey both meaning and structure for our web pages. Applying proper semantics to your web pages helps both browsers and assistive technologies interpret your pages.

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

🚀 This lesson is part of an HTML for Beginners tutorial series playlist:
   • HTML Tutorials for Beginners

🔗 Starter Source Code: https://github.com/gitdagray/html_cou...

📬 Course Updates ➜ https://courses.davegray.codes/

Semantic HTML Tags | HTML5 Semantic Elements Tutorial

(00:00) Intro
(00:05) Welcome
(00:25) Setup
(01:06) Heading Hierarchy
(02:06) nav and hr tags
(03:20) The word: "semantic"
(04:00) header element
(05:33) main element
(06:21) footer element
(07:30) Labeling multiple nav elements
(10:01) article vs section elements
(11:49) Adding sections
(13:20) aside, details, and summary elements
(15:50) mark and time elements
(17:57) More sections
(19:04) Avoid these HTML tags (for now)
(21:04) HTML5 Outliner
(23:35) Validate your HTML code

🔗 All Resources for this HTML Tutorial Series: https://github.com/gitdagray/html_course

⚙ Web Dev Tools:
Chrome Browser: https://www.google.com/chrome/
Dark New Tab Chrome Extension: https://chrome.google.com/webstore/de...
Visual Studio Code (VS Code): https://code.visualstudio.com/
Prettier VS Code Extension: https://marketplace.visualstudio.com/...
vscode-icons VS Code Extension: https://marketplace.visualstudio.com/...
Github Themes VS Code Extension: https://marketplace.visualstudio.com/...
W3C HTML Validator: https://validator.w3.org/
HTML5 Outliner: https://chrome.google.com/webstore/de...

📚 References:
MDN HTML: https://developer.mozilla.org/en-US/d...
MDN HTML Elements Reference: https://developer.mozilla.org/en-US/d...
HTML Entities Character Chart: https://html.spec.whatwg.org/multipag...

🚀 Semantic HTML References:
MDN Web Glossary for Semantics: https://developer.mozilla.org/en-US/d...
w3Schools Semantic HTML: https://www.w3schools.com/html/html5_...
MDN Document and website structure: https://developer.mozilla.org/en-US/d...

✅ Follow Me:
Github: https://github.com/gitdagray
Twitter:   / yesdavidgray
LinkedIn:   / davidagray
Blog: https://yesdavidgray.com
Reddit:   / daveoneleven

Was this tutorial about Semantic HTML elements helpful? If so, please share. Let me know your thoughts in the comments.

#html #html5 #semantics

On this page of the site you can watch the video online Semantic HTML Tags | HTML5 Semantic Elements Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Dave Gray 04 January 2022, share the link with friends and acquaintances, this video has already been watched 53,289 times on youtube and it was liked by 1.5 thousand viewers. Enjoy your viewing!

3,223

127