Introduction to HTML


HTML Example

<!DOCTYPE html>
<html>
<head>    
    <meta charset="utf-8">    
    <title>TutorialFish (TutorialFish.com)</title>
</head>
<body>        
    <h1>My First Title</h1>        
    <p>My First Paragraph</p>
</body>
</html>

 Try It! 


Example analysis

image.png

  • <!DOCTYPE html> is declared as an 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: On the browser page, use the F12 key on the keyboard to turn on the debugging mode, and you can see the composition tags.



What is HTML?

HTML is a language used to describe web pages.

  • HTML refers to Hyper Text Markup Language

  • HTML is not a programming language, but a markup language

  • Markup Language is a set of markup tags

  • 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

<label>content</label>



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:

<p>This is a paragraph.</p>



Web Browser

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

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

image.png


HTML Page Structure

The following is a visual HTML page structure:

<html>  
<head>    
    <title>page title</title>  
</head>  
<body>    
    <h1>This is a headline</h1>    
    <p>This is a paragraph.</p>    
    <p>This is another paragraph.</p>  
</body>
</html>

NoteOnly the <body> area will be displayed in the browser.



HTML Version

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

VersionRelease time
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013



<!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 correctly display the content of the webpage.

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

<!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 page declaration type DOCTYPE reference manual. (Under Construction)


I18N Encoding

At present, in most browsers, I18N is garbled characters will appear when outputting i18N directly. At this time, we need to declare the characters as UTF-8 or specific encoding in the header.

Example

<!DOCTYPE html>
<html>
<head>    
    <meta charset="UTF-8">    
    <title>Page title</title>
</head>
<body>    
    <h1>My first title</h1>    
    <p>My first paragraph.</p>
</body>
</html>