An HTML document is structured using a set of nested tags. Each tag is enclosed within <...> angle brackets and acts as a container for content or other HTML tags. Let's take a look at a basic HTML document structure:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
   <!-- content -->
</body>
</html>

This is how the title appears on an HTML page:

(Note: The title shows up in your browser tab, exactly as you type it between the title tags!)

A typical HTML page looks like this:

<html>
<head>
    <title>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>

Here's a breakdown of the key elements in a standard HTML page:

<!DOCTYPE html>: This declaration defines the document to be HTML5, ensuring the browser renders it correctly.
<html>: This is the root element of an HTML page, wrapping all the content on the entire page.
<head>: This element contains meta-information about the HTML page, such as its title, character set, styles, and links to scripts. It's the brain of your webpage!
<title>: This element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab). For example, Himanshu Dubey's Blog.
<body>: This element defines the document's body and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<h1>: This element defines a large heading.
<p>: This element defines a paragraph.

Understanding this structure is your first major step into mastering web development. Keep this template handy, as you'll use it for every single webpage you ever build!

💡 Himubey Tip

In VS Code, you can quickly generate this exact HTML boiler-plate by simply typing ! and hitting the Tab or Enter key. This will save you from memorizing and typing the structural tags every time!

Interview Questions

What does the <html> tag represent in an HTML document?
Why do we need the <head> tag if its contents are not visible on the webpage?
What is the purpose of the <!DOCTYPE html> declaration?