Home » Learn » HTML Tutorial » HTML Page Structure

HTML Page Structure

Every HTML page follows the same basic structure. Once you remember it, you can start any web page from this skeleton.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <h1>Main Heading</h1>
  <p>Page content goes here.</p>
</body>
</html>

Parts of an HTML page

PartMeaning
<!DOCTYPE html>Tells the browser that this is an HTML5 document. It must be the first line
<html>The root element. Everything else is inside it. The lang attribute gives the language of the page
<head>Information about the page: title, character set, styles, scripts. It is not shown on the page itself
<title>The title shown on the browser tab and in search results
<body>All the visible content: text, images, links, tables, forms

The DOCTYPE

The doctype is not an HTML tag, it is an instruction for the browser. Without it, browsers can go into “quirks mode” and show the page in an old and unpredictable way. In HTML5 it is simply <!DOCTYPE html>. It is not case-sensitive.

The html element and the lang attribute

The <html> tag wraps the whole page. Add lang="en" (or hi for Hindi, fr for French) so that search engines, screen readers and translation tools know the language.

The head element

The head has information for the browser and search engines. Important things to keep there:

  • <meta charset="UTF-8"> so that all characters show correctly.
  • <meta name="viewport" ...> so that the page looks right on mobile phones.
  • <title> for the page title.
  • Links to CSS files and scripts.

Learn more in HTML Head and Meta Tags.

The body element

Everything you want to show goes in the body. A page has only one body.

Summary

  • An HTML page = doctype + html + head + body.
  • The head has page information, and the body has the visible content.
  • Always add lang, charset and viewport.
  • Next: HTML Head.

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
What is DOCTYPE in HTML?