Semantic HTML Tags | HTML5 Semantic Elements Tutorial

Pubblicato il: 04 gennaio 2022
sul canale di: 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

In questa pagina del sito puoi guardare il video online Semantic HTML Tags | HTML5 Semantic Elements Tutorial della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Dave Gray 04 gennaio 2022, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 53,289 volte e gli è piaciuto 1.5 mille spettatori. Buona visione!

15,872

128