HTML Tutorial
Introduction to HTML
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page and consists of a series of elements that tell the browser how to display content.
What is HTML?
HyperText- Text that contains links to other texts, not limited to linear readingMarkup Language- Uses tags to annotate text within a document to define structure and layoutHTML Document- File with .html extension containing HTML code that browsers can render
Basic HTML Document Structure
Every HTML document follows a standard structure that includes essential elements for proper rendering.
html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document Title</title>
7</head>
8<body>
9 <!-- Content goes here -->
10 <h1>My First Heading</h1>
11 <p>My first paragraph.</p>
12</body>
13</html>Key Structural Elements
<!DOCTYPE html>- Declares the document type and HTML version (HTML5)<html>- Root element that wraps all content on the page<head>- Contains meta-information about the document<body>- Contains all visible content of the web page
HTML Attributes
Attributes provide additional information about HTML elements and are always specified in the opening tag.
html
1<!-- Attributes provide additional information -->
2<a href="https://example.com" title="Visit Example">Click Here</a>
3
4<img src="photo.jpg" alt="A beautiful landscape" width="500" height="300">
5
6<div class="container" id="main-content" data-category="tutorial">
7 Content here
8</div>Common Attributes
href- Specifies the URL for linkssrc- Specifies the source path for images and mediaalt- Provides alternative text for imagesid- Specifies a unique identifier for an elementclass- Specifies one or more class names for an elementstyle- Specifies inline CSS styles for an element
Headings and Paragraphs
Headings and paragraphs are the basic building blocks for organizing text content in HTML.
html
1<!-- Headings define hierarchy -->
2<h1>Main Title (Most Important)</h1>
3<h2>Subheading</h2>
4<h3>Section Heading</h3>
5<h4>Sub-section Heading</h4>
6<h5>Minor Heading</h5>
7<h6>Least Important Heading</h6>
8
9<!-- Paragraphs for text content -->
10<p>This is a paragraph of text. It can contain multiple sentences and will be displayed as a block of text with some default spacing.</p>
11
12<p>Another paragraph with more content. Paragraphs are essential for organizing textual content on web pages.</p>Text Formatting Tags
HTML provides various tags for formatting text to add emphasis, importance, or stylistic differences.
html
1<!-- Text formatting examples -->
2<p>This text contains <b>bold</b>, <strong>strong</strong>, <i>italic</i>, and <em>emphasized</em> text.</p>
3
4<p>You can also <mark>highlight text</mark>, show <small>smaller text</small>, or <del>delete text</del>.</p>
5
6<p>Mathematical formulas: H<sub>2</sub>O and E = mc<sup>2</sup>.</p>
7
8<p><ins>Inserted text</ins> and <u>underlined text</u> have different semantic meanings.</p>Links and Images
Hyperlinks and images are essential for creating connected, multimedia web experiences.
html
1<!-- Anchor tag for links -->
2<a href="https://example.com" target="_blank" title="Visit Example">Visit Example Website</a>
3
4<!-- Internal page link -->
5<a href="about.html">About Us</a>
6
7<!-- Link to specific section -->
8<a href="#section-1">Jump to Section 1</a>
9
10<!-- Image tag -->
11<img src="images/photo.jpg" alt="Description of image" width="400" height="300">
12
13<!-- Image as link -->
14<a href="portfolio.html">
15 <img src="thumb.jpg" alt="View Portfolio">
16</a>HTML Lists
HTML provides three types of lists for organizing content: unordered, ordered, and description lists.
html
1<!-- Unordered list (bulleted) -->
2<ul>
3 <li>Item 1</li>
4 <li>Item 2</li>
5 <li>Item 3</li>
6</ul>
7
8<!-- Ordered list (numbered) -->
9<ol>
10 <li>First item</li>
11 <li>Second item</li>
12 <li>Third item</li>
13</ol>
14
15<!-- Description list -->
16<dl>
17 <dt>HTML</dt>
18 <dd>HyperText Markup Language</dd>
19
20 <dt>CSS</dt>
21 <dd>Cascading Style Sheets</dd>
22</dl>HTML Tables
Tables are used to display tabular data in rows and columns with headers and data cells.
html
1<!-- Basic table structure -->
2<table border="1">
3 <tr>
4 <th>Name</th>
5 <th>Age</th>
6 <th>Country</th>
7 </tr>
8 <tr>
9 <td>John</td>
10 <td>25</td>
11 <td>USA</td>
12 </tr>
13 <tr>
14 <td>Maria</td>
15 <td>32</td>
16 <td>Spain</td>
17 </tr>
18</table>
19
20<!-- Table with colspan and rowspan -->
21<table border="1">
22 <tr>
23 <th colspan="2">Name</th>
24 <th>Age</th>
25 </tr>
26 <tr>
27 <td>John</td>
28 <td>Doe</td>
29 <td rowspan="2">25</td>
30 </tr>
31 <tr>
32 <td>Jane</td>
33 <td>Smith</td>
34 </tr>
35</table>HTML Forms
Forms are used to collect user input through various form controls like text fields, checkboxes, and buttons.
html
1<!-- Basic form structure -->
2<form action="/submit-form" method="POST">
3 <label for="name">Name:</label>
4 <input type="text" id="name" name="name" required>
5
6 <label for="email">Email:</label>
7 <input type="email" id="email" name="email" required>
8
9 <label for="message">Message:</label>
10 <textarea id="message" name="message" rows="4"></textarea>
11
12 <label for="country">Country:</label>
13 <select id="country" name="country">
14 <option value="usa">USA</option>
15 <option value="canada">Canada</option>
16 <option value="uk">UK</option>
17 </select>
18
19 <input type="submit" value="Send Message">
20</form>Semantic HTML
Semantic HTML introduces meaning to web page structure, making content more accessible and SEO-friendly.
html
1<!-- Semantic HTML structure -->
2<header>
3 <h1>Website Title</h1>
4 <nav>
5 <ul>
6 <li><a href="/">Home</a></li>
7 <li><a href="/about">About</a></li>
8 <li><a href="/contact">Contact</a></li>
9 </ul>
10 </nav>
11</header>
12
13<main>
14 <article>
15 <header>
16 <h2>Article Title</h2>
17 <p>Published on <time datetime="2023-05-15">May 15, 2023</time></p>
18 </header>
19
20 <section>
21 <h3>Introduction</h3>
22 <p>Article content goes here...</p>
23 </section>
24
25 <aside>
26 <h4>Related Content</h4>
27 <p>Additional information related to the article</p>
28 </aside>
29 </article>
30</main>
31
32<footer>
33 <p>© 2023 Company Name. All rights reserved.</p>
34</footer>HTML5 Features
HTML5 introduced new semantic elements, multimedia support, and APIs for richer web experiences.
html
1<!-- HTML5 audio element -->
2<audio controls>
3 <source src="audio.mp3" type="audio/mpeg">
4 Your browser does not support the audio element.
5</audio>
6
7<!-- HTML5 video element -->
8<video width="320" height="240" controls>
9 <source src="movie.mp4" type="video/mp4">
10 Your browser does not support the video tag.
11</video>
12
13<!-- HTML5 canvas element -->
14<canvas id="myCanvas" width="200" height="100"></canvas>
15
16<!-- HTML5 form input types -->
17<input type="email" placeholder="Enter your email">
18<input type="date" value="2023-05-15">
19<input type="color" value="#ff0000">
20<input type="range" min="0" max="100" value="50">Validation and Best Practices
Validating HTML and following best practices ensures compatibility, accessibility, and better SEO performance.
html
1<!-- Example of well-structured HTML -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta name="description" content="Free HTML tutorial for beginners">
8 <meta name="keywords" content="HTML, CSS, JavaScript, web development">
9 <meta name="author" content="WebDev Team">
10 <title>Complete HTML Tutorial</title>
11 <link rel="stylesheet" href="styles.css">
12</head>
13<body>
14 <header>
15 <h1>HTML Tutorial</h1>
16 </header>
17
18 <main>
19 <article>
20 <h2>Introduction to HTML</h2>
21 <p>HTML is the standard markup language for creating web pages.</p>
22 </article>
23 </main>
24
25 <footer>
26 <p>© 2023 WebDev Education</p>
27 </footer>
28
29 <script src="script.js"></script>
30</body>
31</html>Frequently Asked Questions
What is the difference between HTML and XHTML?
XHTML is a stricter, XML-based version of HTML. While HTML is more forgiving with syntax errors, XHTML requires well-formed markup, all tags to be closed, and attributes to be properly quoted.
Why should I use semantic HTML?
Semantic HTML improves accessibility for screen readers, enhances SEO by helping search engines understand content structure, and makes code easier to maintain and understand.
What are void elements in HTML?
Void elements are HTML elements that cannot have any content and don't require a closing tag. Examples include <img>, <br>, <hr>, and <input>.
How do I make my HTML accessible?
Use semantic elements, provide alt text for images, ensure proper contrast ratios, use ARIA attributes when needed, create keyboard-navigable interfaces, and test with screen readers.
What is the purpose of the DOCTYPE declaration?
The DOCTYPE declaration tells the browser which version of HTML the document is written in, ensuring the page is rendered in standards mode rather than quirks mode.