HTML Basics
Part A: Introduction to HTML
• What is HTML?
o Stands for HyperText Markup Language.
o Standard markup language for creating web pages.
o Provides structure and meaning to web content.
• Role of HTML in Web Development:
o Works with CSS (styling) and JavaScript (functionality).
o Forms the backbone of every website.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>
Part B: Structure of an HTML Document
• Basic Components:
1. <!DOCTYPE html> → Defines document type.
2. <html> … </html> → Root of the HTML page.
3. <head> … </head> → Contains metadata (title, links, scripts).
4. <body> … </body> → Visible content of the webpage.
Part C: HTML Elements
Definition: An element is a building block of HTML.
o Written with an opening tag, content, and closing tag.
• Types of Elements:
1. Block-level elements: Start on a new line (e.g., <div>, <h1>, <p>, <section>).
2. Inline elements: Stay within a line (e.g., <span>, <a>, <strong>, <em>).
Part D: HTML Attributes
• Definition: Attributes provide additional information about elements.
• Format: name="value" inside the opening tag.
• Common Attributes:
o id → unique identifier
o class → group elements
o href → link for <a>
o src & alt → for <img>
o style → inline CSS
o title → tooltip text
Part E: Semantic HTML Tags (30 minutes)
• Definition: Tags that carry meaning about the content.
• Why Semantic HTML?
o Improves readability of code.
o Helps search engines understand content.
o Enhances accessibility for screen readers.
Common Semantic Tags:
• <header> → Top section of a page or section.
• <nav> → Navigation menu.
• <main> → Main content of the page.
• <article> → Independent, self-contained content.
• <section> → Thematic grouping of content.
• <aside> → Side content like ads or related links.
• <footer> → Bottom section (copyright, links).
HTML Forms
Structure of an HTML Form
• A form is defined using the <form> element.
• Attributes:
o action → URL where the data is sent.
o method → HTTP method (GET or POST).
o novalidate → disables browser’s built-in validation.
Example:
<form action="[Link]" method="post">
<!-- form fields go here -->
</form>
Common Form Controls
1. Text Input
<input type="text" name="fullname" placeholder="Enter your name">
2. Password Input
<input type="password" name="password" required>
3. Email Input
<input type="email" name="email" required>
4. Number & Range
<input type="number" name="age" min="1" max="120">
<input type="range" name="volume" min="0" max="100">
5. Radio Buttons (choose one)
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
6. Checkboxes (choose many)
<label><input type="checkbox" name="hobby" value="sports"> Sports</label>
<label><input type="checkbox" name="hobby" value="music"> Music</label>
7. Select Dropdown
<select name="country">
<option value="">-- Select Country --</option>
<option value="us">USA</option>
<option value="ph">Philippines</option>
</select>
8. Textarea
<textarea name="comments" rows="4" cols="30"></textarea>
9. Submit Button
<button type="submit">Submit</button>
. Important Attributes
• name → Key used to send data to the server.
• id → Identifies the element (for labels & JS).
• value → Default/predefined value.
• placeholder → Hint text inside input.
• required → Makes field mandatory.
• maxlength/minlength → Character limits.
• min/max/step → Numeric constraints.
• pattern → Regex for custom validation.
• autocomplete → Suggests values based on past input.
Labels and Accessibility
• Use <label> to connect text with input fields.
• Improves accessibility and usability.
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>