HTML
Complete HTML Guide
1. HTML Introduction
What is HTML?
HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a webpage using elements and tags.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a simple webpage.</p>
</body>
</html>
2. HTML Editors
You can write HTML code using text editors like:
- Notepad++ (Windows)
- Visual Studio Code (Cross-platform)
- Sublime Text (Cross-platform)
- Brackets (Cross-platform)
3. HTML Basics
- HTML documents start with <!DOCTYPE html>.
- The main sections of an HTML document are:
- <html>: The root element.
- <head>: Contains metadata like title and styles.
- <body>: Contains visible page content.
4. HTML Elements
HTML elements are building blocks of a webpage. They include:
<p>This is a paragraph.</p>
<h1>This is a heading.</h1>
<a href=”https://example.com”>Click here</a>
5. HTML Attributes
Attributes provide additional information about elements.
<a href=”https://example.com” target=”_blank”>Visit Example</a>
6. HTML Headings
HTML has six levels of headings:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Heading</h3>
7. HTML Paragraphs
Paragraphs are written using the <p> tag.
<p>This is a paragraph of text.</p>
8. HTML Styles
Use the style attribute to add inline CSS.
<p style=”color:blue; font-size:20px;”>Styled text</p>
9. HTML Formatting
Formatting tags include:
<b>Bold</b> <i>Italic</i> <u>Underlined</u>
10. HTML Quotations
Blockquotes and inline quotes:
<blockquote>This is a blockquote.</blockquote>
<q>This is an inline quote.</q>
11. HTML Comments
Comments are ignored by browsers.
<!– This is a comment –>
12. HTML Colors
You can define colors using names, hex, RGB, or HSL.
<p style=”color:red;”>Red Text</p>
13. HTML Links
Hyperlinks use the <a> tag.
<a href=”https://example.com”>Visit Example</a>
14. HTML Images
Use the <img> tag to insert images.
<img src=”image.jpg” alt=”Description” width=”200″>
15. HTML Lists
Ordered List
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Unordered List
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
16. HTML Forms
Forms allow user input.
<form>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name”>
<input type=”submit” value=”Submit”>
</form>
17. HTML Tables
<table border=”1″>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
</table>
18. HTML Media (Video & Audio)
<video controls>
<source src=”video.mp4″ type=”video/mp4″>
</video>
<audio controls>
<source src=”audio.mp3″ type=”audio/mpeg”>
</audio>
19. HTML APIs
Geolocation API:
<button onclick=”getLocation()”>Get Location</button>
<p id=”location”></p>
<script>
function getLocation() {
navigator.geolocation.getCurrentPosition(function(position) {
document.getElementById(“location”).innerHTML =
“Latitude: ” + position.coords.latitude +
” Longitude: ” + position.coords.longitude;
});
}
</script>
20. HTML Accessibility
Accessibility best practices:
- Use alt attributes for images.
- Use semantic elements (<header>, <article>, <footer>).
- Use ARIA attributes for better screen reader support.
21. HTML Cheat Sheet
| Tag | Description |
| <h1> to <h6> | Headings |
| <p> | Paragraph |
| <a> | Link |
| <img> | Image |
| <table> | Table |
| <form> | Form |
| <video> | Video |
| <audio> | Audio |