Semantic Tags Semantic markup describes what the content

“Semantic” Tags • Semantic markup describes what the content contains as opposed to what it looks like! • Examples include: div, nav, article, header, footer – Contrast with deprecated tags and attributes such as font, color, u (underline), etc – Don’t confuse the header tag with the head section! • We will learn about a few semantic tags

<header> tag • This tag doesn’t do anything. It is there for organizational and, possibly, styling purposes. • In this section we typically place the title of the page (not necessarily the same as the title tag), logos, a search box, etc

Example: <header> <img src="cats. jpg" alt="cat picture"> <h 1>Cats 'R Us</h 1> <h 2>All your feline needs</h 2> </header>

<nav> tag • Typically used to enclose a series of links such as a table of contents to navigate around your site. • As with the <header> tag, this tag doesn’t do anything. It is there for organizational and styling purposes. • While you may have multiple <nav> tags on a page, you should typically reserve this tag for a ‘significant’ series of links such as those to navigate to the main locations of your site. • Contrast with, say, a series of legal disclaimers or copyright tags in small print at the bottom of your page. These probably should not merit their own <nav> section. • Ultimately, placing a series of links inside a <nav> section is a judgement call.

Example: <nav> <a href="home. htm">Home</a> <a href="about. htm">About Us</a> <a href="contact. htm">Contact Us</a> </nav>

<footer> tag • Another organizational tag. • Typically includes copyright information, citations, ‘last modified’ info, etc. • Think of it as the “small print” section of your page.

<div> tag • A way of grouping information together that doesn’t fit into any of the previously described semantic tags • eg: <div id=“rosa_parks_biography”>

<article> tag • Typically used to contain specific pieces of content that might stand alone separately • Can also be used to divide a single page of content that covers different topics. • Eg: Quoting someone else’s blog post

“Semantic” Tags Restated • Assigning meaning to markup. • The tags we’ve just discussed: header, nav, footer, article, etc, are examples of “semantic” tags. They describe the information contained inside. • We can assign styles (colors, fonts, etc) and positioning to these sections, but there is much more too. • For example, suppose you want to format a page for a small device such as an i. Phone. You might decide to dispense with the navigation and footer sections of your page. You could write some Javascript that notifies smallsized browsers not to display those sections.

HTML 5 Validator • There are tools available on the web that allow you to upload an HTML document and will give it a quick check to ensure that it complies with HTML 5. • Try it out using first_template. htm: http: //validator. w 3. org/ • Try it out again using the French Indian War file under week #2. Experiment – e. g. remove the ‘alt’ attribute from the image of Washington and note the error. • Note: As stated in the ‘warning’, this is not a perfect checker – there is NOT substitute for your own eyes and knowledge! – For example, it will NOT ensure that programming conventions are followed