Overview
HTML (HyperText Markup Language) is the foundation of every webpage. It structures content using elements (or "tags"). In this tutorial, you'll learn:
- The basic structure of an HTML document.
- Common HTML elements.
- How to properly nest elements.
Step-by-Step Explanation
1. Document Structure & Doctype
Every HTML document starts with a declaration that tells the browser which version of HTML is being used. For HTML5, use:
<!DOCTYPE html>
Then, wrap all content inside the <html> element:
<html lang="en">
...
</html>
The lang attribute improves accessibility and SEO.
2. Head and Body Sections
An HTML document is divided into two main sections:
-
<head>: Contains metadata, such as the title, character set, and links to stylesheets. -
<body>: Contains visible content, such as text, images, and links.
3. Essential HTML Tags
Headings
HTML provides six levels of headings, from <h1> (largest) to <h6> (smallest):
<h1>Main Heading</h1>
<h2>Subheading</h2>
Paragraphs
Use <p> for text content:
<p>This is a paragraph.</p>
Lists
-
Unordered List (
<ul>): Uses bullet points. -
Ordered List (
<ol>): Uses numbers.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Images
Use the <img> tag to embed an image. Always include the alt attribute for accessibility:
<img src="image.jpg" alt="Description of image">
Links
The <a> tag defines hyperlinks:
<a href="https://www.example.com">Visit Example</a>
Interactive Coding Example
Open a code editor (or an online editor like CodePen or JSFiddle) and try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML Basics</h1>
<p>This is a paragraph introducing the page.</p>
<h3>My Favorite Things</h3>
<ul>
<li>Coding</li>
<li>Design</li>
<li>Gaming</li>
</ul>
<img src="https://media.istockphoto.com/id/2075908648/photo/engineer-man-hand-type-keyboard-input-configuration-data-ode-for-register-system-structure-or.webp?s=612x612&w=is&k=20&c=H3eN_gF30LRRvD9ex27D0kBRf7mBrzGr1uP9SK0BtwU=" alt="Placeholder image">
<br>
<a href="https://www.example.com">Visit Example.com</a>
</body>
</html>
Exercise
- Add another paragraph after the list.
- Change "My Favorite Things" to
<h2>and observe how it affects the page hierarchy.
Top comments (0)