HTML Document Structure

An HTML document is made up of special keywords called Tags/Markers, written inside <> angle classes. These tags tell the web browser how to display content.

Each HTML document follows a specific structure. Here is what a introduction HTML code looks like:


     <!DOCTYPE html>
      <html lang="en">
      <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My First Website</title>
     </head>
     <body>
        <h1>Hello, Coders!</h1>
     </body>
     </html>

Let's Understand the Corridors

<!DOCTYPE html> : Tells the web browser that this is an HTML5 document.
<html>: The root of the web page. All content goes inside this tag.
<head> : Contains information about the webpage (like title, meta data, etc.).
<title>: The title that appears in the web browser tab.
<body>: The main content of your web page (like textbook, images, links).

How the Title is Displayed on an HTML web page

Do not worry if it feels new right now — we'll exercise this again and again until it becomes alternate nature.

An ordinary HTML web page appears as follows:


     <!DOCTYPE html>
     <html lang="en">
       <head>
         <title>web page Title</title>
       </head>
       <body>
         <h1>This is a heading</h1>
         <p>This is a paragraph.</p>
         <p>This is another paragraph.</p>
       </body>
     </html>

Nearly all websites follow this format. The primary content is placed within the <body> tag. Do not worry if this seems a bit complex; we'll simplify it!

Keep in mind that these are the crucial factors of a introduce HTML document:

<!DOCTYPE html>
<html>
<head>
<title>
<body>

Representation of an HTML Document

There’s a visual definition of the structure of an HTML document:

<!DOCTYPE html>: The protests lets the web browser know which explanation of HTML is in use.
<html>: The tag serves as the foundational element that contains all the content displayed on the browser.
</html>: The tag signifies the conclusion of the <html> section.
<head>: The element includes metadata and references to external links similar as CSS and JavaScript lines.
</head>: The tag signifies the conclusion of the <head> section.
<title>: The tag defines the title of a web browser, which appears in the title bar or tab of the web browser.
<body>: The tag holds the content that's displayed on the web page — text, images, and colorful other beginning.
</body>: The tag signifies the conclusion of the visible content on a web page.

How This Content Looks in a Web browser

Take a look at this HTML tag:


     <!DOCTYPE html>
     <html lang="en">
       <head>
         <title>My First Website</title>
       </head>
       <body>
         <h1>This is heading.</h1>
         <p>This is paragraph.</p>
       </body>
     </html>

The image below illustrates/decod/example how this HTML document will appear when viewed in a web browser:

(This image here showing a browser window with "Document" in the title bar, a heading "This is heading.", and a paragraph "This is paragraph." in the main content area.)

In the web browser, the title bar will show the information from the <title> section, particularly the tag. The primary area of the web browser window, which generally has a white background, will present the content set up within the <body> tag.

In the coming sections, we will explore HTML tag and elements.

Try it Yourself

Previous : Html-Execution Next : Html-Tags