Тёмный

Semantic HTML Tags | HTML5 Semantic Elements Tutorial 

Dave Gray
Подписаться 305 тыс.
Просмотров 46 тыс.
50% 1
ВидеоПоделитьсяСкачатьДобавить в

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

Опубликовано:

 

17 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 68   
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
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: ru-vid.com/group/PL0Zuz27SZ-6OlAwitnFUubtE93DO-l0vu
@xpresscomedy9959
@xpresscomedy9959 9 месяцев назад
I had no choice but to subscribe This well explained thanks.
@javabeanz8549
@javabeanz8549 Год назад
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.
@cagdasbalkay9050
@cagdasbalkay9050 Год назад
This is a best video about "Semantic Elements" that I've ever seen. Thank you so much , sir.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
You are most welcome! 💯
@cocoscacao6102
@cocoscacao6102 Год назад
This is an awfully underrated subject that almost no one talks about.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Agreed! 💯
@syedRasheed-yu2di
@syedRasheed-yu2di 7 месяцев назад
very clear explanation sir!!!!!!!
@Billy-ku2vm
@Billy-ku2vm 2 месяца назад
Great start for semantics!
@aragorn2753
@aragorn2753 Год назад
Definitly one of the best teachers out there , Thanks a lot dave your channel is a gem !!
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
You're welcome!
@angelsv
@angelsv 2 года назад
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,
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
Thank you! 🙏
@fairytail6896
@fairytail6896 4 месяца назад
Thank you very much for teaching me the basics of html. Planning to watch all of your videos related to web development. Great job!!!
@JavierViramontesR
@JavierViramontesR 3 месяца назад
That first looked good.
@YannMetalhead
@YannMetalhead 6 дней назад
Good course, thank you!
@garikmelqonyan6011
@garikmelqonyan6011 Год назад
Thanks for this cool tutorial, Dave: descriptive and well-detailed explanation.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
You're very welcome!
@moonlightCR7
@moonlightCR7 Год назад
Thanks Dave, you rock man!
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Thank you! 🤘🎸
@CTILET
@CTILET 2 года назад
Thank you for your work!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
You're welcome! 🙏
@sammclaren6965
@sammclaren6965 Год назад
You did a great job! Thank you very much!
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Glad you liked it! And you're welcome!
@iambrijeshtoo
@iambrijeshtoo Год назад
Thank you!
@sayedalimousavi6091
@sayedalimousavi6091 2 года назад
Subscribed and liked, in response to your effort and time for us. Thanks alot.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
You're welcome! 🙏🙏
@amosn6524
@amosn6524 Год назад
Great tutorial. Thank you :)
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
You're welcome!
@TeomunMete
@TeomunMete 4 месяца назад
Thanks
@Valdaur
@Valdaur Год назад
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?
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
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.
@belginefe1838
@belginefe1838 2 года назад
Awasome tutorial again👍
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
Thank you! Cheers! 💯
@mahmodsamir5110
@mahmodsamir5110 Год назад
Thank you very much for this effort
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
You're welcome!
@lilcurtie
@lilcurtie Год назад
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.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
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.
@lilcurtie
@lilcurtie Год назад
Okay, thank you. I'm trying to build my portfolio, and I'm stuck
@stephenhammond1745
@stephenhammond1745 Год назад
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.
@GabrielAraujo-xy2qc
@GabrielAraujo-xy2qc Год назад
Awesome! thx
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
You bet!
@SamChaneyProductions
@SamChaneyProductions Год назад
Is it the Live Server extension (with the purple radio waves logo) or the Live Server Preview (with the orange HTML doc logo)?
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
I use the one from Ritwick Dey that has the purple radio waves (but they look pink to me :)
@80Vikram
@80Vikram Год назад
Can you please clarify which validator you're talking about ? Is it some plugin with VS Code which does semantic HTML validation ?
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Hi JS, can you provide a timestamp to the spot you are talking about in the video? Thanks!
@Valdaur
@Valdaur Год назад
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.
@Valdaur
@Valdaur Год назад
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!
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Good research! Yes, a div is usually the last thing I reach for, but when no other semantic meaning applies, div it is. 😀
@talat9553
@talat9553 2 года назад
can you please let us know about your VSC color theme? btw thank you for the great video
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
You're welcome! GitHub theme 🚀
@talat9553
@talat9553 2 года назад
@@DaveGrayTeachesCode thank you very much Dave, looking forward for your more Angular videos
@rohanshingmode5918
@rohanshingmode5918 Год назад
How this auto formatting your code after you save the code ?? What setting for that?
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
It is a VS Code setting - details here: stackoverflow.com/questions/39494277/how-do-you-format-code-on-save-in-vs-code
@rohanshingmode5918
@rohanshingmode5918 Год назад
@@DaveGrayTeachesCode Thank you Sir .. Your content is really helpful for everyone 👍 Best teacher as best mentor also 🔥🔥
@ahmad-murery
@ahmad-murery 2 года назад
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
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
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! 💯
@evanmico
@evanmico 5 месяцев назад
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?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 4 месяца назад
Look into a CSS reset. I do cover that in my CSS course.
@evanmico
@evanmico 4 месяца назад
​@@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.
@felicialeann547
@felicialeann547 Год назад
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.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
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
@felicialeann547
@felicialeann547 Год назад
@@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.
@NedumEze
@NedumEze 2 года назад
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?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
Thank you! Yes, avoid divs when you can use semantics. I'll keep making videos to help 💯
@fabrice9848
@fabrice9848 Год назад
I prefer Semantic HTML viewer to HTML5 Outliner.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Thank you for the suggestion!
Далее
How to Create Tables in HTML | HTML5 Table Tutorial
16:31
How to Create Tables in HTML | HTML5 Table Tutorial
Просмотров 20 тыс.
When to Use Semantic HTML Elements Instead of Divs
17:57
When to Use Semantic HTML Elements Instead of Divs
Просмотров 37 тыс.
Subway Surfers вернулась к классике
00:34
Subway Surfers вернулась к классике
Просмотров 353 тыс.
С ДНЕМ РОЖДЕНИЯ МЕНЯ 🥳 ИГРАЮ БЕЗ ПАЛЬЦЕВ SOLO VS SQUAD😱С ВЕБКОЙ В ПАБГ МОБАЙЛ 💛PUBG MOBILE
2:58:23
С ДНЕМ РОЖДЕНИЯ МЕНЯ 🥳 ИГРАЮ БЕЗ ПАЛЬЦЕВ SOLO VS SQUAD😱С ВЕБКОЙ В ПАБГ МОБАЙЛ 💛PUBG MOBILE
Просмотров 417 тыс.
Китай - Россия: Жизнь на границе / Зачем русские едут в Китай? / Благовещенск, Хэйхэ / @anton_lyadov
43:25
Китай - Россия: Жизнь на границе / Зачем русские едут в Китай? / Благовещенск, Хэйхэ / @anton_lyadov
Просмотров 609 тыс.
Как необычно использовать референсы в РИСОВАНИИ людей? #арт #рисование #художник #творчество
01:00
Как необычно использовать референсы в РИСОВАНИИ людей? #арт #рисование #художник #творчество
Просмотров 134 тыс.
Why & When to Use Semantic HTML Elements over Divs
12:01
Why & When to Use Semantic HTML Elements over Divs
Просмотров 76 тыс.
CSS Functions Tutorial for Beginners | min, max, clamp, minmax, calc, attr
30:20
CSS Functions Tutorial for Beginners | min, max, clamp, minmax, calc, attr
Просмотров 11 тыс.
Semantic HTML - How to Write Clean Code (Beginner)
19:48
Semantic HTML - How to Write Clean Code (Beginner)
Просмотров 22 тыс.
CSS Columns Tutorial for Beginners | Multicolumns without Grid or Flexbox
22:26
CSS Columns Tutorial for Beginners | Multicolumns without Grid or Flexbox
Просмотров 15 тыс.
CSS Position Property Tutorial for Beginners | Absolute, Relative, Fixed, Sticky
24:07
CSS Position Property Tutorial for Beginners | Absolute, Relative, Fixed, Sticky
Просмотров 24 тыс.
The only tags you need when first learning HTML
17:07
The only tags you need when first learning HTML
Просмотров 41 тыс.
the new PS4 jailbreak is sort of hilarious
12:21
the new PS4 jailbreak is sort of hilarious
Просмотров 36 тыс.
Getting started with web accessibility with Ashlee Boyer
30:29
Getting started with web accessibility with Ashlee Boyer
Просмотров 52 тыс.
Subway Surfers вернулась к классике
00:34
Subway Surfers вернулась к классике
Просмотров 353 тыс.