Introduction to HTML

Hypertext Markup Language (HTML) is a mark-up language used to create web pages which can be interpreted and displayed by web browsers.

HTML 2.0 was first introduced in 1995 and has undergone many technical revisions and improvements over the years. A more in depth look into the evolution of HTML can be found here

The most common form of HTML in use today is Extensible Hypertext Markup Language (XHTML) an XML based implementation of HTML designed to provide increased interoperability and flexibility.

The remainder of this tutorial is going to focus on designing web pages using XHTML 1.0

 

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

<head>

<title>An XHTML 1.0 Strict standard template</title>

<meta http-equiv=”content-type”

content=”text/html;charset=utf-8″ />

</head> 

<body>

<h1>Your First Web Page</h1> 

<p>Your Content Here…</p> 

</body>

</html>

 

The code above will create an extremely basic web page, but a web page none the less. Copy the above code and paste into notepad; if you then save this file as example.html you can view the output in your web browser.

 

 

Note how the browser has interpreted the code and only displayed certain elements of the file.

 

We will now look at these sections in more details before moving on to the capabilities within XHTML.

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> 

 

DOCTYPE

The document type declaration (DTD) is a mandatory element of your web page and is used to inform the browser of the specific subset of HTML being referenced within your page. Each subset pertains to a particular syntax which permits / restricts the use of certain functionalities.

There are three DTD specifications within XHTML 1.0

STRICT

<!DOCTYPE html

PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

 

Transitional

<!DOCTYPE html

PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

 

Frameset

<!DOCTYPE html

PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

 

Each of the three variations of XHTML provides different guidelines on what can be contained within the pages they govern. XHTML Strict does not permit the use of presentational elements or deprecated tags. XHTML Transitional does permit the use of presentational elements and deprecated tags while XHTML Frameset is required when utilising frames within your pages.

Note: This tutorial is going to focus on using the XHTML Strict DTD; I feel it is the best option starting to learn Web Design as it will instil the need to write well formed pages which have total compliance to the requirements of the syntax used. 

 

<html xmlns=”http://www.w3.org/1999/xhtml”> 

HTML

The HTML element also known as the root element is the container for everything in your web page except the Doctype.

Each XHTML document requires the xmlns attribute. Versions of HTML do not require this and can be omitted. As we are focussing on XHTML, we are mandated to include it.

Note: An attribute is an extension of an element and is used to provide further information or extended features of an element.

 

<head>

<title>Your First Web Page</title>

<meta http-equiv=”content-type”

content=”text/html;charset=utf-8″ />

</head>

The HEAD Section

The <head> element of your code is not displayed by your web browser. It is purely instructional to the browser and provides additional information about the content of your web page.

The <title> element within your Head is a mandatory element of your page. The tile can be seen in the top bar of your browser and is extremely useful in terms of Search Engine Optimisation (a topic which we will look at in great detail at a later date)

The <meta> element can provide presentational instruction to your web browser. It is also used by Search Engines to retrieve data which will then be used to rank your page for any given search criteria.

The <script> element can be used within the <meta> tag to inform the browser of any additional scripting language used within your code.

Note: all tags within XHTML are written in lowercase; a requirement of XML application  

 

<body>

 

<h1>Your First Web Page</h1>

 

<p>Your Content Here…</p>

 

</body>

The Body

The <body> element contains the visible content of your web page. The body of your document can contain many different elements. Follow the link provided for a comprehensive List of available HTML Elements

Each element within XHTML begins with a start tag and finishes with an end tag:

 

Example 1:

 

<p>Input your text here</p>

 

Start tag: <p>

 

Content: Input your text here

 

End Tag: </p>

 

The above example utilises the <p> or paragraph element, it is one of the most common elements used and is intended for writing paragraphs of text

 

Example 2:

 

<h1>Welcome to The SEO Experiment</h1>

 

Start tag: <h1>

 

Content: Welcome to The SEO Experiment

 

End Tag: </h1>

 

The second example uses the <h1> or heading element, like the paragraph element is widely used to create headings which are displayed larger by default. There are 6 variations of the heading element: <h1>, <h2>, <h3>, <h4>, <h5> and <h6>; each of which displays text in different sizes <h1> being the largest and <h6> the smallest.

 

</html> 

The closing tag to the HTML element defined at the beginning of our code.

 

There is no better way to familiarise yourself with HTML elements than by putting them into practise.

Look out for my next tutorial which will put this information into practise and create a basic web page which we can use throughout our first web design project