HTML 5 is an extension of XHTML, HTML 4 and CSS3 designed to work with XML user agents. It incorporates MathML (Mathematical Markup Language) and SVG (Scalable Vector Graphics) into HTML. It introduces new elements - header, footer, article, section, menu, nav, audio, and video. HTML is an application of SGML (Standard Generalized Markup Language). SGML is the de facto standard for describing markup languages particularly those used in electronic format but not necessarily for the internet. SGML is both rich and complex. HTML on the other hand specifies only a small set of structural and semantic tags. HTML has support for hypertext and multimedia. The first line of an HTML document must start with an DOCTYPE declaration.
<!DOCTYPE html>
The root element of an HTML document must be html.
This is followed by the meta tag. The meta element allows search engine to know what is in the web page without having to go through every line. This element has two main attributes: name and content. You can also specify the characterset. The name attribute can have two values keywords or description. The meta element is placed in the head section of the page.
<meta name = "keywords" content = "HTML, Paragraphs, Headers, Lists, Tables, Forms" />
<meta name = "description" content = "This page gives a brief introduction to the HTML syntax." />
<meta name = "author" content = "Alan Turing" />
<meta charset = "UTF-8" />
Use the <p> tag to delineate paragraphs. For pre-formatted text use <pre> instead. The pre element tells browsers that the enclosed text is pre-formatted. The browser may then leave white space intact, render text with fixed pitch font, and disable automatic word wrap.
Header are of the form hn where n runs from 1 through 6. These are the different types of headers:
A link could take the viewer to a resource on the same
computer or on a different computer. The syntax for the
link is:
<a href = "path/to/file"> ... </a>
The path could be an absolute path like an url or a relative
path. Here are some of my favorite links:
An internal link would take the viewer to a different part of the same document. For example this internal link will take me to the section on forms. Note the use of tags.
This will bring up an e-mail form in case you want to send me mail. My e-mail address is mitra@cs.utexas.edu
Use the <img> element to include graphics. The height and width attributes are given in pixels. Here is a picture of a galaxy NGC 1300 taken by the Hubble Space Telescope.
Line breaks are introduced with < br />. We have purposely
broken the line.
Now we will introduce a horizontal line with the <hr /> element.
Here is a list of special characters in HTML. You can write these characters in two ways - either using the English mnemonic or the hexadecimal code. For example the ampersand symbol can be written as: & or &
A table has a border, caption, head, foot, and body. The body is made out of cells spanning rows and columns. Here is a simple table:
| Type | Population |
|---|---|
| Total | 17470 |
| Black Rhino | 3610 |
| White Rhino | 11100 |
| Indian Rhino | 2400 |
| Javan Rhino | 60 |
| Sumatran Rhino | 300 |
Here is an example of a more complex table
| 1 | 2 | |
| 3 | 4 | |
A form has the following components:
A form must also specify the method by which the data is transported - GET or POST. Also the script on the server side that will process the form data. To neatly align and present the form elements use borderless nested tables. Here is an example of a simple survey form.