Semantic HTML Tags | HTML5 Semantic Elements Tutorial
HTML-код
- Опубликовано: 25 июл 2024
- Web Dev Roadmap for Beginners (Free!): 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 ➜ bit.ly/3nGHmNn
🚀 This lesson is part of an HTML for Beginners tutorial series playlist:
• HTML Tutorials for Beg...
🔗 Starter Source Code: github.com/gitdagray/html_cou...
📬 Course Updates ➜ 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: github.com/gitdagray/html_course
⚙ Web Dev Tools:
Chrome Browser: www.google.com/chrome/
Dark New Tab Chrome Extension: chrome.google.com/webstore/de...
Visual Studio Code (VS Code): code.visualstudio.com/
Prettier VS Code Extension: marketplace.visualstudio.com/...
vscode-icons VS Code Extension: marketplace.visualstudio.com/...
Github Themes VS Code Extension: marketplace.visualstudio.com/...
W3C HTML Validator: validator.w3.org/
HTML5 Outliner: chrome.google.com/webstore/de...
📚 References:
MDN HTML: developer.mozilla.org/en-US/d...
MDN HTML Elements Reference: developer.mozilla.org/en-US/d...
HTML Entities Character Chart: html.spec.whatwg.org/multipag...
🚀 Semantic HTML References:
MDN Web Glossary for Semantics: developer.mozilla.org/en-US/d...
w3Schools Semantic HTML: www.w3schools.com/html/html5_...
MDN Document and website structure: developer.mozilla.org/en-US/d...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: 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
Semantic HTML is crucial for the foundation of your websites and web apps. Providing semantics in your HTML - that is, conveying meaning with your structure - helps the browser understand the organizational structure of your content. This also greatly helps with assistive technology such as screen readers - not everyone browsers the web with a mouse. Develop your website with accessibility in mind and a proper structure by applying semantic HTML. Just getting started with HTML? Go to the start of the HTML for Beginners playlist here: ruclips.net/p/PL0Zuz27SZ-6OlAwitnFUubtE93DO-l0vu
Near the end of the video, you mention checking the Outline. You can check the box for Outline when you use the Validator, and it can display the outline along with the results. Also in the Validator, you can have it show the entire HTML, which can be handy when troubleshooting errors.
This is a best video about "Semantic Elements" that I've ever seen. Thank you so much , sir.
You are most welcome! 💯
This is an awfully underrated subject that almost no one talks about.
Agreed! 💯
Definitly one of the best teachers out there ,
Thanks a lot dave your channel is a gem !!
You're welcome!
Great start for semantics!
I was looking for an HTML course that actually teaches the technical part and explains the reasoning of why we do certain things. Or why we use a certain TAG on an Element. I think absorbing this knowledge since the beginning of your learning journey is without doubt a key part at making decisions in any field in a later day.
Furthermore, I found very important the topic discussed at minute 19:12 as I just came back from another tutorial, wasted almost 2 hours and the instructor was using and giving the class name "container" to wrap the whole content on it.
I'll definitely will subscribe and start from scratch. I want to switch career at this moment and Front End development it's something I would enjoy doing.
With regards,
Thank you! 🙏
I had no choice but to subscribe
This well explained thanks.
Good course, thank you!
Thank you very much for teaching me the basics of html. Planning to watch all of your videos related to web development. Great job!!!
Thanks for this cool tutorial, Dave: descriptive and well-detailed explanation.
You're very welcome!
That first looked good.
Thanks Dave, you rock man!
Thank you! 🤘🎸
You did a great job! Thank you very much!
Glad you liked it! And you're welcome!
Thank you for your work!
You're welcome! 🙏
very clear explanation sir!!!!!!!
Thank you!
Subscribed and liked, in response to your effort and time for us. Thanks alot.
You're welcome! 🙏🙏
Great tutorial. Thank you :)
You're welcome!
Awasome tutorial again👍
Thank you! Cheers! 💯
Thanks
Thank you very much for this effort
You're welcome!
Awesome! thx
You bet!
Regarding the elements, would it make sense to keep the elements on the page between different topic areas but have them invisible. You mentioned that you would use CSS instead to create borders between elements, but is it worth still keeping the elements for the semantic meaning they provide?
Good question! There could be varying opinions on this, but here's my take: If you have separate article or section elements and each article has its own subheading (h2 or h3, etc), the semantic article / section element and heading are enough to indicate it contains a new topic. However, for example, if you are inside the same section element, you may want those hr (themematic breaks) elements between new topics even if a heading is used. There is no "absolute" correct way here but I lean towards providing more guidance instead of less.
For some reason I can't get the outliner to work in Chrome. When I click on it it just tells me that it can't read data from this site (meaning my page). I don't normally use Chrome anyway so I found an outliner addin for FireFox called HeadingsMap that works the same way.
I love your video. They have helped me out a lot. I'm still new, and I'm trying to become a full-stack engineer. I have been looking around, and I keep seeing that you only should use one id and I have 4 of them in my article, so it seems like this and I have four pieces is this okay, or should I change to a class and how every time I try my nav bar don't work.
Each id should be unique on a page. If you want to use the same identifier for more than one, a class is the way to go.
Okay, thank you. I'm trying to build my portfolio, and I'm stuck
I still see people using the element a lot, and it does bother me! I inspected the source code of a certification provider that offer web development certifications and was surprised to see them use liberal amounts of elements and IDs more than classes to style their sections. From what I have read, the only place to use a element is for things like wrappers and containers. At first I was using sections for these because I felt like I needed to ditch using divs altogether, but they still do have their uses; just like spans actually!
Good research! Yes, a div is usually the last thing I reach for, but when no other semantic meaning applies, div it is. 😀
can you please let us know about your VSC color theme? btw thank you for the great video
You're welcome! GitHub theme 🚀
@@DaveGrayTeachesCode thank you very much Dave, looking forward for your more Angular videos
Is it the Live Server extension (with the purple radio waves logo) or the Live Server Preview (with the orange HTML doc logo)?
I use the one from Ritwick Dey that has the purple radio waves (but they look pink to me :)
Can you please clarify which validator you're talking about ? Is it some plugin with VS Code which does semantic HTML validation ?
Hi JS, can you provide a timestamp to the spot you are talking about in the video? Thanks!
I know I'm 7 months late to respond, but are you referring to the W3C HTML Validator? If so It's linked in the video description.
Using semantic elements is a must-have skill for all type of developers,
Semantic elements describe your content logically while none sematic ones describe it politically (no offense) 😁
What about the address element? it looks semantic but must be used with care as it refers to contact information instead of an address (as mentioned on MDN)
Thanks Dave, that was a good video to start 2022 which I hope it'll be as semantic as HTML5
Absolutely, Ahmad. I try to emphasize semantic elements and keep accessibility in mind as I create any project. As you said, it's a must-have skill. The address element allows for all types of contact information. It can be contain an email and/or phone number or it can contain a physical address or other contact information. A good element to keep in mind for those "Contact Us" pages! 💯
How this auto formatting your code after you save the code ??
What setting for that?
It is a VS Code setting - details here: stackoverflow.com/questions/39494277/how-do-you-format-code-on-save-in-vs-code
@@DaveGrayTeachesCode Thank you Sir ..
Your content is really helpful for everyone 👍
Best teacher as best mentor also 🔥🔥
Hi Gray. Thanks. You shocked me! Am a user of divs for most of my markup! That a page can have no divs! Shocking. Speaks work for me to begin refactoring.
Still, I have a terrible Javascript challenge.
You've been my Javascript Tutor too.
Would you help me sort it?
Thank you! Yes, avoid divs when you can use semantics. I'll keep making videos to help 💯
it seems that a lot of these semantic html elements provide default formatting. This sounds like a nightmare from the CSS perspective later on. How would we strip them of the default formatting if we know we don't want it?
Look into a CSS reset. I do cover that in my CSS course.
@@DaveGrayTeachesCode14:53 I thought the reset only handled stuff like padding, margin, and box-sizing. At the timestamp you finish the element and on the page a little arrow appears to drop-down the menu. How would we style that arrow? Remove the arrow? Etc. And this question goes out to all the default formatting of various html elements as a whole.
I noticed that in all of your videos, things auto reformat for you, and they do not do that for me. I have to highlight entire regions and tab them in.
Several VS Code extensions exist for this, but VS Code also has some built-in settings to help you. This post may help you: www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code
@@DaveGrayTeachesCode Thanks! I'll definitely read this and some other stuff. I really appreciate your videos. I'm a little bit old fashioned in that I took out a notebook and a pencil and hand wrote the code to figure out where things should be tabbed in and then fixed it in my index file lol I have prettier installed. I followed every little instruction and step in your videos. but visual studio isn't auto reformatting anything for me. So I'm really paying attention to where everything should be lined up.
I prefer Semantic HTML viewer to HTML5 Outliner.
Thank you for the suggestion!