What is Semantic HTML?

what is semantic HTML let's start with the HTML HTML is content with a label that indicates what that content is semantic hTML is when the content and its label match here's some content now let's label it the phone is a phone the plant is a plant pencil is a pencil you get the idea the content and their labels match so this is semantic okay and here's this content where the labels are not correct and notebook is not a car a pencil is not a rock and glasses are not these the content and their labels don't match so this is not semantic ooh but if the labels don't match it won't it look wrong in the browser nope the browser doesn't know if the content and its label matches but won't validate or catch that nope validator doesn't know if your content matches its label only if you use the tags in the correct order okay so why don't we apply this to some code here's some content justice league a team of superheroes appearing in DC Comics in addition to comic books there are TV shows and movies members Batman Wonder Woman Superman first let's label the elements Justice League is a heading because it briefly labels the content below a team of superheroes appearing in DC Comics in addition to comic books there are TV shows and movies this content is made of sentences and that makes it a paragraph numbers is a subheading because it briefly labels the content below and supports the heading Batman Wonder Woman and Superman are items within a list so they will each get labeled with list item now that each piece of content has been labeled let's label the groups the hang of Justice League and the paragraph that describes it belong together symbol group it the group contains introductory information to the page so we'll label it as header the subheading of members and the list of members belong together so we'll group it the group is a section of content that appears on the website so we'll label it with section the list items work together as a list because this list is not in any particular order it will be labeled with unordered lists now that we've identified and labeled our individual pieces of content as well as the groups that they belong to we can change those labels into HTML markup and that's semantic HTML taking the content and giving a label that matches that content [Music]

Channel: Christina Carrasquilla

Views: 1,297

Keywords: HTML, Semantics, ASU, GIT, Markup, Code

Id: t9XRu73fRIo

Length: 3min 21sec (201 seconds)

Published: Mon Jul 06 2020