An HTML document is a text file with the *.html extension that contains structured markup code written in Hypertext Markup Language (HTML). HTML is the standard markup language used to create and design web pages.
An HTML document consists of a combination of elements and attributes that define the structure, content, and formatting of the web page. For instance, elements like headings, paragraphs, lists, links, images, tables, and forms are fundamental building blocks.
An HTML document as a text file, typically named index.html, serves as the main entry point for a web application or website, providing the structure, content, and resources necessary for rendering the initial web page.
The file name “index.html” for HTML documents is a widely recognized and accepted convention for the main HTML file in web development, providing clarity, consistency, and compatibility across different web servers and projects. index.html file serves as the starting point for a web application or website, providing the initial structure and content that browsers use to render the page.
A basic HTML template
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Your website description goes here">
<meta name="keywords" content="keywords, separated, by, commas">
<meta name="author" content="Your Name">
<title>The website title</title>
<!-- External CSS -->
<link rel="stylesheet" href="styles.css">
<!-- External JavaScript -->
<script src="script.js" defer></script>
</head>
<body>
<!-- The content -->
</body>
</html>
<!DOCTYPE html>
declares the document type and version of HTML being used.<html>
is the root element that wraps all the content of the document.<head>
contains metadata, information about the document, internal and external resources such as the document title, scripts, styles, and other elements<meta>
elements provide metadata about the HTML document, such as character encoding, viewport settings, the website description, keywords, the author, and other metadata<title>
sets the title of the document, which appears in the browser’s title bar or tab.<body>
contains the main content of the document, including headings, paragraphs, links, images, and other elements.- Various HTML elements such as
<h1>
,<p>
, and<a>
are used to structure and format the content of the document.
An extended HTML template
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The website description">
<meta name="keywords" content="keywords, separated, by, commas">
<meta name="author" content="Author Name">
<title>The website title</title>
<!-- External CSS -->
<link rel="stylesheet" href="styles.css">
<!-- External JavaScript -->
<script src="script.js" defer></script>
</head>
<body>
<!-- The content -->
<header>
<h1>Website heading</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Section Title</h2>
<p>This is a paragraph.</p>
</section>
</main>
<footer>
<p>© 2024 Copyright info</p>
</footer>
</body>
</html>