198: HTML: Semantic Meaning.

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 equivalen