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">