Intro - XML Declaration - Doctype - Root Tag - Head and Title - Meta http-equiv - Meta name - Link - Style - Javascript - Languages and charsets
Old (HTML 4.01 Transitional) - Safe (HTML 4.01 Strict) - Normal (XHTML 1.0 Strict) - Progressive (XHTML 1.1) - Futuristic (XHTML 2.0)
Semantic add-on (Lot of meta tags) - My Template (Normal and semantic)
Web pages used to be simple:
<html> <head><title> Page Title </title></head> <body>...</body> </html>
No more today. XHTML, CSS and SEO changed even the most essential part of web page. It's structure and invisible elements. See this FAQ about HTML/XHTML at W3C and markup language page at W3C. Don't forget there are web standards.
Article concerning this topic (much shorter) at interval.cz (cs).
Skip for HTML. XHTML page is in fact an XML document so it should start with XML declaration. Template for XML declaration is (example follows):
<?xml version="_xml_version_" encoding="_document_charset_"?> <?xml version="1.0" encoding="windows-1250"?>
You must declare XML version. Default encoding is UTF-8, if you use it, you can leave out this attribute (even whole declaration). There are two problems with IE handling XHTML (cs):
Complete list of current DTDs - List with old HTML - Doctypes and browser modes - Quirk vs. Standard
HTML 4.01 specification - http://www.w3.org/TR/html4/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 specification - http://www.w3.org/TR/xhtml1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 specification - http://www.w3.org/TR/xhtml11/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 2.0 specification - http://www.w3.org/TR/xhtml2/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "TBD">
XHTML 2.0 is not backward compatible. There are some quite strange changes. E.g. IMG tag is replaced by multi-purpose OBJECT tag, IE don't handle this well. See his IE test on object tag in XHTML 2.0.
<html>
Pretty simple, huh?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="_page_language_" lang="_page_language_">
In XHTML 1.1 the lang attribute has been removed in favor of the xml:lang attribute. See list of languages in last section.
<html xmlns="http://www.w3.org/2002/06/xhtml2" xml:lang="_page_language_" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2002/06/xhtml2 TBD">
SEOchat.com - XHTML/CSS helping SEO at ALA - Czech portal on SEO (cs) - Vít Dlouhý's guide on SEO (cs)
<head><title>_page_title_</title></head>
Head tag can contain much more, keep reading.
<meta http-equiv="content-type" content="text/html; charset=_page_charset_"> <meta http-equiv="content-language" content="_page_language_">
For XHTML the content-type should be application/xhtml+xml. Beware of IE bug. For _page_charset_ and _page_language_ see lists in last section.
You may define default script and style type for page. To be precise w3c says if you set style attribute for elements you should set default style type and if you set on[somevent] attribute you should set default script type. But do you really think any browser supports this feature? I think it's needless useless bloat when only javascript and css are widely used.
<meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="_date_"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, must-revalidate">
I think, cache handling should be done in HTTP layer via server-side scripting (e.g. PHP, function header()).
<meta http-equiv="refresh" content="_seconds_to_wait_;URL=_url_address_where_to_go_"> <meta http-equiv="refresh" content="6;URL=http://www.domain.cz/dir">
<meta http-equiv="set-cookie" content="_name_=_value_;expires=_date_; path=_url_"> <meta http-equiv="set-cookie" content="feedme=1;expires=Wednesday, 08-Aug-00 23:59:59 GMT; path=/">
Expire date is in RFC850 format.
<meta http-equiv="imagetoolbar" content="_directive_"> <img src="_filename_" galleryimg="_directive_">
Where _directive_ is one of: yes, true, no, false. Lot of people use this to disable MSIE image toolbar. I think page should not disable something user is used to. It's like disabling tabbed browsing or context menu. I's up to user to decide whether he wants this feature.
<meta http-equiv="MSThemeCompatible" content="no">
No WinXP style (2k style used) for FORM elements and similar.
<meta http-equiv="pics-label" content=' (pics-1.1 "http://www.icra.org/ratingsv02.html" comment "ICRAonline EN v2.0"" l gen true for "http://www.skyzyx.com" r (nz 1 vz 1 lz 1 oz 1 cz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.skyzyx.com" r (n 0 s 0 v 0 l 0))'> <meta http-equiv="pics-label" content=' (pics-1.1 "http://www.icra.org/ratingsv02.html" comment "ICRAonline v2.0" l gen true for "http://machal.creativity.cz" r (nz 1 vz 1 lz 1 oz 1 cz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://machal.creativity.cz" r (n 0 s 0 v 0 l 0))'>
Seems quite complicated. See PICS specification at w3.org. Use PICS generator. IE supports PICS.
There is an infinite amount of web pages concerning Meta tags and SE/SEO. Read reasonable summary on meta tags. They are and are not key to victory in SEO.
Use them reasonably, choose only the meaningful ones. Unless you're making semantic web happen, meta tags like generator, owner, resource-type or revisit-after and similar are just junk text, pushing your title tag and real content far in page. Although they look like cutting-edge and progressive technology, you will see them only in some Page Info dialog in modern browser.
<meta name="author" content="_author_name_"> <meta name="author" content="All: _author_name_; mailto:_your@mail.here_"> <meta name="owner" content="_owner_of_the_page_"> <meta name="reply-to" content="_your@mail.here_ (_your_name_)"> <meta name="copyright" content="_your_copy_text_"> <meta name="generator" content="_name_of_your_editor_"> <meta name="publisher" content="_publisher_of_page_"> <meta name="designer" content="_designer_of_page_"> <meta name="keywords" content="_your_keywords_" lang="_main_language_"> <meta name="keywords" content="_your_keywords_" lang="_another_language_"> <meta name="description" content="_description_of_this_page_"> <meta name="abstract" content="_another_description_of_this_page_">
It seems that (in XHTML) every tag has lang attribute, so you may write you keywords, description and others in more languages. Useless I think (maybe my search engine will support that :-)).
<meta name="expires" content="_date_"> <meta name="date" content="_date_of_creation_"> <meta name="revisit-after" content="_number_ Days">
Document caching should be done via HTTP layer or at least meta http-equiv tags. Real meaning of these meta tags is not supported I think (agents prefer information from HTTP). Revisit-after tells crawlers how often to visit the page. People ask whether bots will comply with this requirement. It seems that none of major bots support revisit-after. In fact revisit-after was created for searchBC (Vancouver Webpages local search engine).
These tags describes document type and status. I've listed some possible values, but there is no authority and I doubt any support now. Use whatever fits and make semantic sense. Or better don't use.
<meta name="resource-type" content="document"> <meta name="doc-type" content="_document_type_"> <meta name="doc-class" content="_document_class_"> <meta name="classification" content="_page_classification_"> <meta name="page-topic" content="_page_topic_"> <meta name="distribution" content="_who_is_the_page_meant_for_"> <meta name="doc-rights" content="_copyright_status_">
Document is the only possible resource type now (that makes this tag quite useless). Possible document types are more, e.g eZine, Journal, Web Page (full list). Possible document classes are four, Living Document seems to me the most suitable for typical webpage. I found another one: "In progress" at wikiwiki.de. Possible distribution are: global, local, IU (Internal Use). Possible document rights are: Copywritten Work, Private, Public, Public Domain.
<meta name="rating" content="rating_of_page">
Possible rankings are (in form Rating description - Equivalent):
This rating is based on some others standards outside internet. If you really need some content rating, use PICS instead.
<meta name="language" content="_page_language_">
Language code (see language code list in last section) should be used but I saw just "English" too. I'd be astonished if this tag worked.
<meta name="robots" content="_directive_">
Possible directives are (comma separated if more than one):
See this robots meta tags summary for more directives and their support in search engines.
Consider using another technology - file named robots.txt. Read more about robots.txt and robots.
Google directives explained at google.com.
<meta name="googlebot" content="_directive_">
Google recognize following directives:
<meta name="DownloadOptions" content="_buttons_on_file_download_box_ie6winxpsp2_"> <meta name="ProgId" content="_programmatic_identifier_of_the_document's_default_editor_"> <meta name="Template" content="_location_of_the_template_used_to_edit_the_document_">
<meta name="MSSmartTagsPreventParsing" content="true">
Smart tags seems not to be active now in fact never implemented in any final product.
http://www.html-reference.com/META.htm - http://vancouver-webpages.com/META/
Defined by Dublin Core Metadata Initiative, an open forum engaged in the development of interoperable online metadata standards that support a broad range of purposes and business models. Sounds too good to work on www now.
<meta name="dc._label_" content="_content_of_label_"> <meta name="dc.Title" content="Moje stránka">
Some DC labels are: Title, Format, Rights, etc. Full list of Dublin Core labels at their homepage. Czech page about Dublin Core.
They're many ways how to include geo information into web page. They're interesting but moreover unusable today.
See homepage of geo tags. If you want them, try geo meta tags generator.
<meta name="geo.position" content="_latitude;longitude_both_in_decimal_degrees_using_the_WGS84_datum_"> <meta name="geo.placename" content="_free_text_describing_your_location_"> <meta name="geo.region" content="_geographic_region_from_ISO3166-2_"> <meta name="geo.country" content="_your_country_code_from_ISO3166_">
For geo.country and geo.region - see list of country codes.
Another geo tag, in fact geoUrl. The second tag is from Dublin Core.
<meta name="icbm" content="_same_as_geo.position_above_"> <meta name="dc.title" content="_name_of_your_site_">
You can get required information (latitude and longitude) at http://www.maporama.com/share/.
<link rel="shortcut icon" href="/file_name.ico" type="image/ico"> <link rel="shortcut icon" href="file_name.ico" type="image/x-icon"> <link rel="icon" href="file_name.ico" type="image/x-icon">
IE6 seems to me to support only "*.ico" and needs some refresh (and adding to Favourites before) to display icon in address bar. IE5 looks for "favicon.ico" automatically so file_name should better be "favicon.ico". However Mozilla (tested on 1.7.2) and Opera (tested on 7.50) support even JPEG (and of course GIF and PNG, just include right MIME type) and simple page reload (just F5) is enough to change favicon in address bar. Even MNG is supported.
Even worse, IE recognize only "shortcut icon", while for Mozilla and Opera is "icon" just enough.
Right MIME for "*.ico" is image/x-icon according to this discussion comment 21. And more follows here and there. Seems to me too, see info at IANA.
How to create favicons from Yuhů.
Not working in IE, but useful in Mozilla and derivated, Opera and many others. See accessibility guide to find out why it's useful. See extensive list with explanation. See screenshots and even more extensive list. See W3C recommendation on link types. Download LinkBar for IE so that you can use it in IE too.
<link rel="_relation_" title="_title_optional_" href="_url_of_the_rel_page_">
Possible relations are too many to show them all (47 mentioned in even more extensive list above). Most useful only are listed (similar on one line):
The rel and rev attributes play complementary roles. The rel attribute specifies a forward link and the rev attribute specifies a reverse link. Consider two documents A and B.
<link href="docB" rel="foo"><link href="docA" rev="foo">Both attributes have exactly the same meaning and may be specified simultaneously.
<link rel="alternate" type="_type_of_alternate_page_" href="_url_of_alternate_page_" hreflang="_language_" lang="_language_" charset="_charset_of_alternate_page_" media="_media_print_" title="_title_of_alternate_page_">
Examples of use:
<link rel="alternate" type="application/rss+xml" title="Main RSS 2.0 (Full Content)" href="http://www.domain.com/rss/rss.xml"><link rel="alternate" type="text/vnd.wap.wml" title="WML" href="http://www.domain.com/wap.wml"><link rel="alternate" href="/print/dist.pdf" type="application/pdf" media="print" title="PDF version"><link rel="alternate" href="index.fr.html" hreflang="fr" lang="fr" title="Version fran�aise"><link title="The manual in Arabic" type="text/html" rel="alternate" charset="ISO-8859-6" hreflang="ar" href="/manual/arabic.html"><link rel="stylesheet" href="_url_of_stylesheet_" media="_target_media_" title="_optional_title_">
Possible media:
You may specify alternate stylesheet:
<link rel="alternate stylesheet" href="_url_of_stylesheet_" media="_target_media_" title="_optional_title_">
Quick guide to alternate stylesheets - Alternate stylesheet switching via javascript.
Both of above in Czech at interval.cz (cs).
There are three ways how to include stylesheet into web page. Media attribute is the same for all of them - it was described above along with the first way using link element. Two others use style tag.
<style media="_media_type_" type="text/css">@import "_file_name_.css"</style>
You can include external *.css file as stylesheet with the @import command
<style media="_media_type_" type="text/css">_style_</style>
_style_ must be in CSS syntax. If the page is to be XHTML valid, CSS text must be in CDATA section - special XML command, content is parsed as plain text rather than as XML (similar to pre in HTML).
/*<![CDATA[*/
body {
background-color: green;
}
...
/*]]>*/
<script language="javascript" type="text/javascript" src="_file_name_.js"></script>
In XHTML, the language attribute is deprecated in favour of type attribute and it's safe to leave it out unless you need specific version (like "JavaScript1.2").
You may include script directly in the page (for XHTML use CDATA):
<script language="javascript" type="text/javascript">
//<![CDATA[
function fact(n) {
if (n < 2) return 1;
return fact(n-1)*n;
}
...
//]]>
</script>
Finally the body tag.
<body> ... _page_content_ ... </body> </html>
Prefer semantic tags against meaningless div and span:
W3C Language Tag Recommendations shows:
All information about specifying language in XHTML from W3C.
All information about character sets and XHTML. Some most used characters sets (fourth and fifth is for Central Europe):
The best date format and in fact internet standard is GMT format (e.g. Tues, 31 Dec 2002 09:29:59 GMT). There are others like RFC850 format (e.g. 31 Dec 2002) or just YYYY-DD-MM and similar. The format only matters if it is to be understand by agent (HTTP protocol).
It's old, default in many HTML editors and widely used. This doctype should not be used now (but better than nothing). It's here just for historical reasons, so it's really short.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=_page_charset_"> <title>_page_title_</title> </head> <body> _page_content_ </body> </html>
If your project must support really old browsers and you don't want to mess up with XML/XHTML, consider using this one. It's at least strict version (for fanatics) and still HTML (for safety). It's still good enough these days, but I prefer the next one.
Ready to copy-and-paste web page template. Fill in _missing_fields_, delete unwanted lines.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=_page_charset_"> <meta http-equiv="content-language" content="_page_language_"> <title>_page_title_</title> <meta name="robots" content="index,follow"> <meta name="keywords" content="_your_keywords_"> <meta name="description" content="_description_of_this_page_"> <meta http-equiv="pics-label" content='_get_your_pics_ranking_'> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="_url_.css" media="all" /> <script type="text/javascript" src="_url_.js"></script> </head> <body> _page_content_ </body> </html>
XML coming... I think web pages should use this doctype and following template. Nowadays it isn't cutting-edge technology. It's widely supported, together with RSS (and RDF, Atom) it's good choice.
Ready to copy-and-paste web page template. Fill in _missing_fields_, delete unwanted lines.
<?xml version="1.0" encoding="_page_encoding_"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="_page_language_" lang="_page_language_"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=_page_encoding_" /> <meta http-equiv="content-language" content="_page_language_" /> <!-- place cache handling here --> <title>_page_title_</title> <meta name="robots" content="index,follow" /> <meta name="keywords" content="_your_keywords_" /> <meta name="description" content="_description_of_this_page_" /> <meta http-equiv="pics-label" content='_get_your_pics_ranking_' /> <meta name="author" content="_author_name_" /> <meta name="copyright" content="_your_copy_text_" /> <!-- place semantic add-on here --> <link rel="alternate" type="application/rss+xml" title="_rss_title_" href="_rss_url_" /> <link rel="home" title="_title_optional_" href="_url_of_the_rel_page_" /> <link rel="top" title="_title_optional_" href="_url_of_the_rel_page_" /> <link rel="first" title="_title_optional_" href="_url_of_the_rel_page_" /> <link rel="last" title="_title_optional_" href="_url_of_the_rel_page_" /> <link rel="next" title="_title_optional_" href="_url_of_the_rel_page_" /> <link rel="prev" title="_title_optional_" href="_url_of_the_rel_page_" /> <link rel="up" title="_title_optional_" href="_url_of_the_rel_page_" /> <link rel="contents" title="_title_optional_" href="_url_of_the_rel_page_" /> <!-- search, help, glossary, author, copyright --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="_url_.css" media="screen" /> <link rel="stylesheet" href="_url_.css" media="print" /> <script type="text/javascript" src="_url_.js"></script> </head> <body> _page_content_ </body> </html>
XHTML is being developed as HTML was. XHTML became modularized. It's easy to put XHTML, SVG, MathML together in one document. Yes, it's more an XML document than a webpage.
<?xml version="1.0" encoding="_page_encoding_"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="_page_language_"> <head> <!-- head content is the same as above --> </head> <body> _page_content_ </body> </html>
Still not enough? This is cutting-edge technology, not supported enough, with many unpleasant issues. Enjoy!
<?xml version="1.0" encoding="_page_encoding_"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "TBD"> <html xmlns="http://www.w3.org/2002/06/xhtml2" xml:lang="_page_language_" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2002/06/xhtml2 TBD"> <head> <!-- head content is the same as above --> </head> <body> _page_content_ </body> </html>
Most of the following meta tags are not supported by user agents neither web crawlers, but who would support something what is not used. So use it, add sense to your web pages, make them machine-readable (or even computer-understandable). Hope it will make them supported. Make semantic web happen.
Ready to copy-and-paste semantic meta tags. Fill in _missing_fields_, delete unwanted lines. It's in XHTML, who would use it in HTML?
<meta name="author" content="All: _author_name_; mailto:_your@mail.here_" /> <meta name="owner" content="_owner_of_the_page_" /> <meta name="reply-to" content="_your@mail.here_ (_your_name_)" /> <meta name="generator" content="_name_of_your_editor_" /> <meta name="publisher" content="_publisher_of_page_" /> <meta name="abstract" content="_another_description_of_this_page_" /> <meta name="resource-type" content="document" /> <meta name="doc-type" content="_document_type_(Web Page)_" /> <meta name="doc-class" content="_document_class_(Living Document)_" /> <meta name="classification" content="_page_classification_" /> <meta name="page-topic" content="_page_topic_" /> <meta name="distribution" content="_who_is_the_page_meant_for_(global)_" /> <meta name="doc-rights" content="_copyright_status_(Copywritten Work / Public Domain)_" /> <meta name="language" content="_page_language_" /> <meta name="geo.position" content="_latitude;longitude_both_in_decimal_degrees_using_the_WGS84_datum_" /> <meta name="geo.placename" content="_free_text_describing_your_location_" /> <meta name="geo.region" content="_geographic_region_from_ISO3166-2_" /> <meta name="geo.country" content="_your_country_code_from_ISO3166_" /> <meta name="icbm" content="_same_as_geo.position_above_" /> <meta name="dc.title" content="_name_of_your_site_" />
Ready to copy-and-paste my web page template. Fill in _missing_fields_, delete unwanted lines.
<?xml version="1.0" encoding="_page_encoding_"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=_page_encoding_" /> <meta http-equiv="content-language" content="cs" /> <title>_page_title_</title> <meta name="robots" content="index,follow" /> <meta name="keywords" content="_your_keywords_" /> <meta name="description" content="_description_of_this_page_" /> <meta http-equiv="pics-label" content='_get_your_pics_ranking_' /> <meta name="author" content="_author_name_" /> <meta name="copyright" content="_your_copy_text_" /> <meta name="doc-class" content="Living Document" /> <meta name="distribution" content="Global" /> <meta name="doc-rights" content="_Copywritten Work_or_Public_or_Public Domain_" /> <meta name="geo.position" content="50.0953;14.4108" /> <meta name="geo.placename" content="Praha, Czech Republic" /> <meta name="geo.region" content="CZ-PRG" /> <meta name="geo.country" content="CZ" /> <!-- geo above is too cool, I ussualy use only the folowing one --> <meta name="icbm" content="50.0953;14.4108" /> <meta name="dc.title" content="_name_of_your_site_" /> <link rel="alternate" type="application/rss+xml" title="_rss_title_" href="_rss_url_" /> <link rel="home" title="_title_optional_" href="_url_of_the_rel_page_" /> <link rel="top" title="_title_optional_" href="_url_of_the_rel_page_" /> <link rel="first" title="_title_optional_" href="_url_of_the_rel_page_" /> <link rel="last" title="_title_optional_" href="_url_of_the_rel_page_" /> <link rel="next" title="_title_optional_" href="_url_of_the_rel_page_" /> <link rel="prev" title="_title_optional_" href="_url_of_the_rel_page_" /> <link rel="up" title="_title_optional_" href="_url_of_the_rel_page_" /> <link rel="contents" title="_title_optional_" href="_url_of_the_rel_page_" /> <!-- search, help, glossary, author, copyright --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="_url_.css" media="screen" /> <link rel="stylesheet" href="_url_.css" media="print" /> <script type="text/javascript" src="_url_.js"></script> </head> <body> _page_content_ </body> </html>