Study Notes: HTML (HyperText Markup
Language)
HTML is the standard markup language used to create and structure content on the web. It
forms the backbone of web pages and works alongside CSS (for styling) and JavaScript (for
interactivity). Below are detailed study notes to help you understand and use HTML
effectively.
1. Introduction to HTML
What is HTML?
o A markup language used to create web pages.
o Consists of elements (tags) that define the structure and content of a
webpage.
How Does HTML Work?
o Browsers read HTML files and render them as visual or audible web pages.
Basic Structure of an HTML Document:
html
Copy
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Run HTML
2. Key Components of HTML
Elements and Tags:
Element: A component of an HTML document (e.g., <p>, <h1>).
Tag: The opening and closing parts of an element (e.g., <p> and </p>).
Example:
html
Copy
<p>This is a paragraph.</p>
Run HTML
Attributes:
Provide additional information about an element.
Placed inside the opening tag.
Example:
html
Copy
<a href="[Link] Example</a>
Run HTML
3. Basic HTML Tags
Document Structure:
<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: The root element of an HTML page.
<head>: Contains meta-information about the document (e.g., title, styles).
<title>: Specifies the title of the webpage (displayed in the browser tab).
<body>: Contains the visible content of the webpage.
Text Formatting:
<h1> to <h6>: Headings (h1 is the largest, h6 is the smallest).
<p>: Paragraph.
<b> or <strong>: Bold text.
<i> or <em>: Italic text.
<u>: Underlined text.
<br>: Line break.
<hr>: Horizontal rule (line).
Links and Images:
<a>: Creates a hyperlink.
o Example:
html
Copy
<a href="[Link] Example</a>
Run HTML
<img>: Embeds an image.
o Example:
html
Copy
<img src="[Link]" alt="Description of image">
Run HTML
Lists:
<ul>: Unordered list (bulleted).
o Example:
html
Copy
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Run HTML
<ol>: Ordered list (numbered).
o Example:
html
Copy
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Run HTML
Tables:
<table>: Defines a table.
<tr>: Table row.
<td>: Table data (cell).
Example:
html
Copy
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
Run HTML
4. Forms
Used to collect user input.
Key Elements:
o <form>: Defines a form.
o <input>: Creates input fields (e.g., text, password, checkbox).
o <label>: Labels for input fields.
o <button>: Clickable button.
Example:
html
Copy
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
Run HTML
5. Semantic HTML
Uses meaningful tags to describe the content.
Examples:
o <header>: Represents the header of a section or page.
o <nav>: Contains navigation links.
o <main>: Represents the main content of the page.
o <section>: Defines a section of the page.
o <article>: Represents independent, self-contained content.
o <footer>: Represents the footer of a section or page.
6. HTML5 Features
New Elements:
o <video>: Embeds video content.
o <audio>: Embeds audio content.
o <canvas>: Used for drawing graphics.
New Attributes:
o placeholder: Displays a hint in input fields.
o required: Specifies that an input field must be filled out.
7. Practical Exercises
1. Create a Basic Webpage:
o Write an HTML document with a heading, paragraph, and image.
2. Build a Form:
o Create a form with fields for name, email, and a submit button.
3. Add a Table:
o Create a table with two rows and three columns.
4. Use Semantic Tags:
o Build a webpage using <header>, <nav>, <main>, and <footer>.
8. Tips for Writing HTML
Use proper indentation for readability.
Always close tags (e.g., <p></p>).
Use lowercase for tags and attributes.
Validate your HTML using tools like the W3C Validator.