HTML Stands for Hyper Text Markup Language. Hypertext is simply text that links to other information, and a markup language is a computer language that uses tags to define elements within a document.

Tags are the basic formatting tool used in HTML and other markup languages, such as XML. A tag is a keyword surrounded by angle brackets. Most tags come in pairs, with an opening tag and a closing tag. The closing tags are identical to the opening tags, but include a slash before the keyword.

Example 1:

<h1>New York is a beautiful city</h1>

The h1 tags describe a top heading. <h1> is the opening tag and </h1> is the closing tag. In our example above, “New York is a beautiful city” is called the content, and all three together are called an HTML element.

Browsers do not display the opening or closing tags; However, the tags tell the browser how to represent the content on the page.

Example 2:

<h1>New York is a beautiful city</h1>
<p>New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. Its iconic sites include skyscrapers such as the Empire State Building and sprawling Central Park.</p>

The browser will display the following:

New York is a beautiful city

New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. Its iconic sites include skyscrapers such as the Empire State Building and sprawling Central Park.

The tags were used to describe the nature of the content (<h1> for a top heading and <p> for paragraph), and will not be displayed on the page.

Without further ado, let’s create our first HTML5 page. Following the tradition of the “Hello World” examples that introduced us to so many languages, let’s create a webpage that simply displays the phrase “Hello world!”

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Hello World Example</title>
  </head>
  <body>
    <h1>Hello world!</h1>
  </body>
</html>

Here is how the browser interprets our hello world example:

<!DOCTYPE html> must be the first thing you specify in your HTML5 document. Even though it is not case sensitive, it is best practice to write it this way: <!DOCTYPE html>. The browser uses the DOCTYPE declaration to figure out the type of the document it is processing in order to display it correctly. The DOCTYPE also shows the version of HTML the page is written in.

HTML Versions

Since the early days of the web, there have been many versions of HTML:

Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

DOCTYPE Declarations

As far as our course is concerned, we will be using the <!DOCTYPE html> declaration in all our pages, but here are some of the DOCTYPE declarations that you may run into:

Version DOCTYPE
HTML 5 <!DOCTYPE html>
HTML 4.01 Strict <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd””>
HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
XHTML 1.1 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
XHTML 1.0 Strict <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
XHTML 1.0 Transitional <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
XHTML 1.0 Frameset <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

LEAVE A REPLY

Please enter your comment!
Please enter your name here