HTML Introduction

What is HTML?

HTML is the language of the web. HTML is abbreviation for HyperText Markup Language. Let’s see what does it mean-

  • HyperText – When you browse a web page there usually are some links you can click to go other pages. Here, HyperText is the text that we click to jump to another page.
  • Markup –HTML document is nothing but lots the texts. A long web page without any heading, paragraph, list would be very hard to read. It is the Markup that makes unformatted text to human readable.
  • Language – HTML is considered a programming language. But, don’t worry it is really very easy to learn.

Every HTML page is a structured document

Every document we come across everyday has a structure. Consider any type of forms, magazines, newspapers, books etc. All have their own predefined structures. In a newspaper in each story there exist a title, a sub titles, few paragraphs, images, may be lists, tables and it might link to another page for the rest of the story.

A web page is no different than the usual documents. It has a structure too. If you see a web page you’ll find that it has a title (or heading), some paragraphs, images etc. HTML is used to structure the text (information) in the browsers so that it becomes human readable.

Compare a print document and a web page

Consider the following printed documented.

A sample document

Let’s write a similar web page in HTML (actually in HTML5 which is the latest version of HTML). Here is the HTML code for the above document.

First html script

How to write the HTML codes?

To see the output of the above HTML code in your browser, follow the steps-

  1. Open your default text editor (ex. Notepad on windows or TextEdit on MAC) in your system.
  2. Write the code in the text editor.
  3. Save it as webdev.html (REMEMBER: every html page has .html or .htm extension)
  4. Double click the webdev.html and you’ll see a web page similar to the above printed documented.

You just get a taste of HTML codes in the browser. If you see the above code in a browser you’ll see something following-

Browser output of the html page

Comparing the above HTML document and its output, you may have noticed that the text (orange colored) inside the angled brackets (ex. <h1>, <p> etc.) are not displayed in the browser, but the texts (black colored) surrounded by those orange colored angel texts are displayed in the browser. These orange colored texts help to formatting the output the way you’re seeing in the browser. These texts are HTML codes.

Let’s see what the above HTML codes mean-

In the above HTML codes (orange colored), you’ll see lots of angel brackets and one or more words inside those brackets (ex, <!DOCTYPE html>, <head>, </html> etc). These are called tags. Tags are normally come into pairs. In the above you’ll see <html> and</html>, <head> and</head>, <body> and </body> etc. tag pairs. Each end tag has a forward slash in front of it (ex. </html>).

Line 1: In the above HTML document, the first line is <!DOCTYPE html> which is short for Document Type Declaration. It must be the first line of the document. It tells the browser about the version number of the current HTML page. Here, the line is the doctype for version five (HTML5). Throughout this course, you’ll learn code for HTML5 which is the latest version.

After declaring this line, you’ll have to write codes according to HTML5 and the browser will also process the document according to that version.

Line 2: If you consider a HTML page as a series of nesting tag pairs (one tag pairs contain another), then the tag pairs <html> and </html>) which starts at line 2 and ends at line 23 is the outer most one. Anything you write inside these is considered as HTML codes.

Line 3: Within the <html> tag pairs, all the tags can be divided into two sections – head and body. The head sections starts with the <head> tag starts at line 3 and ends with </head> at line 6 (see the following picture). The information inside these tags is not displayed in the main browser’s window except the <title> tag. Content inside the <title> tags is displayed in the title bar or tab in the browser.

html has two main sections head and body

To keep our example simple, we haven’t added other tags inside the head section. Usually head section contains data about the page’s data (so it is called metadata). It may includes title of the web page; description, keywords, author of the web page, location of the css file (Learn more on it on CSS course) etc.

Line 4: To display HTML code in the output, browsers use character set to interpret HTML code. Here, <meta charset=utf-8> tag instructs browsers to use Unicode Transformation Format-8 as character set. Utf-8 character set is the best choice for the web. In HTML5, utf-8 is the default character set.

Line 5: <title></title> tags specifie title of the page that you can see in the top of the browser window. See the circle in the following picture.

title and body parts in html output

Line 7: The texts we see in the main browser window are written inside <body> and </body> tags. See the above bluish part in the picture.

Line 8: <h1> is the heading tag. Texts inside this tag displays as heading in the browser window. See the heading line “What you need to learn to become a web developer” in the above picture.

Line 9: <p> tag is paragraph tag. Texts inside <p> and </p> displays like a paragraph.

Line 12: When you want to display list of some items serially, use <ol> tag which is short for ordered list. In the code, the items HTML, CSS, JavaScript, PHP, MySQL are included inside <ol> (line 12) and </ol> (line 18) to make a list.

Line 13: Each item of the list is placed between <li> and </li>.

<< Course Overview : Previous Lesson Next Lesson : HTML History >>