HTML5 Programming
The Foundation of Web Development: Beginner's Handbook
1. Introduction to HTML
HTML stands for HyperText Markup Language. It is the standard markup language for creating
web pages. It describes the structure of a web page semantically and originally included cues
for the appearance of the document.
Key Concept: HTML is not a programming language; it is a markup language. It uses tags
to "mark up" text so that browsers know how to display it.
The Evolution
HTML has evolved from a simple text-sharing tool to HTML5, which supports multimedia (video/
audio) and complex web applications without needing third-party plugins.
Page 1 of 10
2. Basic Document Structure
Every HTML5 document follows a specific skeleton. Without this structure, browsers might
struggle to render the page correctly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>Welcome to Web Dev</h1>
<p>This is a paragraph.</p>
</body>
</html>
Anatomy of a Tag
• <tagname>: The opening tag.
• Content: The actual text or media.
• </tagname>: The closing tag (identifiable by the slash).
Page 2 of 10
3. Text Formatting
HTML provides various tags to structure and emphasize text content.
Headings
There are six levels of headings, from <h1> (most important) to <h6> (least important).
Paragraphs and Spacing
• <p>: Defines a paragraph.
• <br>: A line break (self-closing).
• <hr>: A thematic break / horizontal rule.
Emphasis
• <strong>: Renders text bold (important).
• <em>: Renders text italic (emphasized).
Page 3 of 10
4. Lists
Lists are used to group related items together.
Unordered Lists (Bulleted)
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
Ordered Lists (Numbered)
<ol>
<li>Step One</li>
<li>Step Two</li>
</ol>
Page 4 of 10
5. Links and Navigation
The <a> (anchor) tag is used to create hyperlinks.
<a href="[Link] target="_blank">Visit Google</a>
Attributes:
• href: The destination URL.
• target="_blank": Opens the link in a new tab.
• title: Text displayed when hovering over the link.
Page 5 of 10
6. Images and Media
Images are embedded using the <img> tag. It is an "empty" element, meaning it has no closing
tag.
<img src="[Link]" alt="Description" width="300">
Accessibility Tip: Always include the alt attribute. Screen readers use this to describe
images to visually impaired users.
Page 6 of 10
7. Tables
Tables allow you to arrange data into rows and columns.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
<tr> = table row; <th> = table header; <td> = table data.
Page 7 of 10
8. Forms and Inputs
Forms are essential for collecting user data.
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Send">
</form>
Input Types
Common types include text , password , email , checkbox , and radio .
Page 8 of 10
9. Block vs. Inline Elements
Understanding how elements sit on the page is vital for layout.
• Block-level: Always starts on a new line and takes up the full width available (e.g., <div>,
<h1>, <p>).
• Inline: Does not start on a new line and only takes up as much width as necessary (e.g.,
<span>, <a>, <img>).
Page 9 of 10
10. Semantic HTML5
Semantic HTML means using tags that describe the meaning of the content, not just its
appearance.
Key Semantic Elements:
• <header>: For navigation or page headers.
• <nav>: For navigation links.
• <main>: The primary content of the document.
• <article>: Self-contained compositions (like blog posts).
• <footer>: For copyright and contact info.
This improves SEO and makes the code much easier to maintain.
Page 10 of 10