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:
🔗 Starter Source Code: https://github.com/gitdagray/html_course/tree/main/06_lesson
📬 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/detail/dark-new-tab/kcphhkbdlfggickaoeiahdcfhagfbajl?hl=en
Visual Studio Code (VS Code): https://code.visualstudio.com/
Prettier VS Code Extension: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
vscode-icons VS Code Extension: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
Github Themes VS Code Extension: https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme
W3C HTML Validator: https://validator.w3.org/
HTML5 Outliner: https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo
📚 References:
MDN HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
MDN HTML Elements Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
HTML Entities Character Chart: https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references
🚀 Semantic HTML References:
MDN Web Glossary for Semantics: https://developer.mozilla.org/en-US/docs/Glossary/Semantics
w3Schools Semantic HTML: https://www.w3schools.com/html/html5_semantic_elements.asp
MDN Document and website structure: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven
Was this tutorial about Semantic HTML elements helpful? If so, please share. Let me know your thoughts in the comments.
#html #html5 #semantics
