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_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