HTML, or HyperText Markup Language, is the foundational building block of the web. It’s a markup language used to structure content on web pages, defining elements like headings, paragraphs, images, and links.
The Role of HTML in Web Development
HTML acts as the skeleton of a webpage. While CSS (Cascading Style Sheets) adds styling, and JavaScript enables interactivity.
HTML focuses on content structure and semantics. For example, <h1> main headings or <p> for paragraphs tells browsers (and search engines) how to interpret and prioritize information.
Modern HTML5 has further expanded this role by introducing semantic elements like <header>, <nav>, and <article>, which improve accessibility and SEO by clarifying the purpose of each section.
To begin your journey as a full-stack software developer, enrol in our Software Engineering Online program today! You have a tutor and mentor to help you through this exciting journey.
Why Learn HTML Through Examples?
Reading about HTML concepts is helpful, but practicing with examples accelerates mastery. Here’s why:
- Hands-On Understanding: Writing code yourself reinforces syntax and logic.
- Immediate Feedback: Seeing how a <table> renders in-browser helps troubleshoot errors faster.
- Pattern Recognition: Repeating structures (e.g., nesting lists or forms) builds muscle memory.
For instance, instead of memorizing that <a href=”url”>Link</a> creates a hyperlink, trying it in a real project helps you grasp attributes like target=”_blank” for opening links in new tabs.
Basic HTML Examples for Beginners
HTML is all about structuring content in a way browsers understand. Let’s start with foundational examples that every web developer should master.
HTML Document Structure
Every HTML page begins with a boilerplate to define its core structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>- <!DOCTYPE html>: Declares the document type and HTML version (HTML5 here).
- <html lang=”en”>: The root element, with lang specifying the language.
- <head>: Contains metadata like the page title and character set.
- <body>: Holds visible content like text, images, and links.
Headings & Paragraphs
Headings (<h1> to <h6>) organize content hierarchically, while paragraphs (<p>) hold body text:
<h1>Main Title</h1>
<h2>Subheading</h2>
<p>This is a paragraph explaining something important.</p>
<h3>A Smaller Subheading</h3>
<p>Another paragraph with supporting details.</p>h1> is the highest-level heading (use once per page for SEO).
<h6> is the lowest. Always use headings in order (e.g., don’t skip from <h2> to <h4>).
Links and Images
Hyperlinks (<a>) connect pages, and images (<img>) display visuals:
<!– Link example –>
<a href="https://allthingsprogramming.com" target="_blank">Visit All Things Programming</a><!– Image example –>
<img src="image.jpg" alt="A developer coding on a laptop">- href: Specifies the link’s destination (URL).
- target=”_blank”: Opens the link in a new tab.
- src: Defines the image file path.
- alt: Provides descriptive text for accessibility and broken images.
Tip: Always include meaningful alt text for images to improve SEO and accessibility.
Lists
Organize items with unordered lists (bullets) or ordered lists (numbers):
<!-- Unordered list (bullets) -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Ordered list (numbers) -->
<ol>
<li>Preheat the oven</li>
<li>Mix ingredients</li>
<li>Bake for 30 minutes</li>
</ol>- <ul> and <ol> define the list type.
- <li> wraps each list item.
Pro Tip: Nest lists to create complex structures (e.g., a menu with sub-items).
Putting It All Together
Here’s a simple webpage combining these elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Basics Demo</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>Learn web development with practical examples.</p>
<a href="https://allthingsprogramming.com">Explore Tutorials</a>
<img src="coding.jpg" alt="Person typing code">
<h2>Core Languages</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>HTML Links and Anchors
Links are an essential part of web development, allowing users to navigate between web pages, sections within the same page, or external websites. In HTML, hyperlinks are created using the <a> (anchor) tag, which requires the href attribute to specify the destination URL.
Creating Hyperlinks
To create a basic hyperlink, use the <a> tag with an href attribute that contains the URL of the page you want to link to. For example:
html link
<a href="https://allthingsprogramming.com/">Visit All Things Programming</a>This will create a clickable link labeled “Visit All Things Programming” that directs users to the specified website when clicked.
Opening Links in a New Tab
By default, links open in the same tab. However, if you want the link to open in a new tab, you can add the target=”_blank” attribute. This is useful for keeping users on your site while allowing them to view external content. Example:
<a href="https://allthingsprogramming.com/" target="_blank">Open All Things Programming in a New Tab</a>The target=”_blank” attribute ensures that clicking the link opens a new browser tab, improving the user experience when linking to external resources.
Linking to an Internal Section Using Anchors
Anchors allow users to jump to specific sections within the same webpage. To create an anchor link, you first need to add an id attribute to the target section. Then, you can create a hyperlink that references this id using the # symbol.
Example:
<h2 id="contact">Contact Us</h2>
<p>If you have any questions, feel free to reach out.</p>
<a href="#contact">Go to Contact Section</a>When a user clicks on “Go to Contact Section,” the page will automatically scroll to the <h2 id=”contact”>Contact Us</h2> heading. This technique is handy for long web pages where quick navigation is needed.
HTML Images Example
Images enhance web pages by making content visually appealing and engaging. In HTML, images are added using the <img> tag, which does not have a closing tag. The src attribute specifies the image file’s location, while additional attributes help improve accessibility and layout.
Adding Images Using <img>
To insert an image into a webpage, use the <img> tag with the src attribute pointing to the image file’s URL or file path. For example:
<img src="example.jpg" alt="Beautiful landscape view">This code will display an image named “example.jpg” on the page. The image can be hosted locally or sourced from an external URL.
Using the alt Attribute for Accessibility
The alt (alternative text) attribute provides a textual description of the image, which is useful for visually impaired users relying on screen readers. Additionally, if the image fails to load, the alt text will be displayed instead.
Example:
<img src="logo.png" alt="Company Logo">In this case, if the image doesn’t load, users will see “Company Logo” as a text placeholder. The alt attribute also improves SEO by helping search engines understand the image content.
Image Resizing with width and height Attributes
To control an image’s dimensions, use the width and height attributes. These attributes accept values in pixels or percentages.
Example:
<img src="profile.jpg" alt="User Profile Picture" width="150" height="150">This ensures that the image is displayed at 150 pixels by 150 pixels, maintaining a fixed size. It’s essential to maintain the aspect ratio to prevent distortion—using CSS instead of the width and height attributes is often recommended for better responsiveness.
HTML Tables Example
Tables in HTML are used to organize data in a structured format with rows and columns. They are created using the <table> tag, with rows defined by <tr> (table row) and columns by <td> (table data). Additionally, headers can be added using <th>, and a title for the table can be set using <caption>.
Creating a Basic Table Using <table>
A simple table consists of the <table> tag containing rows (<tr>) and columns (<td>). Below is an example of a basic table:
<table border="1">
<tr>
<td>Apple</td>
<td>Fruit</td>
<td>Red</td>
</tr>
<tr>
<td>Carrot</td>
<td>Vegetable</td>
<td>Orange</td>
</tr>
</table>
This will create a table with two rows and three columns, displaying data about different food items. The border=”1″ attribute is used to add a border for better visibility.
Adding Rows (<tr>) and Columns (<td>)
Each table row (<tr>) contains columns (<td>), where data is stored. If we want to add more rows, we simply include additional <tr> elements.
Example:
<table border="1">
<tr>
<td>John Doe</td>
<td>28</td>
<td>Engineer</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Designer</td>
</tr>
</table>
Here, the table displays names, ages, and professions, with each row representing a different person.
Using Headers (<th>) and Captions (<caption>)
Headers (<th>) make table headings bold and centered by default, helping improve readability. Captions (<caption>) provide a title for the table.
Example:
<table border="1">
<caption>Employee Details</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
<tr>
<td>John Doe</td>
<td>28</td>
<td>Engineer</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Designer</td>
</tr>
</table>
Explanation:
- The <caption> tag adds a title: Employee Details.
- The first row uses <th> instead of <td>, making column headers bold.
- Each row represents a different employee, making the data clear and structured.
HTML Forms Example
Forms in HTML are used to collect user input, such as login credentials, search queries, and personal details. The <form> tag is used to define a form, and various input elements allow users to enter information.
Creating a Simple Form Using <form>
A basic HTML form consists of the <form> tag, input fields, and a submit button. The action attribute specifies where the form data will be sent when submitted.
Example:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br><br>
<button type="submit">Submit</button>
</form>Explanation:
- The <label> tag provides a description for input fields.
- The <input> tag is used to create text fields (e.g., name and email).
- The <button> tag submits the form when clicked.
- The method=”post” specifies that form data should be sent securely.
Input Types (<input>, <textarea>, <select>)
Forms support multiple input types to capture different kinds of data.
Example with Different Input Types:
<form action="/submit-feedback" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="30"></textarea>
<br><br>
<label for="country">Select Country:</label>
<select id="country" name="country">
<option value="kenya">Kenya</option>
<option value="uganda">Uganda</option>
<option value="tanzania">Tanzania</option>
</select>
<br><br>
<button type="submit">Submit Feedback</button>
</form>Explanation:
- The <input type=”password”> field ensures entered text is hidden for security.
- The <textarea> tag allows users to enter multi-line text.
- The <select> tag creates a dropdown menu for selecting a country.
- The required attribute ensures users fill out required fields before submitting.
Submitting Forms with a Button (<button>)
The <button> tag is used to submit forms. It can be styled or customized with JavaScript for enhanced functionality.
<button type="submit">Submit</button>This ensures that when clicked, the form data is sent to the server.
HTML Media Elements
HTML provides various media elements that allow embedding videos, audio files, and external content like maps or other websites. These elements enhance user engagement by adding interactive multimedia content.
Embedding Videos Using <video>
The <video> tag allows embedding video files directly into a webpage. It supports different formats such as MP4, WebM, and Ogg.
Example:
<video width="600" controls>
<source src="example-video.mp4" type="video/mp4">
<source src="example-video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
Explanation:
- The controls attribute adds play, pause, and volume buttons.
- The <source> tag allows adding multiple formats to ensure compatibility across different browsers.
- The text inside the <video> tag appears if the browser does not support videos.
Adding Audio with <audio>
The <audio> tag is used to embed sound files like music, podcasts, or notifications. It supports formats such as MP3, Ogg, and WAV.
Example:
<audio controls>
<source src="example-audio.mp3" type="audio/mpeg">
<source src="example-audio.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>Explanation:
- The controls attribute adds a play button and volume control.
- The <source> tag provides multiple formats for compatibility.
- If the browser does not support the audio format, a fallback message appears.
Using <iframe> to Embed External Content
The <iframe> tag allows embedding external content, such as YouTube videos, Google Maps, or other websites, directly into a webpage.
Example (Embedding a YouTube Video):
<iframe width="600" height="350" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>Example (Embedding Google Maps):
<iframe
width="600"
height="350"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434508616!2d144.96305781531855!3d-37.8162797420219!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d5df1f6fdf1%3A0x5045675218ce6e0!2sMelbourne%20VIC%2C%20Australia!5e0!3m2!1sen!2s!4v1632829123456"
frameborder="0"
allowfullscreen
></iframe>Explanation:
- The src attribute specifies the URL of the embedded content.
- The frameborder=”0″ removes the iframe border.
- The allowfullscreen attribute enables fullscreen mode for videos.
Advanced HTML Examples
HTML5 Semantic Elements (<header>, <article>, <section>)
Semantic elements in HTML5 improve the structure of a webpage by giving meaning to different sections of content. Instead of using generic <div> tags, semantic elements like <header>, <article>, and <section> make the webpage easier to read and understand for both developers and search engines.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<h1>Welcome to My Blog</h1>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<section>
<article>
<h2>Introduction to HTML5</h2>
<p>HTML5 introduces new semantic elements that improve document structure.</p>
</article>
</section>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>Explanation:
- <header> contains the website title and navigation links.
- <section> groups related content.
- <article> represents an independent content block (e.g., a blog post).
- <footer> holds copyright information.
Using semantic HTML improves SEO and makes content easier to maintain.
Creating a Simple Webpage Layout Using <div> and <span>
While semantic elements provide structure, <div> and <span> are useful for general layout design and inline styling.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div and Span Example</title>
<style>
.container {
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #ddd;
}
.box {
width: 30%;
display: inline-block;
padding: 10px;
background-color: lightblue;
text-align: center;
margin: 5px;
}
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>Using Div and Span</h2>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<p>This is an example of a <span class="highlight">highlighted word</span> using the span tag.</p>
</div>
</body>
</html>Explanation:
- <div class=”container”> is used for grouping and styling a page section.
- .box styles multiple <div> elements as blocks placed side by side.
- <span class=”highlight”> applies inline styling to part of a text.
This approach helps structure webpages and manage styles effectively.
Forms with Validation (required, pattern)
Form validation ensures that users enter correct data before submitting a form. HTML5 provides built-in validation features such as required and pattern.
Example:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" placeholder="Enter 10-digit number" required>
<br><br>
<button type="submit">Submit</button>
</form>Explanation:
- The required attribute ensures users fill in the field before submitting.
- The <input type=”email”> field automatically validates the correct email format.
- The pattern=”[0-9]{10}” enforces a 10-digit phone number format.
- The placeholder attribute provides a hint to users.
