DEV Community

Jaya Sudha
Jaya Sudha

Posted on

HTML Basics: Understanding the Basic Structure of an HTML Document

HTML
HTML (HyperText Markup Language) is the standard language used to create webpages. It tells the browser how to display content using tags.

Structure of an HTML Document
An HTML document is a file that contains HTML code. It has a predefined structure that tells the browser how to display the web page.
Let’s understand the structure using a simple example.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Structure of HTML Document</title>
</head>
<body>
    <!-- Main content of website -->
    <h1>Welcome</h1>
    <p>Beginner friendly blogs</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

1. <!DOCTYPE html>
This tag indicates the version of the HTML. In this case, it indicates that the document is written in HTML5, which is the latest version of HTML.

2. <html>
The <html> tag is the root element of an HTML document, and the lang="en" attribute specifies that the content language is English, which improves accessibility and SEO.

3. <head>
The <head> section contains configuration information such as the page title, styles, and scripts that are required for the webpage but are not visible to users.

4. <title>Structure of HTML Document</title>
The <title> tag defines the title of the webpage shown in the browser tab.

5. <body>
The <body> tag contains all the content that is visible to users on the webpage. It includes text, images, buttons, forms, etc.

<!-- Main content of website -->
HTML comments are used to document code and it is not displayed in the browser. It is used for code readability and notes for developers.

Common Tags Found Inside the<body>

Text and Structure
<h1> to <h6> are HTML heading tags used to define headings in a web page.
They represent different levels of importance, where:
<h1> is the most important and largest heading
<h6> is the least important and smallest heading

<p>: Paragraphs of text.

<div>: A general-purpose container for grouping other elements for styling with CSS or manipulation with JavaScript.

<span>: An inline element for grouping small parts of text for styling.

<br>: Inserts a single line break.

<hr>: Represents a horizontal line.

Lists

  • <ul>: Unordered (bulleted) lists.
  • <ol>: Ordered (numbered) lists.
  • <li>: Individual list items within <ul> or <ol> tags.

Links and Media
<a>: Hyperlinks, used to link to other pages or resources.
<img>: Embeds an image in the document.
<video>: Embeds video content.
<audio>: Embeds audio content

Note: Embeds are used to display external resources inside a web page.

Tables
<table>: Defines a table for displaying tabular data.
<tr>, <th>, <td>: Table rows, headers, and data cells, respectively.

Semantic Elements
Semantic tags make the code easy to understand, help screen readers, and improve SEO.
For example, replacing <div>tags with semantic tags like <header> and <article> makes the code more readable, accessible, and SEO-friendly.

Screen readers are software programs that read web content aloud for visually impaired users.

SEO stands for Search Engine Optimization. It’s the practice of improving a website so that search engines like Google can understand it and show it higher in search results, helping more people visit your site.

Commonly used semantic HTML tags:

<header>– Represents the header of a page or section (usually contains navigation, logo, etc.).

<nav> – Defines a navigation menu with links.

<main> – Represents the main content of the page (should be unique per page).

<section> – Defines a thematic section of content, usually with a heading.

<article> – Represents independent content, like blog posts, news articles, or forum posts.

<aside> – Defines content aside from the main content, like sidebars, ads, or widgets.

<footer> – Represents the footer of a page or section (usually contains copyright, links, contact info).

Benefits of semantic HTML:

  • Improves SEO – search engines understand your content.
  • Increases accessibility – screen readers can read content aloud.
  • Makes code organized and readable.

Conclusion
Understanding the basic structure of an HTML document is essential for beginners. Use semantic tags, write clear headings, and make your pages accessible. These practices improve both user experience and SEO.

Top comments (0)