Understanding the Basic HTML Code Structure
HTML (Hypertext Markup Language) is the backbone of web development. It provides the structure and semantics for creating web pages. Understanding the basic HTML code structure is the foundation of building web content that can be rendered by web browsers.
In this article, we’ll explore the essential components of HTML and how to create a well-structured HTML document.
Basic HTML Structure
An HTML document has a specific structure that you need to follow to create valid web pages. The basic structure consists of the following components:
- Document Type Declaration (
<!DOCTYPE html>): Specifies the HTML version and document type. <html>Element: The root element that contains all the content on the web page.<head>Element: Contains meta-information about the document, such as the title and character encoding.<title>Element: Sets the title of the web page displayed in the browser’s title bar.<body>Element: Contains the visible content of the web page, including text, images, links, and more.
Before we proceed, you need to know what HTML tags and comments are, as you will see these two things later.
What are HTML Tags?
HTML documents are made up of HTML tags. Tags are enclosed in angle brackets (< >) and are used to define elements and their properties.
Tags come in pairs: an opening tag and a closing tag. The opening tag contains the element’s name, and the closing tag has the same name preceded by a forward slash (</>).
For example, here’s how you create a paragraph element using HTML tags:
<p>This is a paragraph of text.</p>What Are HTML Comments?
Web developers embed HTML comments within their HTML code as non-rendered, human-readable notes or annotations.
These comments are not visible in the web browser when a webpage is loaded and are meant for developers, not users.
HTML comments serve as a way to explain code, leave reminders, or temporarily disable sections of code without deleting them.
Syntax of HTML Comments
HTML comments are enclosed within <!-- and --> tags. Anything between these tags is treated as a comment and is ignored by web browsers when rendering the page.
<!-- This is an HTML comment -->1. The Document Type Declaration
Every HTML document should start with a document type declaration (<!DOCTYPE html>) to specify that it’s an HTML5 document. This declaration tells the web browser which version of HTML the document follows.
<!DOCTYPE html>2. The <html> Element
The <html> element is the root element of an HTML document. It wraps around all the content on the web page and contains all other elements.
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>3. The <head> Element
Inside the <html> element, you have the <head> element. The <head> section contains meta-information about the document, such as the character encoding and links to external resources like stylesheets and scripts.
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>My Web Page</title>
</head>4. The <title> Element
The <title> element, found within the <head> section, sets the title of the web page. This title is displayed in the browser’s title bar or tab.
<title>My Web Page</title>5. The <body> Element
The <body> element contains the visible content of your web page. This is where you place text, images, links, headings, and other elements that users will see and interact with.
<body>
<h1>Welcome to My Web Page</h1>
<p>This is some text on my web page.</p>
<!-- Other content goes here -->
</body>6. Example of a Complete HTML Document
Here’s a complete example of a basic HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is some text on my web page.</p>
</body>
</html>
Learn how to create an HTML page and run it in a browser.
