HTML (HyperText Markup Language) is the standard language for creating web pages. It uses tags to structure and present content on the web. This tutorial will introduce you to the most commonly used basic HTML tags with explanations and examples.
1. Basic Structure of an HTML Document
An HTML document follows a simple structure using key tags like <html>, <head>, and <body>.
Example 1: HTML Page Structure
<!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 My First HTML Page</h1>
<p>This is a simple example of a basic HTML structure.</p>
</body>
</html>
Explanation:
- <!DOCTYPE html>: Defines the document type as HTML5.
- <html>: Root element that wraps all the content.
- <head>: Contains meta-information about the page (e.g., title, charset).
- <title>: Sets the title of the web page.
- <body>: Contains the visible content of the web page.
2. Headings
HTML provides six levels of headings, from <h1> to <h6>. <h1> is the largest and most important, while <h6> is the smallest.
Example 2: Headings
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings Example</title>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>
</html>
Output:
You will see six headings, each with decreasing size.
3. Paragraphs
Paragraphs are defined using the <p> tag. It separates blocks of text with line breaks.
Example 3: Paragraphs
<!DOCTYPE html>
<html>
<head>
<title>HTML Paragraphs</title>
</head>
<body>
<p>This is my first paragraph. It is displayed in a block format.</p>
<p>This is my second paragraph. Paragraphs automatically add space between blocks.</p>
</body>
</html>
Output:
Each <p> tag creates a new paragraph with space between lines.
4. Line Breaks and Horizontal Rules
- <br>: Creates a line break within content.
- <hr>: Creates a horizontal rule (a line).
Example 4: Line Breaks and Horizontal Rules
<!DOCTYPE html>
<html>
<head>
<title>Line Breaks and Horizontal Rules</title>
</head>
<body>
<p>This is the first line.<br>This is the second line after a line break.</p>
<hr>
<p>Content above and below this line is separated by a horizontal rule.</p>
</body>
</html>
Output:
- <br> forces a line break.
- <hr> creates a horizontal line across the page.
5. Formatting Tags
HTML provides tags to format text, such as bold, italic, and more.
Example 5: Formatting Text
<!DOCTYPE html>
<html>
<head>
<title>HTML Formatting</title>
</head>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italicized</i></p>
<p><u>This text is underlined</u></p>
<p><strong>This is important text</strong></p>
<p><em>This text is emphasized</em></p>
</body>
</html>
Explanation:
- <b>: Makes text bold (visual only).
- <i>: Makes text italic (visual only).
- <u>: Underlines the text.
- <strong>: Semantically important bold text.
- <em>: Semantically emphasizes text with italics.
6. Lists
HTML supports two types of lists:
- Ordered List (<ol>) – Displays items in a numbered list.
- Unordered List (<ul>) – Displays items with bullets.
Example 6: Ordered and Unordered Lists
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h2>Ordered List</h2>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</body>
</html>
Output:
- <ol> creates a numbered list.
- <ul> creates a bulleted list.
- <li> defines each list item.
7. Links
Links allow users to navigate between web pages using the <a> tag.
Example 7: Hyperlinks
<!DOCTYPE html>
<html>
<head>
<title>HTML Links</title>
</head>
<body>
<h2>Visit Google</h2>
<p>Click <a href="https://www.google.com" target="_blank">here</a> to visit Google.</p>
</body>
</html>
Explanation:
- The href attribute specifies the link URL.
- The target=”_blank” attribute opens the link in a new tab.
8. Images
You can include images on a webpage using the <img> tag.
Example 8: Adding an Image
<!DOCTYPE html>
<html>
<head>
<title>HTML Images</title>
</head>
<body>
<h2>Example Image</h2>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>
</html>
Explanation:
- src: Specifies the image path or URL.
- alt: Provides alternative text for accessibility.
9. Comments
Comments are not displayed on the web page but are useful for notes in the code. Use <!– –> for comments.
Example 9: Comments in HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Comments</title>
</head>
<body>
<!-- This is a comment and will not appear in the browser -->
<p>Comments help developers understand the code.</p>
</body>
</html>
Conclusion
In this tutorial, you learned about basic HTML tags that form the foundation of any webpage. Here’s a summary of the tags covered:
- Structure: <html>, <head>, <body>, <title>.
- Headings: <h1> to <h6>.
- Text: <p>, <b>, <i>, <u>, <strong>, <em>.
- Lists: <ol>, <ul>, <li>.
- Links: <a>.
- Images: <img>.
- Miscellaneous: <br>, <hr>, and comments.
Practice using these tags to build simple web pages. Once comfortable, you can explore more advanced concepts like CSS for styling and JavaScript for interactivity.