Structure of an HTML Document

« Prev Next »

An HTML document is like a blueprint which directs the browser about what content to display on the webpage. The document consists of elements called tags which follow an exact hierarchical layout.

html-structure

Explanation about each section

<!DOCTYPE html>

  • Declares the document type as HTML5
  • Helps browsers render the page correctly

< html>

  • The root of the HTML document
  • Wraps the entire visible and hidden content

< head>

  • Contains metadata (not visible to users)
  • Common tags inside <head>
    • <title>: Page title (shown on browser tab)
    • <meta>: Page info (character set, author, description)
    • <link>: External files (CSS, fonts)
    • <style>: Internal CSS
    • <script>: JavaScript code or links

<body>

  • The visible part of the page
  • Contains all content like:
    • Headings (<h1> to <h6>)
    • Paragraphs (<p>)
    • Links (<a>)
    • Images (<img>)
    • Lists, tables, forms, etc.
<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple HTML document.</p>
</body>
</html>
Run ›
Tag Purpose
<!DOCTYPE> Declares HTML version (HTML5)
<html> Root element
<head> Metadata and resources
<title> Title of the page
<body> Visible content shown to the user
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.