HTML Notes
1. Introduction to HTML:
- HTML stands for HyperText Markup Language.
- Used to create the structure of web pages.
- Consists of elements enclosed in angle brackets < >.
2. Basic Structure of an HTML Document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. Common HTML Tags:
- Headings: <h1> to <h6>
- Paragraph: <p>
- Line break: <br>
- Horizontal rule: <hr>
- Bold: <b>, Italic: <i>, Underline: <u>
4. Lists:
- Ordered List:
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
- Unordered List:
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
5. Links and Images:
<a href="https://example.com">Visit Example</a>
<img src="image.jpg" alt="Description" width="200">
6. Tables:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
7. Forms:
<form action="submit.php" method="post">
Name: <input type="text" name="name"><br>
Age: <input type="number" name="age"><br>
<input type="submit" value="Submit">
</form>
8. Semantic Elements:
- <header>, <footer>, <nav>, <article>, <section> help structure the content meaningfully.
9. Media Elements:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>
10. HTML Attributes:
- Provide additional information about elements.
- Example: href, src, alt, style, id, class
11. Inline vs Block Elements:
- Inline: <span>, <a>, <img>
- Block: <div>, <p>, <h1>
12. Doctype Declaration:
- <!DOCTYPE html> tells the browser to use HTML5.
13. Comments:
<!-- This is a comment -->
14. Character Entities:
- Used to display reserved characters.
- Example: <, >, &, ",
15. Best Practices:
- Always close tags properly.
- Use semantic tags for better accessibility.
- Keep code clean and properly indented.