Does markup have any specific meaning that can be understood?
You already know about the html tag which identifies an html document. And the head and body tags that also define well understood areas. But how does the rest of an HTML document specify meaning? Or does it?
HTML 4.01 goes a long way to separate content from presentation. Prior to that, you would have to provide markup to specify how you wanted a document to look. The browser already knows how to present certain aspects such as headers and lists. But what if you want to display some text alongside your main text? Some text that relates to the main text and helps a reader understand maybe with an example or some historical story explaining extra information? With HTML 4, you can use cascading style sheets to present this additional information so it stands apart from the main text.
One of the benefits of using HTML 5 is that you have access to more tags that are designed to mean something. You can still use div and span. But now instead of creating a div element with an id attribute equal to navigation where you can put all the main navigation links on your page, you can just use a tag called nav directly. This adds extra meaning to your document and allows browsers to recognize the main navigation area.
Listen to the full episode or read the full transcript below for more information, and be sure to subscribe to the podcast with your podcast app on your phone or computer to get episodes delivered to you automatically each week.
Transcript
You already know about the html tag which identifies an html document. And the head and body tags that also define well understood areas. But how does the rest of an html document specify meaning? Or does it?
Html 4 goes a long way to separate content from presentation. Prior to that, you would have to provide markup to specify how you wanted a document to look. The browser already knows how to present certain aspects such as headers and lists. But what if you want to display some text alongside your main text? Some text that relates to the main text and helps a reader understand maybe with an example or some historical story explaining extra information? With html 4, you can use cascading style sheets to present this additional information so it stands apart from the main text.
You do this with a tag called div or maybe span. These are tags meant to enclose other content usually so you can provide special styling that controls how the content will look.
Div is a block-level tag while span is an inline-level tag. The difference between the two affects how content is positioned relative to other content. A block-level tag such as div will occupy its own line or multiple lines and use as much width as it can. While an inline-level tag such as span will use only as much width as it needs and is meant to fit in with other content without taking up its own line.
A lot of html 4 markup uses div and span tags to divide the content into areas that can be styled and positioned differently. The problem is that divs and spans have no meaning. They can be identified through the attributes id and class, as well as their type, either div or span, and where they fit in the overall structure of the html document. But the problem still remains that a div or a span itself adds little to the meaning of the html document.
This is one of the benefits of using html 5. You have access to more tags that are designed to mean something. You can still use div and span. But now instead of creating a div element with an id attribute equal to navigation where you can put all the main navigation links on your page, you can just use a tag called nav directly. This adds extra meaning to your document and allows browsers to recognize the main navigation area.
You might wonder why couldn’t browsers just interpret a div tag with an id attribute equal to navigation as the main navigation area? How does introducing a new tag called nav help? They seem equivalent, right? Well, maybe to us. We know how to read extra meaning into the div tag because of the id attribute. That’s because we know what the word navigation means. But what if the web page developer decided to use a div tag with an id attribute set to mainmenu instead? We would still understand. But you can probably see that the actual id value used has no real meaning because it can be anything. The web page developer could have chosen to identify the navigation area as a watermelon. As long as the cascading style sheets also know how to style a watermelon, then it’ll work just fine. It’s just an id value. But a tag is different. A tag called nav is defined in the standard to have an intended use. And that gives it meaning.
It still needs to be styled for presentation. But now, we can write code that reliably knows how to identify where in the html document to find all the main navigation links. This is called semantic meaning.
There’s a lot of new tags just like nav in html 5 that provide extra meaning. Some of them are:
• main is a tag that you can use to surround the main content of a page.
• summary and details are tags that you can use to provide a quick introduction followed by more details that the browser might decide to let the reader expand and collapse the details.
• article and section are tags that allow you to group content in interesting ways. You might want a section containing multiple articles and within each article maybe you want to divide it into sections such as an introduction, the article itself, and maybe related articles.
• header and footer are tags you can use to really be precise about what comes before something and what comes after.
• aside is a tag that allows you to identify content that relates to and enhances other content. In other words, it solves the problem that I described at the beginning of this episode.
• And a couple of my favorites are audio and video tags. It’s always been a struggle to get audio and video content to appear and function properly in a web page. These tags go a long way to letting the browser help because it’ll now know exactly when to expect audio or video.