HTML Semantic Tags

Editor's Notes

• #2: I’m Bruce Kyle, principal instructor at NextechU.For the next 20 minutes or so I’ll the your principal instructor that continues with the features of HTML5.
• #3: I understand everyone here has completed and passed an online exam that shows you have knowledge of HTML.Show of hands… anyone here built web pages or apps using HTML5?Well the cool part is that HTML5 build on HTML4… so we’ll be building on your skills today.Today we’ll be add to your web and app development skills. You will be able to use semantic tags, know where and when to use 9 new tags, and use them even on browsers that do not support them.
• #5: HTML5 is a series of specifications that began in 2004. The teams studied websites implementations and Web content. And they came up with a new series of specs that are being implemented in browsers for PCs and devices.The specification:Defines a single language called HTML. You can write it using either the HTML syntax (where it is not required to close all tags) and in XML syntax (where you must close your tags).Defines detailed processing models make it easier to interoperate.Improves markup for documents (which we will talk about here).Introduces markup and APIs for that can be used in PCs, tablets, and phones.
• #6: Today we are talking about one of those specifications – the one about semantic tagsIn particular in this class you will learn about specific elements that you can start using today in your apps for web and phones.The main idea of semantic tags is that they help you describe the intent of your markup.
• #7: In today’s class we covered:What semantic tags are all about and when to use themYou will have identified them in a Web pageYou will be able to know which browsers and devices support semantic tagsAnd you will have a couple strategies to providing backward compatibility
• #8: Here are some screen shots of my web page. And you’ll see all the parts that make up my page. Up top is the header and navigation bar. There are articles that provide information about the classes. And there’s a section a footer.With HTML4 there really isn’t a way to describe what the parts of the page are. You can imagine what this page looks like in HTML4, where markup describes each of the pieces, but none of the context.Wouldn’t it be helpful to know what the intent is and where the parts of the page is?DevelopersScreen readersSearch enginesAnd you yourself might want to find these parts of the page easily?Let’s look at some code
• #9: Here’s a bunch of markup that you might have in your app.Where’s the article?
• #11: When they decided on what tags to include in the specification, they looked at millions of web pages.What they found was that most web pages had common elements.Most had navigation bar, a header, a footer.
• #13: The two groups working on HTML5 came up with these semantic tags. These tags can be used to define the parts of your page. There are 28 or so listed here.We’ll be looking at 8 that you can start using today.
• #14: We’ll be looking at a few of these today – those that are in bold ones in teal.There are 8 tags that we’ll talk about in this class.These are well supported in modern browsers. And they can have the biggest impact in your coding style today.The following elements have been introduced for better structure:section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.article represents an independent piece of content of a document, such as a blog entry or newspaper article.aside represents a piece of content that is only slightly related to the rest of the page.header represents a group of introductory or navigational aids.footer represents a footer for a section and can contain information about the author, copyright information, etc.nav represents a section of the document intended for navigation.figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.<figure> <video src="example.webm" controls></video> <figcaption>Example</figcaption> </figure>figcaption can be used as caption (it is optional).
• #15: The following elements have been introduced for better structure:section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.article represents an independent piece of content of a document, such as a blog entry or newspaper article.aside represents a piece of content that is only slightly related to the rest of the page.header represents a group of introductory or navigational aids.footer represents a footer for a section and can contain information about the author, copyright information, etc.nav represents a section of the document intended for navigation.figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.<figure> <video src="example.webm" controls></video> <figcaption>Example</figcaption> </figure>figcaption can be used as caption (it is optional).
• #16: Class participation demoTake this code and ask the class where to insert the following tags:HeaderSectionArticleAsideFigureFigCaption<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Your Website</title></head> <body> <div id="header"> <div class="nav"> <ul> <li>Your menu</li> </ul> </div> </div> <div class="content"> <h2>Article title</h2> <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p><p>Pellentesque habitant morbitristiquesenectus et netus et malesuada fames ac turpisegestas.</p><div class="aside“> <h2>About section</h2> <p>Doneceulibero sit amet quam egestas semper. Aeneanultricies mi vitae est. Maurisplacerateleifendleo.</p></div> <p>Copyright 2009 Your name</p></body></html><!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Your Website</title></head> <body> <header> <div class="nav"> <ul> <li>Your menu</li> </ul> </div> </header><section><article><h2>Article title</h2> <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p><p>Pellentesque habitant morbitristiquesenectus et netus et malesuada fames ac turpisegestas.</p></article> </section><aside> <h2>About section</h2> <p>Doneceulibero sit amet quam egestas semper. Aeneanultricies mi vitae est. Maurisplacerateleifendleo.</p></aside><footer> <p>Copyright 2014 Your name</p> </footer></body></html>
• #17: HTML is defined in a way that is backward compatible with the way user agents handle content. To keep the language relatively simple for Web developers, several older elements and attributes are not included, as outlined in the other sections of this document, such as presentational elements that are better handled using CSSsection represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.article represents an independent piece of content of a document, such as a blog entry or newspaper article.main can be used as a container for the dominant contents of another element, such as the main content of the page. In W3C HTML5 and W3C HTML 5.1, only one such element is allowed in a document.aside represents a piece of content that is only slightly related to the rest of the page.In WHATWG HTML, hgroup represents the header of a section.header represents a group of introductory or navigational aids.footer represents a footer for a section and can contain information about the author, copyright information, etc.nav represents a section of the document intended for navigation.figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.<figure> <video src="example.webm" controls></video> <figcaption>Example</figcaption> </figure>figcaption can be used as caption (it is optional).
• #18: Split into two teams based on their experience.Team 1, reluctant to type:Inspect google.com and w3c to determine if they support HTML5 semantic tags.(Use F12 Key to bring up dev tools. Search)Test http://www.nextechu.com critique the use of semantic tagsAlso try http://www.google.com and http://Microsoft.comhttp://lostworldsfairs.com/http://www.keyzo.co.uk/http://tatuarte.org/Team 2. Take the following code and use semantic tags.Puts boxes and colors the various sections.
• #19: The <article> element is a specialized kind of <section>; it has a more specific semantic meaning than <section> in that it is an independent, self-contained block of related content. We could use <section>, but using <article> gives more semantic meaning to the content.By contrast <section> is only a block of related content, and <div> is only a block of content. A sectionrepresents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.An articleFrom W3c:represents an independent piece of content of a document, such as a blog entry or newspaper articleThe easiest way to conceptualise <article> is to think of its use in a weblog, as mentioned in the spec’s examples “a blog entry” and “user-submitted comments.”An independent piece of content, one suitable for putting in an <article> element, is content that makes sense on its own. An asiderepresents a piece of content that is only slightly related to the rest of the page.
• #20: A sectionAn articleThe easiest way to conceptualise <article> is to think of its use in a weblog, as mentioned in the spec’s examples “a blog entry” and “user-submitted comments.”An independent piece of content, one suitable for putting in an <article> element, is content that makes sense on its own.
• #21: What are some of the reasons you’ve learned to use semantic tags?
• #22: Traditionally, there are five main arguments in favor of semantic HTML.Lighter codeSemantic HTML styled by CSS typically requires less code than HTML formatted by tables. However, it's worth noting that you can write table-less HTML that isn't semantic. You'll still probably reduce the size of your code, but you won't make the code any easier to understand.AccessibilityAccessibility enables people with disabilities to consume your site. Semantic code tends to be more accessible. When you properly label your pages with semantic tags, you make it easier for screen readers and other assistive technologies. Semantic tags are not a silver bullet -- it just makes building accessible sites a little easier.Search engine optimizationSemantic HTML tends to improve search engine optimization (SEO) by making your site easier for software to parse your site content. Search engines scan the HTML text contained in your HTML files. They don't render CSS; they don't run JavaScript. If your important content isn't in the HTML, search engines may never see it, and won't rank you accordingly. Semantic tags tend to make it is easier for a search engines to get at what your site is really about. This technique is considered "white hat" SEO. It's perfectly acceptable, and no search engine is going to penalize you because you semantically optimized your page. It should be noted that there is no guarantee that semantic HTML is better for SEO. Web developers think search engines favor semantic HTML, and Google's input into HTML5 suggests that they do. However, search engines closely guard their algorithms, and have to allow for the fact that extremely relevant content may be placed in nonsemantic HTML.RepurposingSemantic HTML takes advantage of the fact that a news item will always be a news item, and an archive will always be an archive, no matter where they are positioned on the page. However, a rightbar won't always be on the right side. Additionally if you are syndicating your content via an RSS feed and including HTML in it, the less markup the better. However, most sites and blogs don't syndicate their content straight from prepared HTML. They're usually built separately, and the syndication format is handled to make sure that other consumers understand the content.Developer comprehensionI contend that there is a really good reason to write semantic HTML today. Coding is communication, both to a computer (which is the easy part) and to other developers. Semantic HTML is easier for humans to understand than nonsemantic HTML. With semantic tags you can increase the ease with which consumers of web content can understand what all the pieces of your web content mean.
• #24: Caniuse.comWith HTML5 winding its way through the process at the W3CCheckCompatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.But what if you need to support a browser that isn’t on the list?
• #25: You can use a bit of JavaScript known as ModernizrThis bit of JavaScript and it’s companion html5shiv.js takes the elements that the browser does not know about and converts them to ones the browser does know about.It’s magic.(if there’s time.. Let’s look at an example)
• #26: Split into two teams based on their experience.Team 1, reluctant to type:Inspect google.com and w3c to determine if they support HTML5 semantic tags.(Use F12 Key to bring up dev tools. Search)Test http://www.nextechu.com critique the use of semantic tagsAlso try http://www.google.com and http://Microsoft.comTeam 2. Take the following code and use semantic tags.Puts boxes and colors the various sections.<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Exercise</title> <style>nav { text-decoration: underline; }navul li { display: inline; } header { font-size: x-large; font: bolder verdana; color: orangered; } section { font-style: normal; font-size: medium; color: blue; } article { color: purple; } footer { font-style: italic; color: green; } </style></head><body> <div id="nav"> <ul> <li><a href="#">This page</a></li> <li><a href="#">Also this page</a></li> </ul> </div> <div id="content"> <div class="header"> <h1>Anchoring isn't for beginners</h1> <p><time pubdatedatetime="2009-10-09T14:28-08:00"></time></p> </div> <p>If you've ever chartered a 45ft catamaran, you know that mooring balls are your friends. They protect the coral and sea bottom from the constant abuse of frequently anchoring boats.</p> <p>...</p> <h1>Comments</h1> <div> <div class="footer"> <p>Posted by: Peg Leg Patooty</p> <p><time pubdatedatetime="2009-10-10T19:10-08:00"></time></p> </div> <p>Right! Mooring balls are for wusses! Pirates only use anchors! Arrrrr!</p> </div> <div> <div class="footer"> <p>Posted by: Ariel</p> <p><time pubdatedatetime="2009-10-10T19:15-08:00"></time></p> </div> <p>Thank you for thinking of what's under the sea. Even Ursula would be thrilled.</p> </div> </div> <div class="footer"> <a href="http://www.adobe.com/devnet/dreamweaver/articles/understanding-html5-semantics.html">Creative Common Attribution</a> </div></body></html>
• #31: In today’s class we covered:What semantic tags are all about and when to use themYou will have added them to a Web pageYou will be able to know which browsers and devices support semantic tagsAnd you will have a couple strategies to providing backward compatibility
• #33: Split into two teams based on their experience.Team 1, reluctant to type:Inspect google.com and w3c to determine if they support HTML5 semantic tags.(Use F12 Key to bring up dev tools. Search)Test http://www.nextechu.com critique the use of semantic tagsAlso try http://www.google.com and http://Microsoft.comTeam 2. Take the following code and use semantic tags.Puts boxes and colors the various sections.<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Exercise</title> <style>nav { text-decoration: underline; }navul li { display: inline; } header { font-size: x-large; font: bolder verdana; color: orangered; } section { font-style: normal; font-size: medium; color: blue; } article { color: purple; } footer { font-style: italic; color: green; } </style></head><body> <div id="nav"> <ul> <li><a href="#">This page</a></li> <li><a href="#">Also this page</a></li> </ul> </div> <div id="content"> <div class="header"> <h1>Anchoring isn't for beginners</h1> <p><time pubdatedatetime="2009-10-09T14:28-08:00"></time></p> </div> <p>If you've ever chartered a 45ft catamaran, you know that mooring balls are your friends. They protect the coral and sea bottom from the constant abuse of frequently anchoring boats.</p> <p>...</p> <h1>Comments</h1> <div> <div class="footer"> <p>Posted by: Peg Leg Patooty</p> <p><time pubdatedatetime="2009-10-10T19:10-08:00"></time></p> </div> <p>Right! Mooring balls are for wusses! Pirates only use anchors! Arrrrr!</p> </div> <div> <div class="footer"> <p>Posted by: Ariel</p> <p><time pubdatedatetime="2009-10-10T19:15-08:00"></time></p> </div> <p>Thank you for thinking of what's under the sea. Even Ursula would be thrilled.</p> </div> </div> <div class="footer"> <a href="http://www.adobe.com/devnet/dreamweaver/articles/understanding-html5-semantics.html">Creative Common Attribution</a> </div></body></html>
• #34: In out next class, you will learn more about CSS3.
• #36: Split into two teams based on their experience.Team 1, reluctant to type:Inspect google.com and w3c to determine if they support HTML5 semantic tags.(Use F12 Key to bring up dev tools. Search)Test http://www.nextechu.com critique the use of semantic tagsAlso try http://www.google.com and http://Microsoft.comhttp://lostworldsfairs.com/http://www.keyzo.co.uk/http://tatuarte.org/Team 2. Take the following code and use semantic tags.Puts boxes and colors the various sections.