seo semantic

COADING
Your journey to CSS Ninja

Things we will cover in this book:

What is Semantic Markup (or Semantic coding)? Why use Semantic HTML & what are benefits? List of tags & their usage Summery & better understanding

Page 1

What is Semantic Markup?

Well, it is the practice of writing your HTML code in more descriptive, meaningful, structured and most important, sensible way. Its all about using the tags for exactly the purpose they have been built for. It means use Heading Tags (H1, H2, H3) for heading (page title and sub titles) in the page instead of increasing the font size and bolding the text with the old <font size4> tag or any non-semantic tableless technique <div id=page-title>. For paragraphs use <p> tag rather styling the font and adding tons of line breaks, for lists use <li> tag, <em> for emphasizing the text, <strong> for bold rather styling it using <span classbold-text>, <img> for inserting any image and so on

In a clearer manner, semantic markup is the way for writing the correct HTML tags rather writing crappy HTML. Let see this in an example below:

Crappy HTML: <font size=3 color=#000000><i>Hi, This is page title</i></font><br><br> Tableless: <div class=page-title>Hi, This is page title</div> Semantic Markup: <h1>Hi, This is page title</h1>

Page 2

Why use semantic HTML & what are benefits?

Well, if you want to make use of internet standard and dont want your website to left behind in the highly competitive market where changes, upgrade and progress are rapid in world wide web standards and search engine giants (who changes their algorithms many times in a year to make internet world more better for use) then you must use semantic markup in your website. Download Speed: Another great benefit is that it will make your web page load faster. Using lightweight semantic code (tag) rather than tons of tables and <div> structure can really speed up download and page rendering times. All Browser and Software understand: the semantically written code is easily understandable by any browser and software, for an example (see code box on page no. 2) number 3 (i.e. Semantic Markup one) is a heading and any browser and software understand that but number 1 and 2 are simply formatted text and nothing else. So they dont have any sense for search engines bots. Cross Browser Compatible: It also make the very hard task of making cross browser compatible website a lot easier. As you write less code so you need to work less for making your website cross platform compatible. I am sure it makes sense. Beauty of Coding: If you are doing semantic coding you are making the effort to make both code and website look beautiful. Because whats the point your website looking pretty if no one can find this? Great for SEO: As we all know semantic code is great for seo. GoogleBots and such love semantic coding. They look at your code and finds what are important on your web page. If you are using less clutter, and better formatted semantic markup then GoogleBots can easily find and understand what is important on your webpage. Suppose there is a heading tag <h1>Night Clubs in Delhi</h1>, GoogleBots is going to note this as important and the site is absolutely for Night Clubs in Delhi. But same way if GoogleBots sees <font size=4 color=pink><b>Night Blubs in Delhi</b></font> or <div id=pagetitle>Night Clubs in Delhi</div>, he treats them as general text and not heading and <font> and <div> tags are generic elements and dont represent any inherent meaning. Accessibility: Semantic markup also helps to make your web page screen reader friendly and by achieving you can also recognize your webpage by Section 508 and WCAG standards. Screen readers (blind people will use to surf the internet) work in similar way the search engine bots as they dont care how pretty your web page is, they want to understand the content on your page and read the text out loud for end users. So to be sure of this use you must need to make sure your website will be read in the right

Page 3

order. If you have too many senseless codes messed up the screen reader is going to get confused and will misinterpret your web page. Here few note to make your code screen readers compatible. 1. <strong> or <em> tags are used to emphasize on something, so screen reader will understand it and it will shout. So do think carefully before using these tags, if in any doubt simple suggestion is to set up a css style that bold the text and use <span class=strong-text>hello text</span>. <div> and <span> are generic tags so they will not have any impact on screen readers. 2. Similarly, we all should know that in internet speak, writing anything in CAPS (capital letter) is considered shouting or putting force on sentence, if you re using capital letters somewhere for visual effect, use text-transform style in your CSS so your content isnt shouted at the user.

Page 4

List of tags & their usage

Now, lets have a look on almost all the tags and their usage with help of code example of each. I hope you will enjoy looking through and will definitely get the right definition and usage of each tag from below:

Tag

What it is

When to use it

<a>

Anchor (most commonly a link)

Vital. Use to create links in content. Use the title attribute whenever the contents of the <a></a> pair do not accurately describe what youll get from selecting the link. Title attribute often displays as a tooltip in visual browsers, which may be a helpful usability aid.

Code snippet: <a href=http://domainname.com title=domain name tooltip text>Visit this website</a> Browser Support: <a> tag is supported in all major browsers. Important Attributes:
href, hreflang, name, rel, target, accesskey, class, id, style, tabindex, title, xml:lang

<abbr>

Defines an abbreviation

Works in a similar way to <dfn> and<acronym>, using a title attribute (displays a tooltip in standard visual browsers).

Code snippet:
I had my schooling from <abbr title=Saint>St.</abbr> Xavier School.

Page 5

Browser Support: <abbr> tag is supported in all major browser except IE 6 or earlier versions. Important Attributes:
class, id, lang, style, title, xml:lang

<ACRONYM>

Defines an acronym

Works in a similar way to <abbr>and <dfn>, using a title attribute (displays a tooltip in standard visual browsers).

Code snippet:
Our corporate office is based in <acronym title=New Okhla Industrial Development Authotity>Noida</acronym>.

Browser Support: <acronym> tag is supported in all major browsers except IE 5.5 or earlier versions. Important Attributes:
class, id, lang, style, title, xml:lang

Did you got confused with <acronym> & <abbr>?

An acronym can be pronounced like a word such as RADAR, AIDS, NASA, LASER, or UNESCO. An abbreviation is generally a shortened form of several words, regardless or pronouncing, such as FBI, USA, UK, HIV, or WHO.
Generally, all acronyms are abbreviations, but not all abbreviations are acronyms.

<ADDRESS>

Used for marking up a physical (e.g.

Not commonly used. Recommend looking into microformats, which allow for more detail and interoperability.

Page 6

mailing) address

Code snippet: <address> <strong>Our office address</strong>

G-10, Sector-63, Noida, Uttar Pradesh, 201301, India <a href=mailto: sales@csschopper.com> sales@csschopper.com</a> <span class=bold-text> Call us: +91-120-473-5100</span>

</address> Browser Support: <address> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<APPLET>

Inserts a Java applet

The old way to insert a Java app. Use<object> instead today.

Code snippet: <applet code=bubbles.class width=350 height=350>

Java applet that draws animated bubbles.

</applet> Browser Support: <applet> tag is deprecated in HTML 4.01. Not all major browser support this tag but ther
is still some support for this tag in some browsers. But it require additional plugins/installation to work. A Deprecated element or attribute is one that has been outdated. Deprecated elements may become obsolete in the future, but browsers should continue to support deprecated elements for backward compatibility.

Page 7

Obsolete elements and attributes have no guarantee of browser-support and they are no longer defined in the W3C specification.

Important Attributes:
code, object, align, alt, archive, codebase, height, hspace, name, vspace, width, class, id, style, title

<AREA>

Hotspot in image map

Avoid image maps where possible. Occasionally necessary.

Code snippet: <img src ="planets.gif " width="145" height="126" alt="Planets" usemap ="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0, 0, 82, 126" href="sun.html" alt="Sun" /> <area shape="circle" coords="90, 58, 3" href="mercur.html" alt="Mercury" /> <area shape="circle" coords="124, 58, 8" href="venus.html " alt="Venus" /> </map> Browser Support: <area> tag is supported in all major browsers. Important Attributes:
alt, coords, href, nohref, shape, target, accesskey, class, id, lang, style, tabindex, title, xml:lang

<ARTICLE>

Specifies self

The <article> tag specifies independent, self-contained

Page 8

contained content

content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site. Few examples where you can use <article> tag: forum post newspaper article blog entry user comment

Code snippet: <article> <h3>Netscape is dead</h3> <p><a href="http://blog.netscape.com/2007/12/28/end-of-support-for-netscape-webbrowsers">End of support for Netscape web browsers</a>. AOL has a long history on the
internet, being one of the first companies to really get people online. Throughout its lifetime, it has been involved with a number of high profile acquisitions, perhaps the largest of which was the 1999 acquisition of the Netscape Communications Corporation. Netscape was known to many as the thought leader in web browsing, and had developed a number of complementary pieces of software that allowed for a rich suite of internet tools.</p>

</article> Browser Support: <article> tag is supported in all major browsers. The <article> tag is new in HTML
5.

Important Attributes:
accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<ASIDE>

Defines content aside from the content it is placed

The <aside> tag defines some content aside from the content it is placed in. The aside content should be related to the

Page 9

in

surrounding content.

Code snippet: <p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.

</aside> Browser Support: <aside> tag is supported in all major browsers. The <aside> tag is new in HTML 5. Important Attributes:
accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<AUDIO>

Specifies the audio The <audio> tag defines sound, such as music or other audio file or content streams.

Code snippet: <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mp3" />
Your browser does not support the audio tag.

</audio> Browser Support: <audio> tag is supported in all major browsers. The <audio> tag is new in HTML 5. Important Attributes:
accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang,

Page 10

spellcheck, style, tabindex, title, autoplay, controls, loop, preload, src

<b>, <big>, <i>, <small>, <tt> Tags

The <b>, <big>, <i>, <small>, and <tt> tags are all font-style tags. Font-style tags are defined in HTML4. But it is strongly recommended to use CSS styling (use css style sheet) instead. Note: <tt> and <big> are removed from the HTML5 version. Avoid using them.
<b>, <big>, <i>, <small>, and <tt> tags are supported in all major browsers.

<BASE>

Specifies the base location of the document.

Use only when necessary. Adjusts any relative links and paths within the document.

Code snippet: <head> <base href=http://domainname.com/images/ target=_blank /> </head> <body> <img src=logo.gif /> </body> Browser Support: <base> tag is supported in all major browsers. Important Attributes:
href, target

<BASEFONT>

Sets default font family, color and size

Display info never use it

Page 11

Code snippet: <head> <basefont color=red size=5 /> </head> <body> <h1>This is heading 1</h1> <p>This is paragraph</p> </body> Browser Support: <basefont> tag is only supported by Internet Explorer and deprecated in HTML 4.01. Important Attributes:
color, face, size, class, id, lang, style, title

<BLOCKQUOTE>

Large quoted block of text

Use for any quoted text that constitutes one or more paragraphs (note: should contain <p> tags as well). Use <q> for quotations within a paragraph or for short quotations. Often used in conjunction with <cite> to cite the quotations source.

Code snippet: <blockquote cite=http://domainname.com/wiki> <p>Here is a long quotation Here is a long quotation Here is a long quotation Here is a
long quotation Here is a long quotation Here is a long quotation Here is a long quotation Here is a long quotation Here is a long quotation</p>

</blockquote> Browser Support: <blockquote> tag is supported in all major browsers. Browser usually inserts margin and indent <blockquote> elements.

Page 12

Important Attributes:
cite, class, id, lang, style, title, xml:lang

<BODY>

Document body

Essential (unless youre using frames)

Code snippet: <html> <head> <title>Title of the webpage</title> </head> <body>

The content in the document

</body> </html> Browser Support: <body> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<BR>

Line break

This is arguably display information. Still in common use, but use with restraint.

Code snippet:
This text contains<br />a line break.

Page 13

Browser Support: <br> tag is supported in all major browsers. Important Attributes:
class, id, style, title

<BUTTON>

Used for a standard clickable button within a form

Often better than <input type=button /> or <input type=submit />, as it allows you to assign different styles based on the HTML element alone, whereas differentiating style based on the type of input is less well supported.

Code snippet: <button type=submit>Order Now</button> Browser Support: <button> tag is supported in all major browsers. Inside <button> element you can put
content like text or images and this is the main difference between the buttons created with the <button> and <input> elements. Note: Always specify type attribute for a <button> element, because different browsers may use different default types. Important: If you use the <button> element in an HTML form, different browsers may submit different values. Internet Explorer, prior version 9, will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the <input> element to create buttons in an HTML form.

Important Attributes:
disabled, name, type, value, accesskey, class, id, lang, style, tabindex, title, xml:lang

<CANVAS>

A container area

The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

Page 14

for graphics being drawn on the fly using scripting.

The <canvas> tag is only a container for graphics; you must use a script to actually draw the graphics.

Code snippet: <canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0, 0, 80, 100); </script> Browser Support: <canvas> tag is supported in all major browsers. That <canvas> tag is new in HTML 5.
Note: Any text inside <canvas> tag will be displayed if that browser doesnt support <canvas> tag.

Important Attributes:
height, width, accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<CAPTION>

Caption for a table: The correct way to assign a title to a table and must be inserted describes the tables contents immediately after the <table> tag. Also you can only specify one caption per table. By default, the table caption will be center aligned above a table. But you can align it using CSS properties.

Code snippet:

Page 15

<table border="1"> <caption>Monthly Savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Browser Support: <caption> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<CENTER>

Centred block

Display info never use it. Use <div> or some other blocklevel tag with the style text-align:center instead

Code snippet: <center>This text will be center aligned</center> Browser Support: <center> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title

<CITE>

Defines a citation

Defines the source of a quotation (in conjunction with content in <q> or<blockquote> pairs).

Page 16

Code snippet: <cite>any citation comes here</cite> Browser Support: <cite> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<CODE>

Defines an extract of code

Not commonly used. Similar to<pre> tag, but collapses consecutive white spaces and line breaks in the source. It defines a piece of computer code.

Code snippet: <code>A piece of computer code</code> Browser Support: <code> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<COL>

Identifies a particular column in a table

Can be very useful. e.g. <col class=namecol> can be applied to each first column in a series of tables, then the width of each column may be set to be equal in the stylesheet, overriding the tables natural tendency to adjust its own column widths to fit its contents. It can only be used inside <table> or <colgroup> element.

Page 17

Code snippet: <table border="1"> <colgroup> <col span="2" style="background-color:red " /> <col style="background-color:yellow " /> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML </td> <td>$53</td> </tr> <tr> <td>5869207</td> <td>My first css </td> <td>$49</td> </tr> </table> Browser Support: <col> tag is supported in all major browsers. Important Attributes:
align, char, charoff, span, valign, width, class, id, lang, style, title, xml:lang

<COMMAND>

A command that user can invoke.

The <command> tag defines a command (a radiobutton, a checkbox, or a command button) that the user can invoke. A command can be part of a context menu or toolbar, using the <menu> element, or can be put anywhere else in the page, to define a keyboard shortcut.

Page 18

Code snippet: <menu> <command type="command" label="Save" onclick="save()">Save</command> </menu> Browser Support: <command> tag is currently only supported in Internet Explorer. That <command> tag is
new in HTML 5.

Important Attributes:
checked, disabled, icon, label, radiogroup, type, accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<DATALIST>

Specifies a list of pre-defined options for an <input> element.

The <datalist> tag is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.

Use the <input> element's list attribute to bind it together with a <datalist> element.

Code snippet: <input list="browsers" /> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Google Chrome"> <option value="Opera"> <option value="Safari"> </datalist>

Page 19

Browser Support: <datalist> tag is currently only supported in Firefox and Opera. The <datalist> tag
is new in HTML 5.

Important Attributes:
accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<DETAILS>

Specifies additional details user can show and hide on demand.

The <details> tag can used to create an interactive widget that the user can open and close. Inside <details>, there can be put any sort of content. The content of a <details> element should not be visible unless the open attribute is set.

Code snippet: <details> <summary>Copyright 2008-2011.</summary> <p> - Sparx IT Solutions Pvt Ltd. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Sparx IT Solutions Pvt Ltd.</p> </details> Browser Support: <details> tag is currently only supported in Chrome. The <details> tag is new in
HTML 5. Important: The <summary> tag is used to specify a visible heading for the details. The heading can be clicked to show/hide the details.

Important Attributes:
accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

Page 20

<DFN>

Definition of a term

Works in a similar way to <abbr>and <acronym>, using a title attribute (displays a tooltip in standard visual browsers).

Code snippet: <dfn title=definition of a term>Definition goes here</dfn> Browser Support: <dfn> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<DIR>

Directory list

Now deprecated. Use a standard<ul> or other list instead.

Code snippet: <dir> <li>HTML</li> <li>xHTML</li> <li>CSS</li> </dir> Browser Support: <dir> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<DIV>

Division

Specifies a logical division within a document. Use it to separate or identify chunks of content that are not otherwise

Page 21

distinguished naturally using other tags. One of the most common HTML tags.

Code snippet: <div style=color:#000000> <h3>This is heading 1</h3> <p>This is a paragraph</p> </div> Browser Support: <div> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<DL>

Definition list

Contains one or more definition-term / definition-description pairs.

Code snippet: <dl> <dt>Coffee</dt> <dd>- black hot drink </dd> <dt>Milk</dt> <dd>- white cold drinks </dd> </dl> Browser Support: <dl> tag is supported in all major browsers. Important Attributes:

Page 22

class, id, lang, style, title, xml:lang

<DT> <DD>

Definition term

Used as part of a <dt></dt><dd></dd> pair within a definition list (<dl></dl>)

Definition description

Code snippet: <dl> <dt>Coffee</dt> <dd>- black hot drink </dd> <dt>Milk</dt> <dd>- white cold drinks </dd> </dl> Browser Support: <dt> and <dd> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<EM>

Emphasis

Commonly used in place of the old<i> (italics) tag to indicate emphasis (but less than <strong>)

Code snippet: <em>Emphasized text</em> Browser Support: <em> tag is supported in all major browsers.

Page 23

Important Attributes:
class, id, lang, style, title, xml:lang

<EMBED>

An embedded flash animation.

The <embed> tag defines a container for an external application or interactive content (a plug-in).

Code snippet: <embed src="helloworld.swf" /> Browser Support: <embed> tag is supported in all major browsers. The <embed> tag is new in HTML 5. Important Attributes:
height, src, type, width, accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<FIGCAPTION>

Defines a caption for <figure> element.

The <figcaption> element can be placed as the first or last child of the <figure> element.

Code snippet: <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228" /> <figcaption>A view of the pulpit rock in Norway.</figcaption> </figure>

Page 24

Browser Support: <figcaption> tag is supported in all major browsers. The <figcaption> tag is new
in HTML 5.

Important Attributes:
accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<FIGURE>

To markup a photo in a document

Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

Code snippet: <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228" /> </figure> Browser Support: <figure> tag is supported in all major browsers. The <figure> tag is new in HTML 5. Important Attributes:
accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<FONT>

Font settings

Display info never use it

Code snippet: <font size=3 color=red face=verdana>This is some text!</a>

Page 25

Browser Support: <font> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<FOOTER>

Defines a footer for the document or a section.

A <footer> typically contains the author of the document, copyright information, links to terms of use, contact information, etc.

Footers are typically placed at the bottom of a document. However, this is not required.

A document/section can also have more than one footer.

Code snippet: <footer>Copyright 2008-2012.</footer> Browser Support: <footer> tag is supported in all major browsers. The <footer> tag is new in HTML 5. Important Attributes:
accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<FORM>

Input form

Essential for data input

Code snippet:

Page 26

<form action="form_action.asp" method="get"> First name: <input type="text" name="fname" /> Last name: <input type="text" name="lname" /> <input type="submit" value="submit" /> </form> Browser Support: <form> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<H1>

Level 1 header

Aim to have one H1 on each page, containing a description of what the page is about.

<H2> <H3>

Level 2 header

Defines a section of the page

Level 3 header

Defines a sub-section of the page (should always follow an H2 in the logical hierarchy)

<H4> <H5> <H6>

Level 4 header

Etc. Less commonly used

Level 5 header

Less commonly used.

Level 6 header

Less commonly used

Code snippet: <h1>This is heading 1</h1> <h2> This is heading 2</h2> <h3> This is heading 3</h3>

Page 27

<h4> This is heading 4</h4> <h5> This is heading 5</h5> <h6> This is heading 6</h6> Browser Support: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tag is supported in all major
browsers.

Important Attributes:
class, id, lang, style, title, xml:lang

<HEAD>

Document head

Essential. Contains information about a page that does not constitute content to be communicated as part of the page.

Code snippet: <head> <title>Title of the page goes here</a> </head> The following elements can go inside the <head> tag:
<title> <style> <base> <link> <meta> <script> <noscript>

Browser Support: <head> tag is supported in all major browsers. Important Attributes:

Page 28

Profile, dir, lang, xml:lang

<HEADER>

Specifies an introduction, or a group of navigation elements for a document

The <headers> element can contain headings, subheadings, version information, navigational controls, etc.

Note: A <header> tag cannot be placed within a <footer>, <address> or another <header> element.

Code snippet: <header> <h1>Welcome to my homepage</h1> <p>My name is Donald Duck.</p> </header> <p>The rest of the homepage</p> Browser Support: <header> tag is supported in all major browsers. The <header> tag is new in HTML 5. Important Attributes:
accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<HGROUP>

To group the heading of a section

The <hgroup> tag represents the heading of a section.

The <hgroup> element is used to group a set of <h1> to <h6> elements, when a heading has multiple levels (subheadings).

Code snippet: <hgroup>

Page 29

<h1>Hey this is heading 1</h1> <h2>And here is subsequent heading 2</h2> </hgroup> <p>The rest of the content</p> Browser Support: <hgroup> tag is supported in all major browsers. The <hgroup> tag is new in HTML 5. Important Attributes:
accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<HR>

Horizontal rule

Display info with no semantic value never use it. Horizontal, by definition, is a visual attribute.

Code snippet: <p>Visit this website</p> <hr /> <p>Visit this website</p> Browser Support: <hr> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<HTML>

Core element of every web page.

Page 30

Code snippet: <html> <head> <title>Title of the document </title> </head> <body>
The content of the document

</body> </html> Browser Support: <html> tag is supported in all major browsers. Important Attributes:
xmlns, dir, lang, xml:lang

<IMG>

Show an image

Vital. Always use the alt or longdescattributes when the image has content value

Code snippet: <img src=smiley.gif alt=Smilet Face height=42 width=42 /> Browser Support: <img> tag is supported in all major browsers. Important Attributes:
alt, src, align, border, height, hspace, ismap, longdesc, usemap, vspace, width

<INPUT>

Input fields within

Vital. Its used to select user information. <input> elements are

Page 31

forms

used within a <form> element to declare input controls that allow users to input data. An input field can vary in many ways, depending on the type attribute.

Code snippet: <form action="form_action.asp " method="get"> First name: <input type="text" name="fname" /> Last name: <input type="text" name="lname" /> <input type="submit" value="Submit" /> </form> Browser Support: <input> tag is supported in all major browsers. Important Attributes:
accept, alt, checked, disabled, maxlength, name, readonly, size, src, type, value, accesskey, class, id, lang, style, tabindex, title, xml:lang

<I>

Italicised text

Display info never use it

Code snippet: <i>Italic text</i> Browser Support: <i> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

Page 32

<LINK>

Defines a relationship to another document

Commonly used to reference external stylesheets, but has other minor uses

Code snippet: <head> <link rel=stylesheet type=text/css href=theme.css /> </head> Browser Support: <link> tag is supported in all major browsers. Important Attributes:
charset, href, hreflang, media, rel, rev, target, type, class, dir, id, lang, style, title, xml:lang

<LI>

List item

Specifies an item in an unordered or ordered list (<ul> or <ol>)

Code snippet: <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Browser Support:

Page 33

<li> tag is supported in all major browsers. The <li> tag is used in both ordered (<ol>) and unordered (<ul>) lists. Important Attributes:
class, id, lang, style, title, xml:lang

<MAP>

Client-side imagemap

May have occasional value, but only use when absolutely necessary

Code snippet: <img src ="planets.gif " width="145" height="126" alt="Planets" usemap ="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0, 0, 82, 126" href="sun.html" alt="Sun" /> <area shape="circle" coords="90, 58, 3" href="mercur.html" alt="Mercury" /> <area shape="circle" coords="124, 58, 8" href="venus.html " alt="Venus" /> </map> Browser Support: <map> tag is supported in all major browsers. Important Attributes:
name, class, id, lang, style, title, xml:lang

<MARK>

Highlight parts of the text

Use the <mark> tag if you want to highlight parts of your text.

Page 34

Code snippet: <p>not forget to buy <mark>milk</mark> today.</p> Browser Support: <mark> tag is supported in all major browsers. The <mark> tag is new in HTML 5. Important Attributes:
accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<MENU>

Menu item list

Deprecated. Do not use. Use other standard list types instead.

Code snippet: <menu> <li>html</li> <li>xhtml</li> <li>css</li> </menu> Browser Support: <menu> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<META>

Meta-information

Useful way to insert relevant information into the <head> section of the page that does not need to be displayed.

Page 35

Code snippet: <head> <meta name="description" content="Free Web tutorials " /> <meta name="keywords" content="HTML, CSS, XML, JavaScript " /> <meta name="author" content="Hege Refsnes " /> <meta http-equiv="content-type " content="text/html;charset=UTF-8" /> </head> Browser Support: <meta> tag is supported in all major browsers. Important Attributes:
content, http-equiv, name, scheme, dir, lang, xml:lang

<NAV>

A section of navigational links.

The <nav> tag defines a section of navigation links.

Not all links of a document must be in a <nav> element. The <nav> element is intended only for major block of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

Code snippet: <nav> <a href="/html/">HTML</a> | <a href="/html5/">HTML5</a> | <a href="/css/">CSS</a> | <a href="/css3/">CSS3</a> | <a href="/js/">JavaScript</a> </nav>

Page 36

Browser Support: <nav> tag is supported in all major browsers. The <nav> tag is new in HTML 5. Important Attributes:
accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<NOSCRIPT>

Alternate content in Used to provide an alternate content for users that have case if scripts are disabled scripts in browser or have a browser that doesnt

disabled in browser support client-side scripting. The content inside <noscript> element will only be displayed if scripts are not supported, or are disabled in the users browser.

Code snippet: <script type="text/javascript"> document.write("Hello World!") </script> <noscript>Your browser does not support JavaScript!</noscript> Browser Support: <noscript> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<OBJECT>

Embedded object

Used to define an embedded object within an HTML document. You can embed multimedia (like audio, video, java

Page 37

applets, ActiveX, PDF, and Flash) in your web pages.

Code snippet: <object width="400" height="400" data="helloworld.swf "></object> Browser Support: <object> tag is supported in all major browsers. Important Attributes:
archive, classid, codebase, codetype, data, declare, height, name, standby, type, usemap, width, class, id, lang, style, tabindex, title, xml:lang

<OL>

Ordered list

Type of list where the order of elements has some meaning. Generally rendered with item numbers (best managed with CSS).

Code snippet: <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Browser Support: <ol> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

Page 38

<OPTION>

Selection list option

Vital for options within a drop-down control.

Code snippet: <select> <option>Volvo</option> <option>Saab</option> <option>Mercedes</option> <option>Audi</option> </select> Browser Support: <option> tag is supported in all major browsers. Important Attributes:
disabled, label, selected, value, class, id, lang, style, title, xml:lang

<OUTPUT>

Perform a calculation and shows the result in an <output> element.

The <output> tag represents the result of a calculation (like one performed by a script).

Code snippet: <form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" name="a" value="50" />100 +<input type="number" name="b" value="50" /> =<output name="x" for="a b"></output> </form>

Page 39

Browser Support: <output> tag is supported in all major browsers except Internet Explorer. The <nav> tag
is new in HTML 5.

Important Attributes:
for, form, name, accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<PARAM>

Parameter for Java applet

Used in conjunction with an<object> or <applet> tag to pass additional setting information at runtime.

Code snippet: <object data="horse.wav "> <param name="autoplay" value="false" /> </object> Browser Support: <object> tag is supported in all major browsers. Important Attributes:
name, type, value, valuetype, id

<PRE>

Preformatted text

Renders text in a pre-formatted style, preserving line breaks and all spaces present in the source. May be useful. (This ones a paradox, as it is strictly display info that applies only to visual browsing, but its still so commonly used and useful that Im hesitant to advise against using it.)

Code snippet:

Page 40

<pre>
Text in a pre element Is displayed in a fixed-width Font, and it preserves both spaces and line breaks

</pre> Browser Support: <pre> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<P>

Paragraph

Only use to denote a paragraph of text. Never use for spacing alone.

Code snippet: <p>This is some text in a paragraph.</p> Browser Support: <p> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<PROGRESS>

Displays progress of a task

The <progress> tag is currently supported in Firefox, Opera, and Chrome. Like Downloading in progress king of things.

Page 41

Code snippet: <progress value="22" max="100"></progress> Browser Support: <progress> tag is currently supported in Firefox, Opera and Google Chrome. The <progress> tag is new in HTML 5. Important Attributes:
max, value, accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<Q>

Short quotation

Use for inline quotations (whereas<blockquote> should be used for quotations of a paragraph or more). Often used in conjunction with<cite> to cite the quotations source.

Code snippet: <p>WWFs goal is to: <q>build a future where people libe in harmony with nature </q>. We hope they succeed.</p> Browser Support: <q> tag is supported in all major browsers.
Note: Internet Explorer 8 (and higher) support the <q> element if a !DOCTYPE is specified

Important Attributes:
cite, class, id, lang, style, title, xml:lang

<SAMP>

Denotes sample output text

Similar to the <code> tag. Rarely used. Avoid.

Page 42

Code snippet: <samp>Sample output from a computer program</samp> Browser Support: <samp> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, title, xml:lang

<SCRIPT>

Inline script (e.g. JavaScript)

Its better to have all scripts as separate files than to write inline or in the <head> section, however still has its uses.

Code snippet: <script type="text/javascript "> document.write("Hello World!") </script> Browser Support: <script> tag is supported in all major browsers. Important Attributes:
type, charset, defer, src, xml:space

<SECTION>

Defines section in a document.

The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.

Code snippet:

Page 43

<section> <h1>WWF</h1> <p>The World Wildlife Foundation was born in 1961</p> </section> Browser Support: <section> tag is supported in all major browsers. The <section> tag is new in HTML
5.

Important Attributes:
accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<SELECT>

Selection list

A drop-down selector for a form.

Code snippet: <select> <option>Volvo</option> <option>Saab</option> <option>Mercedes</option> <option>Audi</option> </select> Browser Support: <select> tag is supported in all major browsers. Important Attributes:
disable, multiple, name, size, class, id, lang, style, tabindex, title, xml:lang

<SOURCE>

Specify multiple media resources for

The <source> tag is used to specify multiple media resources for media elements, such as <video> and <audio>.

Page 44

media elements. The <source> tag allows you to specify alternative video/audio files which the browser may choose from, based on its media type or codec support.

Code snippet: <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mp3" />
Your browser does not support the audio tag.

</audio> Browser Support: <source> tag is supported in all major browsers. The <source> tag is new in HTML 5. Important Attributes:
media, src, type, accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<SPAN>

An inline span within text

Use to apply meaning (and style) to a span of text that goes with the flow of content (whereas a <div> tag is block-level and breaks the flow)

Code snippet: <p>My mother has <span style="color:lightblue">light blue</span> eyes.</p> Browser Support: <span> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, tabindex, title, xml:lang

Page 45

<STRONG>

Strong emphasis

Use this instead of the old <b> tag.

Code snippet: <strong>Strong text</strong> Browser Support: <strong> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, tabindex, title, xml:lang

<STYLE>

CSS style settings

Normally used in <head> section of a page. Try to use external stylesheets, to enable you to apply different styles for different output media.

Code snippet: <style type="text/css "> h1 {color:red; } p {color:blue; } </style> Browser Support: <style> tag is supported in all major browsers. Important Attributes:
type, media, dir, lang, title, xml:lang

<SUB>

Subscript text

May be required in some academic uses, e.g. Chemical

Page 46

<SUP>

Superscript text

formulas.

Code snippet: <p>This text contains _subscript text.</p> <p>This is text contains ^superscript text.</p> <a href=http://domainname.com title=domain name tooltip text>Visit this website</a> Browser Support: <sub> and <sup> tag is supported in all major browsers. Important Attributes:
class, id, lang, style, tabindex, title, xml:lang

<SUMMARY>

Defines a visible heading for the <details> element.

The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.

Code snippet: <details> <summary>Copyright 2008-2011.</summary> <p> - Sparx IT Solutions Pvt Ltd. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Sparx IT Solutions Pvt Ltd.</p> </details> Browser Support: <summary> tag is currently only supported in Chrome. The <summary> tag is new in
HTML 5. Important: The <summary> tag should be the first child element of the <details> element.

Page 47

Important Attributes:
accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<TABLE>

Table

Use for repeated data that has a naturally tabular form. Never use for layout purposes.

Code snippet: <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Browser Support: <table> tag is supported in all major browsers. Important Attributes:
border, cellpadding, cellspacing, frame, rules, summery, width, class, dir, id, lang, style, title, xml:lang

<TD>

Table data cell

A cell containing actual data. If a cell actually contains a descriptor or identifier for a row or column, use a<th> (table header) tag, not a<td>. This usually applies to column headers (within a <thead>), column footers (within a <tfoot>), as well

Page 48

as row headers (usually the first cell in a row in the <tbody>).

Code snippet: <table border="1"> <tr> <td>Cell A </td> <td>Cell B </td> </tr> </table> Browser Support: <td> tag is supported in all major browsers. Important Attributes:
href, hreflang, name, rel, target, accesskey, class, id, style, tabindex, title, xml:lang

<TEXTAREA>

Multi-line text input area in a form

Essential

Code snippet: <textarea rows="2" cols="20">

In this document you will find almost all the information about html tags.

</textarea> Browser Support: <textarea> tag is supported in all major browsers. Important Attributes:
cols, rows, disabled, name, readonly, accesskey, class, style, id, lang, tabindex, title, xml:lang

Page 49

<TH>

Table column or row header cell

May appear in a <thead> (to denote a column header cell), <tbody> (to denote a row header), and in<tfoot> (to denote a column foot cell, e.g. a total)

Code snippet: <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Browser Support: <th> tag is supported in all major browsers. Important Attributes:
abbr, align, axis, char, charoff, colspan, headers, rowspan, scope, valign, class, id, lang, style, title, xml:lang

<TBODY>

Indicates the main body of a data table

It is always worth using this tag, as well as using <thead> and <tfoot>where appropriate. Note that it is permissible to have more than one <tbody>, <thead>, and <tfoot> in the same table.

Code snippet: <table border="1"> <thead> <tr> <th>Month</th>

Page 50

<th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> Browser Support: <tbody> tag is supported in all major browsers. Important Attributes:
align, char, charoff, valign, class, id, lang, style, title, xml:lang

<THEAD>

The head section of a table

The place to put column header cells (<th>)

Code snippet: <table border="1"> <thead>

Page 51

<tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> Browser Support: <thead> tag is supported in all major browsers. Important Attributes:
align, char, charoff, valign, class, id, lang, style, title, xml:lang

<TFOOT>

The foot section of a table

Good place to put e.g. summary data, such as totals. Note that it goes before the <tbody> tag!

Code snippet:

Page 52

<table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> Browser Support: <tfoot> tag is supported in all major browsers. Important Attributes:
align, char, charoff, valign, class, id, lang, style, title, xml:lang

<TITLE>

Document title

Essential

Code snippet:

Page 53

<html> <head> <title>HTML 4.01 Tag Reference </title> </head> <body>

The content of the document

</body> </html> Browser Support: <title> tag is supported in all major browsers. Important Attributes:
dir, lang, xml:lang

<TR>

Table row

Essential with tables

Code snippet: <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Browser Support:

Page 54

<tr> tag is supported in all major browsers. Important Attributes:

align, char, charoff, valign, class, id, lang, style, title, xml:lang

<TT>

Teletype simulates typewriter output

Similar to <pre>, except that it collapses white space like normal HTML (whereas <pre> leaves all consecutive white space intact). Avoid if possible

Code snippet: <tt>Teletype text </tt> Browser Support: <tt> tag is supported in all major browsers. Important Attributes:
class, id, style, tabindex, title, xml:lang

<UL>

Unordered list

Essential. Use for lists where the order or items has no particular importance.

Code snippet: <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

Page 55

Browser Support: <ul> tag is supported in all major browsers. Important Attributes:
class, id, style, tabindex, title, xml:lang

<U>

Underline text

Display info never use it

Code snippet: <p>Do not <u>underline</u> text if it is not a hyperlink!</p> Browser Support: <u> tag is supported in all major browsers. Important Attributes:
class, id, style, tabindex, title, xml:lang

<VAR>

Variable in computer code

Obscure tag, may only be useful in academic documents. Avoid.

Code snippet: <var>Variable</var> Browser Support: <var> tag is supported in all major browsers. Important Attributes:

Page 56

class, id, style, tabindex, title, xml:lang

<VIDEO>

Use to specify videos or movie clip.

The <video> tag specifies video, such as a movie clip or other video streams.

Code snippet: <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video> Browser Support: <video> tag is supported in all major browsers. The <video> tag is new in HTML 5.
Important: Any text between the <video> and </video> tags will be displayed in browsers that do not support video.

Important Attributes:
autoplay, controls, height, loop, muted, poster, preload, src, width, accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<WBR>

A text with word break opportunity

The Word Break Opportunity (<wbr>) specifies where in a text it would be ok to add a line-break.

Tip: When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the <wbr> element to add word break opportunities.

Page 57

Code snippet: <p>To learn AJAX, you must be familiar with the XML<wbr>Http</wbr>Request Object.</p> Browser Support: <wbr> tag is supported in all major browsers, except Internet Explorer and Opera. The <wbr> tag is new in HTML 5. Important Attributes:
accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

Page 58

Summery and better understanding

All in all, please start coding your web page semantically, as it is for benefits of all (you, your client and disabled people). And once you learn how to code semantically, it will start saving a lot of your time and will provide you an opportunity to grow more mature as a HTML developer. To better understand how a machine view the content on your page when it applies semantic coding rules to it, check out the W3Cs semantic data extractor (http://www.w3.org/2003/12/semantic-extractor.html). You can enter your url into this tool and it will display only the text on the web page which uses semantic markup to describe it.

Page 59