Course Content
HTML Tutorial
About Lesson

The basic structure of an HTML document.

HTML, or HyperText Markup Language, forms the backbone of web development. Every webpage you encounter is built using HTML. In this post, we will delve into the fundamental structure of an HTML document.

1. Document Type Declaration (<!DOCTYPE>)

Before creating any HTML document, it is crucial to define its document type. This declaration informs the browser which version of HTML to expect. For example:

<!DOCTYPE html>

2. HTML Element (<html>)

The <html> element wraps the entire content of your web page. It serves as the root element and is the starting point for structuring your document.

<html>
<!-- Your content goes here -->
</html>

3. Head Section (<head>)

Inside the <html> element, the <head> section contains metadata and links to external resources. This is where you define the title of your webpage, link to stylesheets, and include scripts.

<head>
<title>Your Page Title</title>
<!-- Other meta tags, stylesheets, and scripts -->
</head>

4. Meta Tags for SEO (<meta>)

Within the <head> section, use <meta> tags to provide information about your webpage, such as the character set, viewport settings, and description for search engines.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Brief description of your webpage for SEO">

5. Linking to Stylesheets and External Resources (<link>)

To enhance the styling of your HTML document, link external stylesheets within the <head> section.

<link rel="stylesheet" href="styles.css">

6. Body Section (<body>)

The <body> element encapsulates the visible content of your webpage, including text, images, links, and other elements.

<body>
<header>
<!-- Your header content -->
</header>

<main>
<!-- The main content of your webpage -->
</main>

<footer>
<!-- Footer content, such as copyright information or links -->
</footer>
</body>

7. Heading Elements (<h1> to <h6>)

Use heading elements to define the structure of your content. Headings range from <h1> (the highest level) to <h6> (the lowest level).

<h1>Main Heading</h1>
<p>Paragraph of text</p>

<h2>Subheading</h2>
<p>Another paragraph of text</p>

8. Paragraphs (<p>)

Structure your textual content using <p> tags. This enhances readability and helps search engines understand the context of your page.

<p>This is a paragraph of text in your HTML document.</p>