Korea Hangeul Help Sitemap Calc Link KB
HTML/XHTML
This page summarizes extensible Hypertext markup language (XHTML) version 1.0

Mouse icon General
Mouse icon Basic Rules
  1. Tags (or element) are building blocks of XHTML/HTML.
  2. Must be well structured (nested boxes in a box).
  3. Must be well formatted to make the html file readable (provide comments in <!-- and -->).
  4. Use lowercases (although HTML is not casesensitive).
  5. <element_name ... attribute_name="value_of_attribute" ... >. Each element may have zero, one, or multiple attributes and their values. Always quote attribute values.
  6. All elements (tags) should be closed with a corresponding closing tag or />.
  7. Non-empty elements such as <meta ... />, <img ... />, <br .../>, <hr ... /> end with />.
  8. Multiple spaces are equivalent to single space.
  9. Use character entities references rather than special characters. (e.g., &amp; instead of &)
  10. Attribute minimization is not supported (e.g., style="noshade").
  11. Script and style elements (e.g., <script type="text/javascript">).
  12. Must use the "id" attribute instead of "name" when defining fragment identifiers.
  13. Do not use deprecated tags such as <font>.

Mouse icon First Glance

A HTML/XHTML document consists of head section and body section. The head section (<head>...</head>) provides information (e.g., description, author, and keywords) of the HTML/XHTML document that is not displayed, whereas the body section (<body>...</body>) provide actual contents to be displayed.

  • <!DOCTYPE...> classifies the type of a document and specifies a markup language used.
  • The root tag <html> ...</html> declares the beginning and end of the XHTML text.
  • <head> ...</head> declares the beginning and end of the head information (including title, abstract, author, key words, and date of last modification)
  • <body> ...</body> declares the beginning and end of the content. All "renderable" html tags should be located within the body element.

<!DOCTYPE ... >

<html> <!-- start of html -->

   <head> <!-- head section -->
      ...
   </head> <!-- end of head -->

   <body> <!-- body section -->
      ...
   </body> <!-- end of body -->

</html> <!-- end of html -->

<!DOCTYPE ... /> tag, document type definition, declares type of markup language used in the Web document and should appear at the beginning of a HTML/XHTML document. In general, the second example of XHTML 1.0 Transitional is recommended.

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML & CSS Tutorial 2 (First Web page) VLC icon 3 (Body and headers) VLC icon

Mouse icon Style & Script Elements

<style> and <script> used for embedded cascading style sheets and javascripts, respectively, as shown below. The user-defined styles "area_test" is called by "class" and "addres" by "id" in a HTML/XHTML document.

<style type="text/css">
   body {font: 10pt Arial; background-color:white; color:black;}
   p {font: 10pt Arial; color:black; text-align:left;}
   li {font:8pt 'Copperplate Gothic Light'; text-indent:0px;}

   a:link, a.popup:link {text-decoration:none; color:#242424;}
   a:visited, a.popup:visited {text-decoration:none; color:#242424;}
   a:hover, a.popup:hover {text-decoration:none; color:#9e032a;}
   a:active {text-decoration:none; color:maroon;}

   .area_text {font: 9pt Arial; color:#242424; line-height:150%;}
   #address {font: 8pt Arial; font-weight:normal;}
</style>

<script type="text/javascript">
function newWindow(url) {
   var address = url
   if (address != "") {
      window.open(address);
   }
}
</script>

Mouse icon Structure

The following tags are used to determine the structure of a HTML/XHTML document. In particular, <div> is used for laying out of a page, <p> for paragraph, and <br /> for line break. When you design a Web page, use <div> to determine your layout.

  • <div> (div element for grouping)
  • <p> (paragraph element)
  • <br /> (break element--inline element)
  • <hr /> (horizontal rule element)
  • <h1> <h2> <h3> <h4> <h5> <h6> (heading element)
  • <address> (address element)
<div class="">

   <hr />

   <h3>Heading 3</h3>

   <p>
   ...
   </p>
   ...

</div>

Both <div>...</div> and <span>...</span> add structure to the document. <div> creates a logical division between what comes before and what comes after. Span element <span>...</span> is used to control a part of paragraph. <div> is an block-level element, while <span> is an inline element that wraps up a phrase , a word, or a character without carriage return and/or line feed.

<p>He was a famous <span style="font-style:italic;">Congressman</span> who initiated ...</p>

<div>
   <h1>Chapter 1. Introduction</h1>
   <p>This chapter discusses...</p>
   <p>...</p>
</div>

Chapter 1. Introduction

This chapter discusses...

...

<div> is useful for lay-outing without <table> , which is least recommended in layout. The position attribute has five properties of static, absolute, relative, fixed, and inherit. See position examples. Some attribute values of the attribute position do not work in Microsoft Internet Explore (Javascript or other programs are needed at the expense of speed and compatibility).

<div style="position:absolute; left:500px; top:0px; width:240px; height:40px;">
<div style="position:relative padding:2px; border-bottom: 1px dotted #9e032a;">
<div style="position:fixed left:...;">

XHTML & CSS Tutorial 4 (Paragraphs and line breaks) VLC icon


Mouse icon Text [Detail]

You can control styles of texts using following tags. <span> is used to change styles of a part of a paragraph without chancing a new line. Use cascading style sheets for text styles (e.g., font type, size, weight, color, and indentation).

  • <span> (span element--inline element)
  • <strong> (strong element replacing "b")
  • <em> (emphasis element replacing "i")
<p><em>XHTML</em> (Extensible HTML) (version 1.0) is <span style="text-decoration:underline;">reformulation</span> of HTML 4.01 in XML, and combines the strength of <strong>HTML 4</strong> with the power of <strong>XML</strong>. Its first version was recommended in 2000 and version 2.0 in 2010. Version 2.0 does <span style="text-decoration:line-through;">not have</span> 100 percent backward compatibility.</p>

XHTML (Extensible HTML) (version 1.0) is reformulation of HTML 4.01 in XML, and combines the strength of HTML 4 with the power of XML. Its first version was recommended in 2000 and version 2.0 in 2010. Version 2.0 does not have 100 percent backward compatibility.

XHTML & CSS Tutorial 5 (Bold, italics, and comments) VLC icon

Mouse icon List [Detail]

You may use either ordered (<ol>)or unordered (<ul>) list tag to list data items that are defined in <li>. Definition list <dl> displays items in a formatted manner. <dt> and <dd> respectively denote title and definition.

  • <ol> (ordered list element)
  • <ul> (unordered list element)
  • <li> (list items)
  • <dl> (definition list)
  • <dt> (definition title)
  • <dd> (definition data)
  • <nl> <label> (label list)

Unordered list <ul> displays items with bullet characters rather than serial numbers. <li> denotes list item.

<label>Unordered List</label>

<ul>
   <li>Input</li>
   <li>Output</li>
   <li>Control</li>
</ul>

  • Input
  • Output
  • Control

Ordered list <ol> displays items with serial numbers or ordered characters. type="a" uses alphabets instead of the default numbers, while type="i" uses i, ii, iii, ...

<label>Ordered List</label>

<ol>
   <li>Input</li>
   <li type="a">Output</li>
   <li type="i">Control</li>
</ol>

  1. Input
  2. Output
  3. Control

Definition list <dl> displays items in a formatted manner. <dt> and <dd> respectively denote title and definition.

<label>Definition List</label>

<dl>
   <dt>HTML</dt>
   <dd>is a Web language</dd>
   <dt>CSS</dt>
   <dd>is cascading style sheets</dd>
</dl>

XHTML
is a Web language
CSS
is cascading style sheets

XHTML & CSS Tutorial 15 (Lists) VLC icon

Mouse icon Anchor & Hypertext [Detail]

Anchor element <a> links to a hyperlinked document (e.g., a text document and video/audio clip). The hypertext reference (href="") attribute specifies the URL or URI (address of the hyperlinked document). You may add "target" and "method" attributes.

  • <a href="http://..." >
  • <a href="..." >
  • <a href="#..." >
<a href="http://...">Hyperlink</a>
<a href="#top">Click here to get top</a>
<a href="... .jpg"><img src="... .jpg" /></a>

<a href="egov/present/xhtml_example.html">XHTML Examples</a>
XHTML Examples

URL can be either absolute address or relative address. An absolute address contains the full Internet address (URI or URL) including protocol used to request. A relative address points to the desired document's location relative to the location of the current document or internal document (where you are). Relative addresses are commonly used to points to internal links since it is efficient and easy to manage.

In order to move up to a parent directory, use .. as in ../images/iuj.jpg (move up from the current directory and then get down to images directory to get iuj.jpg). ../../index.html moves up to the parent directory and again its parent directory, and then points to index.html. pmis/pmis2013.pdf gets down to the child directory pmis and then reads pmis2013.pdf.

The identification attribute id="" attribute in an element plays a bookmark of a book. Add the attribute to the place where you want to remember. And provide "#..." as a URL in href="" (e.g., <a href="#week7">...). You may add a navigation bar to a Web page using id="" (bookmark) and anchor tag (call the bookmarked spot).

XHTML & CSS Tutorial 6 (Adding links to our Web page) VLC icon 7 (Creating a link within a Web page) VLC icon 8 (Email links and tool tips) VLC icon

Mouse icon Image [Detail]

Image tag is used to link a image in .png, .gif, and jpg (jpeg). In order for accessibility, provide a description of the image in the alternative attribute (alt).

You can control the image using attributes. width="..." height="..." border="..." When adding an anchor to an image, border="0" will be useful to suppress displaying the border of the image.

  • <img src="tiger.gif" alt="tiger icon" />(image element)
  • src="" (source attribute)
  • width="" (width attribute)
  • height="" (height attribute)
  • alt="" (alternate attribute)
<img src="../images/mouse.gif" width="20" alt="Mouse Image" />

<img src="http://gsim.iuj.ac.jp/img/thumb05.jpg" alt="IUJ" />
IUJ

Alternative attribute provides the content to be displayed when the designated image is not available. Therefore, alternative attribute is very important for improving accessibility.

XHTML & CSS Tutorial 9 (Adding images to the Web page) VLC icon 10 (Resizing Images) VLC icon

Mouse icon Table [Detail]

This element displays data and other information in a tabular format in a HTML/XHTML document. <table> constructs a table and has many related tags such as <tr> and <td>. Due to accessibility this tag is not recommended in particular for laying out a HTML/XHTML document. Its header, table body, and table footer tags are often complicated and need many <td> tags.

  • <table> (table element)
  • <th> (table header element)
  • <tr> (table row element)
  • <td> (table data element)
  • border="" (border attribute)
  • cellpadding="" (cellpadding attribute)
  • cellspacing="" (cellspacing attribute)
  • width="" (width attribute)
  • colspan="" (column span attribute)
  • rowspan="" (row span attribute)
  • thead (table head element)
  • tbody (table body element)
  • tfoot (table footer element)
  • <caption style="caption-side:top; font-weight:bold;">Examples</caption>
  • summary="" (summary attribute)

Table element <table>...</table> constructs a table. <table> has border, width, cellspacing, and cellpadding attributes to control the layout. An example is <table border="0" cellspacing="1" cellpadding="0" width="600" style="..."> Caption element <caption></caption> provides a caption of the table.

A table consists of table header <thead>...</thead>, table body <tbody>...</tbody>, and table footer <tfoot>...</tfoot>. Table row <tr>...</tr> defines a row of table header, footer, and body. Table cell contain table data <td>...</td> or table header <th>...</th>.

Table cells can span multiple rows and columns. Use column span (colspan) and row span (rowspan) attributes in a table cell. Examples are <td colspan="2"> and <td rowspan="3">

In table, summary="" is used to describe the table.

<table border="1" >

<thead>
   <tr>
      <th>Type</th>
      <th>Power</th>
      <th>Weight</th>
   </tr>
</thead>

<tbody>
   <tr>
      <th>KEF R300</th>
      <th>25-120W</th>
      <th>12Kg</th>
   </tr>

   <tr>
      <th>MA GX100</th>
      <th>60-120W</th>
      <th>9.9Kg</th>
   </tr>

</tbody>

</table>

Type Power Weight
KEF R300 25-120W 12Kg
MA GX100 60-120W 9.9Kg

<table border="1" cellpadding="0" cellspacing="0" width="300" >

<thead>
   <tr>
      <th>r1c1</th>
      <th>r1c2</th>
      <th>r1c3</th>
   </tr>
</thead>

<tbody>
   <tr>
      <td>r2c1</td>
      <td colspan="2">r2c2 and r2c3</td>
   </tr>

   <tr>
      <td>r3c1</td>
      <td rowspan="2">r3c2 and r4c2</td>
      <td>r3c3</td>
   </tr>

   <tr>
      <td>r4c1</td>
      <td>r4c3</td>
   </tr>

</tbody>

</table>

r1c1 r1c2 r1c3
r2c1 r2c2 and r2c3
r3c1 r3c2 and r4c2 r3c3
r4c1 r4c3

XHTML & CSS Tutorial 11 (Tables) VLC icon 12 (Table headers and movie stars!) VLC icon 13 (Colspan and annoying people) VLC icon 14(Table width, cellpadding, and cellspacing) VLC icon

Mouse icon Object

This generic tag allows you to link image, video/audio clips (shockwave), Java applets, and other objects.

<object>
...
</object>

Mouse icon Character Entity References    [List | Chart]
  • & (&amp;), ∞ (&infin;), ⊕ (&oplus;), ⋅ (&sdot;), √ (&radic;), ∴ (&there4;)
  • σ (&sigma;), μ (&mu;), α (&alpha;), β (&beta;), δ (&delta;), ρ (&rho;), γ (&gamma;)
  • Σ (&Sigma;), λ (&lambda;), χ (&chi;), κ (&kappa;), ω (&omega;), π (&pi;), θ (&theta;), τ (&tau;)
  • © (&copy;), ™ (&trade;), ® (&reg;), † (&dagger;), ‡ (&Dagger;)
  • ≈ (&asymp;), ≅ (&cong;), ≡ (&equiv;), ≠ (&ne;), × (&times;), ÷ (&divide;), ± (&plusmn;)
  • > (&gt;), ≥ (&ge;), < (&lt;), ≤ (&le;), ∧ (&and;), ∨ (&or;)
  • ∃ (&exist;), ∀ (&forall;), ∈ (&isin;), ∋ (&ni;), § (&sect;), ⊥ (&perp;), ∇ (&nabla;), ∝ (&prop;)
  • ∩ (&cap;), ∪ (&cup;), ⊂ (&sub;), ⊃ (&sup;), ⊆ (sube;), ⊇ (supe;)
  • « (&laquo;), » (&raquo;), “ (&ldquo;), " (&quot;), ” (&rdquo;), ″ (&Prime;)
  • ‹ (&lsaquo;), › (&rsaquo;), „ (&bdquo;), ‹ (&lsaquo;), › (&rsaquo;), ´ (&acute;)
  • ↓ (&darr;), ⇓ (&dArr;), ↑ (&uarr;), ⇑ (&uArr;), ↔ (&harr;), ⇔ (&hArr;)
  • ¦ (&brvbar;),   (&emsp;), … (&hellip;), ¶ (&para;), ˜ (&tilde;), º (&ordm;); ° (&deg;)
  • ♣ (&clubs;), ♠ (&spades;), ↵ (&crarr;), ♦ (&diams;), ◊ (&loz;), • (&bull;)