How to Structure a New HTML Document

HTML (HyperText Markup Language) is the backbone of web content, providing structure to the information displayed on websites. Every HTML document follows a basic structure that includes essential elements. Let's delve into the key components.

1. '<!DOCTYPE html>'

This declaration defines the document type and version of HTML being used. For modern web pages, it's customary to use '<!DOCTYPE html>'.

2. '<html>'

The root element encapsulates the entire HTML document.

3. '<head>'

The head section contains meta information about the document, such as the title, character set, and linked stylesheets.

4. '<title>'

This element sets the title of the HTML document, which appears in the browser tab or window.

5. '<body>'

The body element contains the content of the HTML document, including text, images, links, and more.

HTML Document Example

Now, let's put it all together in an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My HTML Document</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple example of an HTML document.</p>
    <img src="example.jpg" alt="An example image">
    <a href="https://www.example.com">Visit Example.com</a>
</body>
</html>

In this example, replace "My HTML Document" with your desired title and adjust the content within the '<body>' accordingly. Understanding this basic structure lays the foundation for creating well-organized, semantically meaningful web pages.

Bonus: Closing Tags

When composing an HTML page it's important to ensure that all the tags are properly closed, to avoid page flow and rendering issues. To help with this task, check our HTML Unclosed Tag Checker Tool to catch structural issues in your HTML code.

html document head body meta title div p img a h1 lang charset viewport