SEO Sementic Coding

COADINGYour 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

seo semantic

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. It’s 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 size”4”> 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 class”bold-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 don’t 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 don’t 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 what’s 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=”page-title”>Night

Page 3

Clubs in Delhi</div>, he treats them as general text and not heading and <font>

and <div> tags are generic elements and don’t 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 don’t 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 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 isn’t shouted at the user.

Page 4

List of tags & their usage

Now, let’s 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 you’ll

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).

Page 5

http://domainname.com/

Code snippet:

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

Browser Support:

<abbr> tag is supported in all major browser except IE 6 or earlier versions.


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.



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.

Page 6

Generally, all acronyms are abbreviations, but not all abbreviations are acronyms.

<ADDRESS>Used for

marking up a

physical (e.g.

mailing) address

Not commonly used. Recommend looking into

microformats, which allow for more detail and

interoperability.

Code snippet:

<address><strong>Our office address</strong>G-10, Sector-63, Noida, Uttar Pradesh, 201301, India<a href=”mailto: [email protected]”> [email protected]</a><span class=”bold-text”> Call us: +91-120-473-5100</span></address>

Browser Support:

<address> tag is supported in all major browsers.



<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

Page 7


but ther is still some support for this tag in some browsers. But it require additional plug-ins/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.

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


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.


Page 8

alt, coords, href, nohref, shape, target, accesskey, class, id, lang, style, tabindex, title, xml:lang

<ARTICLE>Specifies self

contained

content

The <article> tag specifies independent, self-

contained 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-web-browsers">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.

Page 9


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

<ASIDE>Defines content

aside from the

content it is

placed in

The <aside> tag defines some content aside

from the content it is placed in. The aside

content should be related to the 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.



<AUDIO>Specifies the

audio file or

content

The <audio> tag defines sound, such as music

or other audio streams.

Code snippet:

Page 10

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


accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, 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>

Page 11

http://domainname.com/images/

<body><img src=”logo.gif” /></body>

Browser Support:

<base> tag is supported in all major browsers.


href, target

<BASEFONT>Sets default font

family, color and

size

Display info – never use it

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.


color, face, size, class, id, lang, style, title

Page 12




<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 quotation’s

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.


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

<BODY>Document body Essential (unless you’re using frames)

Code snippet:

<html><head><title>Title of the webpage</title></head>

<body>The content in the document…

Page 13

http://domainname.com/wiki

</body>

</html>

Browser Support:

<body> tag is supported in all major browsers.



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

Browser Support:

<br> tag is supported in all major browsers.


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.

Page 14

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.


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

<CANVAS>A container area

for graphics

being drawn on

the fly using

scripting.

The <canvas> tag is used to draw graphics, on

the fly, via scripting (usually JavaScript).

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');

Page 15

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 doesn’t support <canvas> tag.


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

<CAPTION>Caption for a

table: describes

the table’s

contents

The correct way to assign a title to a table and

must be inserted 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:

<table border="1"><caption>Monthly Savings</caption><tr> <th>Month</th> <th>Savings</th></tr><tr>

Page 16

<td>January</td> <td>$100</td></tr></table>

Browser Support:

<caption> tag is supported in all major browsers.



<CENTER>Centred block

Display info – never use it. Use <div> or some

other block-level 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.


class, id, lang, style, title

<CITE>Defines a

citation

Defines the source of a quotation (in conjunction

with content in <q> or<blockquote> pairs).

Code snippet:

<cite>any citation comes here</cite>

Page 17

Browser Support:

<cite> tag is supported in all major browsers.



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



<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 table’s natural

tendency to adjust its own column widths to fit

its contents. It can only be used inside <table>

or <colgroup> element.

Page 18

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.


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

Page 19

keyboard shortcut.

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.


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

Page 20

<option value="Safari"></datalist>

Browser Support:

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



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

Page 21



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



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

Page 22



<DIV>Division Specifies a logical division within a document.

Use it to separate or identify chunks of content

that are not otherwise 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.



<DL>Definition list Contains one or more definition-term / definition-

description pairs.

Code snippet:

<dl>

Page 23

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



<DT>Definition term

Used as part of a <dt></dt><dd></dd> pair

within a definition list (<dl></dl>)

<DD>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.



Page 24

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



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


height, src, type, width, accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<FIGCAPTION>Defines a

caption for

The <figcaption> element can be placed as the

first or last child of the <figure> element.

Page 25

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

Browser Support:

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



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

Page 26



<FONT>Font settings Display info – never use it

Code snippet:

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

Browser Support:

<font> tag is supported in all major browsers.



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

Page 27


Browser Support:

<footer> tag is supported in all major browsers. The <footer> tag is new in HTML 5.



<FORM>Input form Essential for data input

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:

<form> tag is supported in all major browsers.



<H1>Level 1 header Aim to have one H1 on each page, containing a

description of what the page is about.

<H2>Level 2 header Defines a section of the page

Page 28

<H3>Level 3 header Defines a sub-section of the page (should always

follow an H2 in the logical hierarchy)

<H4>Level 4 header Etc. Less commonly used

<H5>Level 5 header Less commonly used.

<H6>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><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.



<HEAD>Document head Essential. Contains information about a page that

does not constitute content to be communicated

as part of the page.

Code snippet:

Page 29

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


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>

Page 30

Browser Support:

<header> tag is supported in all major browsers. The <header> tag is new in HTML 5.



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



Page 31

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



<HTML> Core element of every web page.

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.

Page 32


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.


alt, src, align, border, height, hspace, ismap, longdesc, usemap, vspace, width

<INPUT>Input fields

within forms

Vital. Its used to select user information.

<input> elements are 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>

Page 33


Browser Support:

<input> tag is supported in all major browsers.


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.



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

Page 34


Browser Support:

<link> tag is supported in all major browsers.


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:

<li> tag is supported in all major browsers. The <li> tag is used in both ordered (<ol>) and unordered (<ul>) lists.



Page 35

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


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.

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.

Page 36



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



<META>Meta-

information

Useful way to insert relevant information into the

<head> section of the page that does not need

to be displayed.

Code snippet:

<head><meta name="description" content="Free Web tutorials " /><meta name="keywords" content="HTML, CSS, XML, JavaScript " />

Page 37

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


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>

Browser Support:

Page 38

<nav> tag is supported in all major browsers. The <nav> tag is new in HTML 5.



<NOSCRIPT>Alternate

content in case

if scripts are

disabled in

browser

Used to provide an alternate content for users

that have disabled scripts in browser or have a

browser that doesn’t support client-side

scripting.

The content inside <noscript> element will only

be displayed if scripts are not supported, or are

disabled in the user’s 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.



<OBJECT>Embedded

object

Used to define an embedded object within an

HTML document. You can embed multimedia (like

audio, video, java applets, ActiveX, PDF, and

Page 39

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.


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.



Page 40

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


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 41

Browser Support:

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


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.


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 one’s a paradox, as it is

strictly display info that applies only to visual

browsing, but it’s still so commonly used and

useful that I’m hesitant to advise against using

it.)

Page 42

Code snippet:

<pre>Text in a pre elementIs displayed in a fixed-widthFont, and it preservesboth spaces andline breaks</pre>

Browser Support:

<pre> tag is supported in all major browsers.



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



Page 43

<PROGRESS>Displays

progress of a

task

The <progress> tag is currently supported in

Firefox, Opera, and Chrome. Like Downloading in

progress king of things.

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.


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 quotation’s

source.

Code snippet:

<p>WWF’s 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

Page 44


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

<SAMP>Denotes sample

output text

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

Code snippet:

<samp>Sample output from a computer program</samp>

Browser Support:

<samp> tag is supported in all major browsers.



<SCRIPT>Inline script (e.g.

JavaScript)

It’s 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.


Page 45

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:

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



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

Page 46

Browser Support:

<select> tag is supported in all major browsers.


disable, multiple, name, size, class, id, lang, style, tabindex, title, xml:lang

<SOURCE>Specify multiple

media resources

for media

elements.

The <source> tag is used to specify multiple

media resources for media elements, such as

<video> and <audio>.

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.


media, src, type, accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

<SPAN>An inline span

Use to apply meaning (and style) to a span of

Page 47

within texttext 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.


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

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



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

Page 48

<style type="text/css ">h1 {color:red; }p {color:blue; }</style>

Browser Support:

<style> tag is supported in all major browsers.


type, media, dir, lang, title, xml:lang

<SUB>Subscript text

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

Chemical formulas.

<SUP>Superscript text

Code snippet:

<p>This text contains <sub>subscript</sub> text.</p><p>This is text contains <sup>superscript</sup> 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.



<SUMMARY>Defines a visible

The <summary> tag defines a visible heading

for the <details> element. The heading can be

Page 49


heading for the

<details>

element.

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.



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

Page 50

</tr> <tr> <td>January</td> <td>$100</td> </tr></table>

Browser Support:

<table> tag is supported in all major browsers.


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

Page 51


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.


cols, rows, disabled, name, readonly, accesskey, class, style, id, lang, tabindex, title, xml:lang

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

Page 52

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


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> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td>

Page 53

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


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> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot>

Page 54

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



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

<table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr>

Page 55

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



<TITLE>Document title Essential

Code snippet:

<html>

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

Page 56

<body>The content of the document……</body>

</html>

Browser Support:

<title> tag is supported in all major browsers.


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:

<tr> tag is supported in all major browsers.



Page 57

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


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>

Browser Support:

<ul> tag is supported in all major browsers.


Page 58


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



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



<VIDEO>Use to specify

videos or movie

The <video> tag specifies video, such as a

movie clip or other video streams.

Page 59

clip.

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.


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.

Code snippet:

<p>To learn AJAX, you must be familiar with the XML<wbr>Http</wbr>Request

Page 60

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.



Page 61

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 W3C’s 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 62

http://www.w3.org/2003/12/semantic-extractor.html

Date post:	20-Apr-2015
Category:	Documents
Upload:	vikash-sharma
View:	45 times
Download:	0 times

SEO Sementic Coding

Documents