Knol will be unavailable during scheduled maintenance starting at Mon, 09 Nov 2009 18:30:00 GMT. We expect the maintenance to be completed at Mon, 09 Nov 2009 20:00:00 GMT.
Version: Baidi441

HTML

HyperText Markup Language Tutorial/Knol

HyperText Markup Language, A Demonstration, Doctypes, and Attributes.

HyperText Markup Language


HTML is a Markup Language used to markup text in Documents and Websites. An HTML file is a text file with the .html or .htm extension and included markup code in form of Tags, the tags in html are used to indicate paragraphs, headings, emphasized text, etc.

HTML was and is still used to layout pages, however this practice is outdated, and is only making the html harder to maintain. Most attributes and elements used for presentation has been deprecated, meaning that they should generally be avoided in favor for the better alternatives. HTML is widely used together with CSS to separate as much content from style as possible, and to make it easier to make layout related changes.

CSS dose not only make it easier to maintain a website, it also makes it easier to create the website.

Demonstration

The below is a simple example, using the strict Doctype of HTML 4.01. The "lang" attribute on the html tag helps search engines, and user agents to determine the language on your site, the attribute is required for your code to validate.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
    <title>This is my first Website</title>
  </head>

  <body>
    <h1>My First Website.</h1>
    <p>Hello, this is my first website!</p>
    <p>This is another paragraph.<br>with a single linebreak.</p>
  </body>

</html>

The Doctype Declaration

Browsers will by default render websites in backwards compatibility mode, aka quirks mode. That is unless it manages to find a valid doctype declaration. The browser goes into standards mode if a doctype is found, and this is to prefer since web designers otherwise may not be able to get their pages to render equally in all browsers.

The HTML Doctypes

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

The XHTML Doctypes

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The Transitional, frameset and Strict Doctypes

The Transitional doctype is used when you want to include deprecated elements and attributes, while the strict doctype closer reflects current recommendations, those may be anything from usage of certain tags, to individual attributes. Although lists of deprecated attributes and elements exists, its more or less pointless to list those, and better to keep an eye on current and new recommendations.

The frameset doctypes are used for pages which contain frames. Also note that the XHTML1.1 Doctype is different from the other XHTML doctypes, in that the other doctypes allowed for more presentational components.

Validation

While validation is important, experianced web designers might chose to leave out the validation process to save time, also note that many errors may be intended and non-fetal to the rendering of a page.

Elements

In HTML we have what is known as Block Elements, and Inline Elements. Understanding the differance is important when focusing on standard-based layouts.
 
You should check out the Reference for more information, linked in the bottom of the Article.
 

Attributes

Attributes in html are written by their name in the opening tag, followed by the equal sign "=" and a quoted or unquated value, it is recommended that you always quote your attribute values. Some of the more common attributes today are listed below.

  1. class
  2. id
  3. alt
  4. title
  5. src
  6. href

For a full list, you should check the reference entry HTML Attributes at Brugbart.

The class Attribute

This attribute is used to "group" elements. Used in conjuction with css, this may be used to easily apply styling to groups of elements, example follows.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
    <title>Usage of the class attribute</title>
    <style type="text/css">
      .Blue {
        color: blue;
      }
      .Purple {
        color: blue;
      }
     </style>
  </head>

  <body>
    <h1>Usage of the class attribute.</h1>
      <p class="Blue">This paragraph is written in blue.</p>
      <p><a href="http://www.brugbart.com/" class="Blue">Tutorials/References</a></p>
      <p><a href="http://validator.w3.org/" class="Purple">The W3C Markup Validation Service</a></p>
  </body>

</html>

The id Attribute

The id attribute is similar to the class attribute, the important differance is that a given id must not be repeated, since id is used for unique identification. The number sign is used when dealing with id selectors, see below:

<style type="text/css">
  #Blue {
    color: blue;
  }
  #Purple {
    color: blue;
  }
</style>

Note. Ids must begin with a letter, using numbers will throw out an error when validating.

The attribute is also used when linking to sections in a document, the Number sign "#" is used at the end of URLs, followed by the id of the element linked to, this is usually the headlines (h1-h6), see below:

<body>
  <h1 id="Section1">The id attribute Explained.</h1>
  <p class="Blue">The id attribute is used for unique identification.</p>
  <h2 id="Section2">Subsection.</h2>
  <p class="Blue">This is just a demonstration.</p>
</body>

The above sections can be linked to by entering the normal URL I.E. index.html followed by the number sign "#" and the id, full URL would be index.html#Section2, note that this can also be combined with URL parameters, the id would simply be placed after any URL parameters. In case of linking to a section in the main page, it might be better to simply type /#Section2, which uses a root relative path, See also: Absolute and Relative Paths.

The alt Attribute

This attribute is used to display alternative text for Screen Readers, and devices with less functionality such as handheld devices. It may also be useful for people who have limited brandwidth, since those may on a rare occasion disable loading of graphics. It would also be useful for people who have disabled flash.

Finally the alt attribute may be of some use to search engines, since those won't understand information displayed in I.E. Images.

<body>
  <h1 id="Section1">Alt Attribute Example.</h1>
  <p><img src="MyImage.png" alt="Example Image"></p>
</body>

The title Attribute

Used to apply a subdescription to an element, most browsers will render this as a tooltip when hovered.
<body>
  <h1 id="Section1">Title Attribute Example.</h1>
  <p><a href="http://www.brugbart.com/" title="Learn By Doing - Brugbart.com">Tutorials/References.</a></p>
</body>

The src Attribute

The src Attribute stands for "source" and is used on img elements, to link to an image.

<body>
  <p><img src="images/yourimage.png" alt="An Image"></p>
</body>

Images must be inclosed in other block level elements, I.E. paragraphs.

The href Attribute

The href attribute is used to link to resources such as StyleSheets, or favicons. Even other documents and websites, the destination of the anchor is defined with a URI.

<head>
  <!-- resources -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link href="/templates/Blue.css" rel="stylesheet" type="text/css">
</head>

<body>
  <!-- Links -->
  <p>Follow <a href="http://www.brugbart.com/">This Link</a> to visit my website.</p>
</body>

HTML vs XHTML

There are few benefits from using XHTML, generally most users wont benefit from using XHTML. The main benefit from using XHTML, is that you can mix XHTML with other XML based languages, such as SMIL or SVG. If you are just using XHTML alone, then you might as well simply use HTML4.01 Strict. More info at: http://www.w3.org/MarkUp/2004/xhtml-faq#advantages

Releted Knols

  1. CSS - Cascading Style Sheets Tutorial/Knol

Links

  1. Brugbarts HTML Reference
  2. The W3C Markup Validation Service - Used to check code for errors.

Comments

Article rating:
Your rating:
All Rights Reserved.
Version: 33
Versions
Last edited: Jul 8, 2009 8:39 AM.

Activity for this knol

This week:

21pageviews

Totals:

1620pageviews
©2009 Google