“Semantic” Tags

closebunkieΤεχνίτη Νοημοσύνη και Ρομποτική

15 Νοε 2013 (πριν από 3 χρόνια και 6 μήνες)

64 εμφανίσεις

“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>

<header>


<img src="cats.jpg" alt="cat picture">


<h1>Cats 'R Us</h1>


<h2>All your feline needs</h2>

</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>

<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 iPhone. You might decide to
dispense with the navigation and footer sections of your
page. You could write some Javascript that notifies small
-
sized 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.w3.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