HTML Tutorial

Basic Structure of HTML

1 minute

Basic Structure of HTML

​<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Title</title>
</head>
<body>
  <!-- Page Content Goes Here -->
</body>
</html>

​!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

Breakdown:

  • <!DOCTYPE html> → Defines HTML5 document.
  • <html lang="en"> → Root element with language attribute.
  • <head> → Metadata (title, character set, viewport).
  • <body> → Visible content of the webpage.

Doctype (<!DOCTYPE html>) and Document Setup

  • The <!DOCTYPE html> declaration tells the browser which version of HTML the page is written in.

  • In modern websites, it ensures the browser uses HTML5 standard mode (not old quirks mode).

    👉 Always put it at the very top of every HTML file.

Example:

​
<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

​


Metadata (<meta> Tag)
Metadata gives extra information about the page to browsers & search engines.
Example:

<meta charset="UTF-8">
<meta name="description" content="Free HTML tutorial for beginners">
<meta name="keywords" content="HTML, CSS, Web development">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

​

 

 

 

 

 

 

Previous
Article 3 of 14
Next