HTML Introduction


Lesson 2 of 58

HTML is the standard markup language for creating Web pages.


What is HTML?

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc.

A Simple HTML Document

Example
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

  </body>
</html>

Try it Yourself

Try it Yourself

Example Explained

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the HTML page
  • The <title> element specifies a title for the HTML page shown in the browser’s title bar or page tab
  • The <body> element defines the document’s body and is a container for all the visible contents such as headings, paragraphs, images, links, tables and lists
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

Syntax
<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

Example
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start Tag Element Content End Tag
<h1> My First Heading </h1>
<p> My first paragraph </p>
<br> none none
Note: Some HTML elements have no content like the <br> element. These are called empty elements. Empty elements do not have an end tag.

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document.

Tip: You can right click any webpage in your browser and click View Page Source to see the raw HTML behind it.

HTML Page Structure

Below is a visualization of an HTML page structure:

Page Structure
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </body>
</html>
Note: Only content inside the <body> tag is displayed in the browser. Content inside <title> is shown in the browser’s title bar or tab.

HTML History

Year Version
1989Tim Berners-Lee invented www
1991Tim Berners-Lee invented HTML
1993Dave Raggett drafted HTML+
1995HTML Working Group defined HTML 2.0
1997W3C Recommendation: HTML 3.2
1999W3C Recommendation: HTML 4.01
2000W3C Recommendation: XHTML 1.0
2008WHATWG HTML5 First Public Draft
2012WHATWG HTML5 Living Standard
2014W3C Recommendation: HTML5
2016W3C Candidate Recommendation: HTML 5.1
2017W3C Recommendation: HTML5.1 2nd Edition
2017W3C Recommendation: HTML5.2

Lesson 2 of 58