leafleafleafDocy banner shape 01Docy banner shape 02Man illustrationFlower illustration

Introduction to HTML

Estimated reading: 4 minutes 31 views

HTML example

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Page Title</title>
    <h1>MY Heading Here</h1>
    <p>My first paragraph</p>

instance analysis

  • <!DOCTYPE html> declared as HTML5 document
  • The <html> element is the root element of an 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 large heading
  • The <p> element defines a paragraph

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

What is HTML?

HTML is a language used to describe web pages.

  • HTML stands for Hypertext Markup Language Hyper Text Markup Language
  • HTML is not a programming language, but a markup language
  • A markup language is a set of markup tags
  • HTML uses markup tags to describe web pages
  • HTML documents contain HTML tags and text content
  • HTML documents are also called web pages

HTML tags

HTML markup tags are often referred to as HTML tags.

  • HTML tags are keywords surrounded by angle brackets , such as <html>
  • HTML tags usually come 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
  • Opening and closing tags are also known as opening and closing tags

<tag> content </tag>

HTML element

“HTML tags” and “HTML elements” are often used to describe the same thing.

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

HTML element:<p> This is a paragraph. </p>

web browser

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

The browser does not display HTML tags directly, but can use tags to decide how to present the content of the HTML page to the user:

HTML page structure

The following is a visual HTML page structure:

<!DOCTYPE html>
<html lang="en">
    <title>Page Title</title>
NoteOnly the <body> area (the white part) will be displayed in the browser.

HTML version

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

HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000

<!DOCTYPE> declaration

The <!DOCTYPE> declaration helps browsers display web pages correctly.

There are many different files on the web, and if the HTML version is declared correctly, the browser will be able to display the content of the web page correctly.

doctype declarations are case-insensitive and can be used in the following ways:<!DOCTYPE html>


<!doctype html>

<!Doctype Html>

General statement


<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

Leave a Comment