yaki.be - webcoding tutorial

XHTML

The code that browsers understand and transform into visible sites, is HTML, a very easy markup language using tags to define the text that is contained: <markupTag>text</markupTag>.

A site is in fact nothing more than the site text stuffed with tags. Or better, a site is the content chopped into pieces, by tags containing content or other tags. Actually giving structure to the content by defining the different parts.

A text like this:

My Company Name: "we do have a slogan" menu: - about - products ABOUT: this is about the company PRODUCTS: find out more about our products

would become a website, once tagged:

<html> <body> <div id="header"> <h1>My Company Name</h1> <p>"we do have a slogan"</p> </div> <div id="menu"> <h2>site menu</h2> <ul> <li><a href="#about">about</a></li> <li><a href="#products">products</a></li> </ul> </div> <div id="about" class="section"> <h2>about</h2> <p>this is about the company</p> </div> <div id="products" class="section"> <h2>products</h2> <p>find out more about our products</p> </div> <a href="#menu">back to menu</a> </body> </html>

The used tagnames are predefined: the HTML language only allows certain names, e.g. H1 for the biggest title of a document, H2 for the second biggest title, P for paragraphs, LI for list items...
To identify a certain element, we use the 'id' attribute. The 'class' attribute is used to group elements of the same category.

To see the nested structure of tags of this site:

By the way, HTML or XHTML is a sub-language of the XML language (or better SGML), where it is allowed to use every tagname and attribute. XML is ideal for storing data, and in combination with the XML Styling Language (XSL), it can be transformed to XHTML code, visible as a site inside the browser.

previous: definitions | next: CSS