Learn how to build and design websites with our tutorials.

Introduction to HTML and HTML5

View Tutorial Contents


This introduction to HTML and HTML5 will provide you with the building blocks to build web pages that are standards compliant and with a best practices way of doing things. I will begin with a brief explanation of HTML, HTML5 and CSS so that you can get an understanding of the most basic parts that go into building a web page and so you can learn to begin building web pages the right way using best current practices.


What Is A Web Page?

A web page is simply a file with an .html or .htm extension (or .php, .asp or some other extension in many cases) that can be viewed by a web browser. HTML is what is used to create web pages which are usually uploaded to the internet.


What Is A Web Browser?

A web browser is what you are using right now to view this web page. A web browser is a software application on your computer, laptop, tablet, mobile device or whatever other device that may be used to view web pages.


What Is HTML?

HTML gives meaning to the parts and contents of a web page through the use of less than (<) and greater than (>) tags. HTML stands for Hyper Text Markup Language, although it's not really a programming language. A markup language is a set of markup tags, the less than (<) and greater than (>) tags. Each HTML tag or set of tags is used to define specific parts of an HTML document.


What Is XHTML?

XHTML is basically the same as HTML, but it is based on XML.


What Is HTML5?

HTML5 is the latest version of HTML standard. HTML5 is a set of new features that are not available in HTML. These features include form validation, media support (video and audio), better support for web applications to interact users, users' local data, servers and more. Support for HTML5 is great or very good in most web browsers and is constantly getting better.

HTML5 is still being developed and not all features are supported by all web browsers. If a feature in HTML5 is not supported by a web browser, the web browser will simply ignore it or fallback to using the HTML standard. In web design, this isn't usually a problem. The feature that is not supported by that particular web browser will simply not be available to that user. There are ways to detect wether a feature is supported and other ways of providing these features but that is beyond the scope of this tutorial.


What IS CSS?

CSS (Cascading Style Sheets) is used to add styles to the contents of an HTML page. We will go into CSS a bit later.


Barebones HTML Page

Below is a barebones HTML page. This page will not display anything because it does not have any actual content. The first line at the top (<!DOCTYPE html>) is not actually needed to create an HTML web page, but it is always added so the web browser that is being used to display the web page knows how to properly display the web page to the user.

The HTML file itself is begins with the <html lang="en"> tag and end with the </html> tag. The part of the HTML file that will be visible to the user is between the <body> and </body> tags.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

</body>
</html>


The HTML5 <!DOCTYPE> Declaration


<!DOCTYPE html>

The <!DOCTYPE> declaration tells the web browser what version of HTML to expect the file to be written in. The <!DOCTYPE> declaration has to be the very first thing in your HTML document

There are several <!DOCTYPE> declarations that can be used, however, the <!DOCTYPE> declaration shown above is the one that should be used so that your web pages can take advantage of the latest features that are available in HTML5.


The HTML <meta> charset Attribute


<meta charset="utf-8" />

The charset and attribute specifies the character encoding for that HTML file. The charset attribute in HTML5 is new and replaces the old HTML charset. The new HTML5 charset attribute shown above is the one that should be used when building web pages.


HTML Elements

HTML files are made up HTML elements. Most HTML elements are enclosed within a pair of tags, an opening tag and a closing tag. A few HTML elements are made up only one tag.

The code below is an example of a paragraph element (<p>). The "p", which represents a paragraph in HTML is enclosed within less than (<) and greater than (>) brackets. Notice that it has an opening tag and a closing tag and the closing has a forward slash (/) immediately following the first bracket. The HTML elements itself is everything that is within the opening and closing tags.


<p>This is a paragraph.</p>


Empty HTML Elements

HTML elements with no content, or that do not have an opening tag and a closing tag, are called empty elements. The most commonly used empty elements are:

<br>, <hr>, <img>, <input>, <link> and <meta>

It is recommended that you close empty elements by adding a forward slash (/) with an empty space before the forward slash before the ending greater than (>) bracket. For example:

<br />, <hr />, <img />, <input />, <link /> and <meta />


Nested HTML Elements

HTML elements can have HTML elements nested (contained) within them. In fact, all HTML files have nested HTML elements.

For example, in the code below, the <head>, <title> and <body> tags are nested within the <html lang="en"> tags. Also, the <title> tags are nested within the <head> tags and the <h1> tags are nested within the <body> tags

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<h1>Heading</h1>

</body>
</html> 

HTML tags are not case sensitive and the HTML5 standard does not require lowercase tags, but since the W3C recommends lowercase in HTML4 and demands the use of lowercase for XHTML and XML we recommend writing your HTML in lowercase.


The <html> Tag

The HTML elements itself is everything that is within the opening and closing tags. The <html> element defines the whole file.

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<h1>Heading</h1>

</body>
</html>

HTML Attributes

An HTML attribute is used to provide additional information about HTML elements and are placed inside the element's opening tag. All HTML elements can have attributes. HTML attributes are written in name/value pairs.

The name is the property that you want to set. The value is the value of the property that you want to set. Attribute names and values are case-insensitive, however, I recommend that you write all of your HTML in lowercase because the W3C recommends lowercase in HTML4 and demands the use of lowercase for XHTML and XML


The HTML lang Attribute

The <html> tag should have the language (lang) attribute declared within it. This declares the language of the document.

Declaring a language is important for applications such as screen readers and web browsers to display the content in the correct language. The first two letters of the language value specifies the language (en). If there is a dialect, the first two letters is followed by a dash (-) followed by two letters to specify the dialect.


<!DOCTYPE html>
<html lang="en-us">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

</body>
</html> 


The HTML href Attribute

The href attribute defines the document or application to which the link leads to. The document may be another document in the same directory, within the same page, a document that is somewhere else on the same server or the document can be on another server.

The link in the code example below links to another document in the same directory.



<a href="aboutUs.html">About Us</a>


The link in the code example below links to another document on the same server but in a different directory.



<a href="../apps/contactForm.html">Contact Us</a>


The link in the code example below links to another website.



<a href="http://learnwebsitedesign.com/">LearnWebsiteDesign.com</a>



The <body> Tag

The <body> element is what contains all of the contents of the HTML file, this includes the text, hyperlinks, images, lists, tables, etc. The contents of the <body> tags are what will appear on the web page.


HTML Headings

HTML headings are defined with the <h1> to <h6> tags and should be used to indicate headings and sub-headings within a document.

It is common practice to reserve the <h1> and <h2> headings for the major headings, for example, the title of a web page, and <h3> through <h6> level headings for sub-headings


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>

</body>
</html> 


HTML Paragraphs

HTML paragraphs are defined with the <p> tag:


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>