Introduction to HTML: Structuring the Web
Table of Contents
What is HTML?
HTML (Hypertext Markup Language) is the foundation of web development. It provides the structure and layout of web pages and helps to define elements like headings, paragraphs, links, and images. It provides the basic framework for a webpage by using elements (tags) to define different types of content, such as text, images, links, and more.
Why is HTML Important?
- It structures content on the web.
- It is the foundation of web development, working alongside CSS (for styling) and JavaScript (for interactivity).
- It is supported by all web browsers, making it a universal standard for web pages.
- It helps search engines understand and index web pages properly.
HTML Elements and Tags
HTML consists of elements, which are the building blocks of a webpage. Each element is represented using tags that define the type of content.
Opening and Closing Tags
Most HTML elements consist of an opening tag, content, and a closing tag:
<p>This is a paragraph.</p>
<p>→ Opening tag (defines the start of a paragraph)This is a paragraph.→ Content</p>→ Closing tag (indicates the end of the paragraph)
However, some tags do not have a closing tag. These are called self-closing or void elements, such as:
<img src="image.jpg" alt="Example Image">
<br>
<hr>
<img>: Inserts an image.<br>: Adds a line break.<hr>: Creates a horizontal line.
HTML Attributes
HTML elements can have attributes, which provide additional information about the element. Attributes are written inside the opening tag.
Example:
<a href="https://www.example.com">Visit Example</a>
<a>: Defines a hyperlink.href="https://www.example.com": Thehrefattribute specifies the destination URL.
Nesting Elements
HTML elements can be placed inside other elements, which is called nesting. However, proper structure must be maintained.
Example:
<div>
<h2>My Blog</h2>
<p>Welcome to my first blog post!</p>
</div>
<div>: A container that groups elements together.<h2>and<p>: Nested inside the<div>.
HTML Document Structure
A well-formed HTML document follows a specific structure:
<!DOCTYPE html>: Declares the document as HTML5.<html>: The root element that wraps all content.<head>: Contains metadata, links to stylesheets, and scripts.<body>: Contains all visible page content.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to HTML Basics</h1>
<p>This is a paragraph on my first webpage.</p>
</body>
</html>
Semantic HTML
Semantic HTML refers to using elements that convey the meaning of the content they hold. This improves accessibility and search engine optimization (SEO).
Examples:
<header>
<h1>Website Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<article>
<h2>Blog Post Title</h2>
<p>This is an article about HTML.</p>
</article>
<footer>
<p>© 2025 My Website</p>
</footer>
<header>: Represents the page header.<nav>: Contains navigation links.<article>: Represents self-contained content.<footer>: Defines the page footer.
HTML Entities
HTML entities are special codes used to display reserved characters.
Examples:
<p>< This is a less-than symbol</p>
<p>> This is a greater-than symbol</p>
<p>& This is an ampersand</p>
<→<(Less than)>→>(Greater than)&→&(Ampersand)
Comments in HTML
Comments help developers understand the code but are not displayed in the browser.
Example:
<!-- This is a comment -->
<p>This is a paragraph.</p>
Now, let’s look at the basic structure of an HTML document!
1. Basic Structure of an HTML Document
Every HTML document has a standard structure, beginning with the <!DOCTYPE html> declaration and followed by html, head, and body tags. Here’s the basic structure of an HTML file:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to HTML Basics</h1>
<p>This is a paragraph on my first webpage.</p>
</body>
</html>
<!DOCTYPE html>: Declares the document type as HTML5.<html>: The root element that wraps all HTML content.<head>: Contains meta-information, like the page title, which is shown in the browser tab.<title>: Sets the title of the page.<body>: Contains all the content displayed on the web page.
2. Headings (<h1> to <h6>)
Headings are essential for organizing content. HTML provides six heading tags, from <h1> (most important) to <h6> (least important).
<h1>This is a Main Heading</h1>
<h2>This is a Sub-heading</h2>
<h3>This is a Sub-sub-heading</h3>
3. Paragraphs (<p>)
The <p> tag is used for adding paragraphs.
<p>This is a paragraph. HTML paragraphs are automatically separated by a small margin.</p>
4. Links (<a>)
Links are created using the <a> tag, which has an href attribute to define the URL.
<a href="https://www.example.com">Visit Example</a>
5. Images (<img>)
The <img> tag displays images on a webpage. The src attribute specifies the image source, and the alt attribute provides alternate text.
<img src="image.jpg" alt="A descriptive text for the image">
6. Lists
HTML supports both ordered (<ol>) and unordered (<ul>) lists. Each list item is wrapped in <li> tags.
Unordered List (bulleted list):
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Ordered List (numbered list):
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
7. Divisions (<div>) and Spans (<span>)
<div>: A block-level container, often used for layout purposes.
<div>
<h2>Section Title</h2>
<p>This is a section of content.</p>
</div>
<span>: An inline container for text or small groups of elements, often used to style specific portions of text.
<p>This is a <span style="color: blue;">blue text</span> inside a paragraph.</p>
8. Tables (<table>)
Tables are used to display data in rows and columns.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
</tr>
</table>
<table>: Defines the table.<tr>: Defines a row.<th>: Defines a header cell (bold and centered).<td>: Defines a standard cell.
9. Forms (<form>)
Forms allow users to submit data. Here’s an example with text and submit inputs.
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<input type="submit" value="Submit">
</form>
10. Comments
Comments in HTML are written within <!-- -->. They’re not displayed in the browser but help document the code.
<!-- This is a comment -->
<p>This is a paragraph.</p>
Example:
<!DOCTYPE html>
<html>
<head>
<title>My Simple Web Page</title>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Welcome to My Web Page</h1>
<p>This is a simple webpage using basic HTML elements.</p>
</header>
<!-- Navigation Section -->
<nav>
<a href="#about">About</a> |
<a href="#services">Services</a> |
<a href="#contact">Contact</a>
</nav>
<!-- Main Content Section -->
<main>
<section id="about">
<h2>About Me</h2>
<p>Hello! I am a web development enthusiast learning HTML. This section contains some basic information about me.</p>
</section>
<section id="services">
<h2>My Services</h2>
<ul>
<li>Web Design</li>
<li>Content Creation</li>
<li>SEO Optimization</li>
</ul>
</section>
</main>
<!-- Contact Section -->
<section id="contact">
<h2>Contact Me</h2>
<p>You can reach me at <a href="mailto:example@example.com">example@example.com</a>.</p>
</section>
<!-- Footer Section -->
<footer>
<p>© 2024 My Simple Web Page</p>
</footer>
</body>
</html>
Learn HTML in 1 Hour
Here’s a video tutorial: