HTML Introduction

Example

<!DOCTYPE html> 
<html>
  <head>
    <meta charset = " utf-8 ">
    <title> HTML tutorial </title>
  </head>
  <body>
    <h1> My first Title </h1>
    <p> My first paragraph. </p>
  </body>
</html>

Example analysis

  • <!DOCTYPE html> declared as HTML5 document
  • The <html> element is the root element of the HTML page
  • The <head> element contains the meta data of the document. For example, <meta charset=”utf-8″> defines the web page encoding format as utf-8 .
  • The <title> element describes the title of the document
  • The <body> element contains the visible page content
  • The <h1> element defines a headline
  • The <p> element defines a paragraph

Note: Use the F12 key on the keyboard to turn on the debugging mode on the browser page, and you can see the composition tags.

What is HTML?

HTML is a language used to describe web pages

  • HTML refers to Hypertext Markup Language: H yper T ext M arkup L anguage
  • HTML is not a programming language, but a markup language
  • Markup Language is a set of markup tags (markup tag)
  • HTML uses markup tags to describe web pages
  • HTML document contains HTML tags and text content
  • HTML documents are also called web pages

HTML tags

HTML tag tags are usually called HTML tags (HTML tags).

  • HTML tags are keywords surrounded by angle brackets , such as <html>
  • HTML tags usually appear in pairs , such as <b> and </b>
  • The first tag in the tag pair is the start tag , and the second tag is the end tag
  • Start and end tags are also called open tags and closed tags

HTML elements

“HTML tags” and “HTML elements” usually have the same meaning.

But strictly speaking, an HTML element contains a start tag and an end tag, as in the following example:

HTML elements:

Web browser

Web browsers (such as Google Chrome, Internet Explorer, Firefox, Safari) are used to read HTML files and display them as web pages.

Browsers are not directly displayed HTML tags, but you can use tags to decide how to display the content of the HTML page to the user:

HTML on browser

HTML page structure

The following is a visual HTML page structure:

HTML Page Structure

HTML version

Since the birth of the Internet, many HTML versions have appeared:

HTML Version Release Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML 5 2012
XHTML 5 2013

<!DOCTYPE> declaration

The <!DOCTYPE> declaration helps to display the web page correctly in the browser.

There are many different files on the Internet. If the HTML version can be correctly declared, the browser can display the content of the webpage correctly.

The doctype declaration is case-insensitive, and the following methods are acceptable:

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

General statement

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

XHTML 1.0

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

View the complete web declaration type DOCTYPE reference manual .