Introduction to HTML

Date Posted: 6/30/2020 Tutorial

47
Back

First, What is HTML?

HTML is stands for Hypertext Markup Language use to create web page.

Prerequisite
Note:
  • .html is the extension name of HTML document.

When to use HTML?

  • Creating website.
  • Creating landing page or advertisement page.
  • Creating email design.
  • Creating mobile design
  • Creating desktop application design

How to use HTML?

This is the HTML code basic format:

<h1 style="color:white;">Hello World!</h1>
  • <h1> is HTML tag and stands for Header 1 tag.
  • style is an HTML attribute and "color:#fff;" is the value of attribute.
  • Hello World is a content or text value of the HTML tag.
  • </h1> is closing HTML tag.

This is the basic HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>My Website Title</title>
</head>
<body>
    <h1>Header 1</h1>
</body>
</html>

This code is for declaration that the document is HTML type or contains a HTML code.

<!DOCTYPE html>

This code is HTML tag and have an attribute "lang" stands for language equals to "en" stands for English.

<html lang="en">

This code is an opening head tag.

<head>

This code is meta tag and have an attribute "charset" is a character set equals to "utf-8" stands for Unicode standard and compantible with ASCII.

<meta charset="utf-8" />

This code is title tag and have value "My Website Title" text.

<title>My Website Title</title>

This code are closing head tag and opening body tag. Inside the body tag is the content of the website.

</head>
<body>

This code is h1 tag (header 1) having value of "Header 1" text.

<h1>Header 1</h1>

This code are closing body tag and closing html tag.

</body>
</html>

Additional,

These codes are place inside the head tag.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="shortcut icon" href="/path/to/logo.ico" />
  • X-UA-Compatible meta tag, this code is use if you want to support the Internet Explorer (IE) 11. Remove this code if you want to support IE 8-9.
  • Viewport meta tag, this code is use to control the display on mobile browser.
  • shortcut icon link tag, this code is use to display icon beside the website title.

Final code,

website.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="shortcut icon" href="/path/to/logo.ico" />
    <title>My Website Title</title>
</head>
<body>
    <h1>Header 1</h1>
</body>
</html>

Save the file,

Save it to "website.html" then open it with your default browser.

Output:

My Website Title

Header 1

Advertisement: