🌐 IT Unit 2: Complete HTML Guide
Based on Pearson Edexcel Scheme of Work (Topic 7 & 11) + Exam Summary
1. Document Structure & Meta Data
Every HTML page must follow a specific structure. This is covered in Scheme of Work 7.1.1 - 7.1.3.
<!DOCTYPE html> <-- Tells browser this is HTML5 -->
<html lang="en"> <-- Declares language -->
<head>
<meta charset="UTF-8"> <-- Character set for special symbols -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <-- For responsive design -->
<meta name="description" content="Page description for SEO">
<meta http-equiv="refresh" content="30"> <-- Refreshes page every 30 secs -->
<title>Page Title</title> <-- Shows in browser tab -->
</head>
<body>
<h1>Visible Content</h1>
</body>
</html>
💡 Exam Tip: Always include
<!DOCTYPE html> as the very first line. Always declare lang="en" in the html tag for accessibility.
2. Syntax & Global Attributes
Understanding how to write clean code and use attributes correctly (SoW 7.1.4 & 7.1.5).
Rules for Clean Syntax:
- Use lowercase for all element names (e.g.,
<body>not<BODY>). - Use double quotes for attribute values (e.g.,
href="link.html"). - Indent nested elements for readability.
- Self-closing tags (like
<img>) do not require a forward slash in HTML5, but it is acceptable.
Global Attributes
These attributes can be used on almost any HTML element:
id: Unique identifier for one element (used for CSS/JS).class: Identifier for multiple elements (used for CSS).style: Used for inline CSS (not recommended for large projects).hidden: Hides the element from view (Boolean attribute).tabindex: Controls the order of tab navigation (0 = default, -1 = no tab stop).data-*: Stores custom data (e.g.,data-user-id="123").
3. Text Formatting & Semantic HTML
Semantic HTML describes the meaning of the content, not just how it looks. This is crucial for SEO and Accessibility (SoW Topic 11).
Headings & Paragraphs
<h1>to<h6>: Headings. Only one<h1>per page.<p>: Paragraphs.<hr>: Thematic break (horizontal rule).<br>: Line break (self-closing).
Emphasis & Importance (Exam Focus!)
⚠️ Know the difference:
<em>vs<i>: Both look italic.<em>adds emphasis (semantic),<i>is just stylistic.<strong>vs<b>: Both look bold.<strong>adds importance (semantic),<b>is just stylistic.
Other Text Semantics
<blockquote>: Long quotation from another source.<q>: Short inline quotation.<cite>: Title of a work (e.g., book name).<abbr>: Abbreviation (usetitleattribute for full text).<dfn>: Defines a term.<address>: Contact information for the author/owner.<mark>: Highlights text (like a highlighter pen).<code>: Displays computer code.
Semantic Layout Tags
Use these instead of generic <div> tags where possible:
<header>: Introductory content or nav links.<footer>: Footer information (copyright, contacts).<nav>: Navigation links.<main>: The dominant content of the body (only one per page).<article>: Self-contained content (e.g., blog post).<section>: Thematic grouping of content.<aside>: Content indirectly related to the main content (sidebar).<figure>&<figcaption>: Media content with a caption.<div>&<span>: Non-semantic containers (use for layout only).
4. Lists
SoW 7.2.4 covers three types of lists.
<!-- Unordered List (Bullets) -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<!-- Ordered List (Numbers) -->
<ol type="A" start="3"> <-- Starts at C -->
<li>Item A</li>
</ol>
<!-- Definition List (Terms & Descriptions) -->
<dl>
<dt>HTML</dt> <-- Data Term -->
<dd>HyperText Markup Language</dd> <-- Data Definition -->
</dl>
💡 Nesting: You can put a list inside another list item (
<li>).5. Links (Anchor Tags)
SoW 7.2.5. The <a> tag uses the href attribute.
- External:
<a href="https://google.com">Google</a> - Internal:
<a href="contact.html">Contact</a> - Email:
<a href="mailto:test@example.com">Email</a> - New Tab: Add
target="_blank". - Anchor Link: Link to a specific part of a page using ID.
- Step 1:
<h2 id="section1">Top</h2> - Step 2:
<a href="#section1">Jump to Top</a>
- Step 1:
6. Tables
SoW 7.3.2. Used for data, not layout.
<table>
<thead> <-- Table Header Group -->
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody> <-- Table Body Group -->
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</tbody>
<tfoot> <-- Table Footer Group -->
<tr>
<td colspan="2">End of List</td>
</tr>
</tfoot>
</table>
Key Attributes:
colspan="2": Cell spans 2 columns.rowspan="2": Cell spans 2 rows.
7. Images, Audio, Video & Iframes
Images (SoW 7.3.1)
<img src="photo.jpg" alt="Description" width="300">
⚠️ Accessibility: The
alt attribute is mandatory for accessibility. If the image is decorative, use alt="".Audio & Video (SoW 7.3.5)
Use the <source> element to provide multiple formats for compatibility.
<video width="320" height="240" controls autoplay loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
Iframes (SoW 7.3.6)
Embeds another website (e.g., YouTube, Maps).
<iframe src="https://www.youtube.com/embed/ID" width="560" height="315"></iframe>
8. Forms (HTML Structure)
SoW 7.3.3. While validation is JavaScript, the structure is HTML.
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter name">
<br>
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<br>
<label>Comments:</label>
<textarea rows="4" cols="50"></textarea>
<br>
<label>Country:</label>
<select>
<option value="uk">UK</option>
<option value="us">USA</option>
</select>
<br>
<input type="submit" value="Send">
</form>
💡 Grouping: Use
<fieldset> to group related form elements and <legend> for the group title.9. Block vs Inline Elements
SoW 7.2.1 & 7.2.2. Understanding content models.
- Block-level: Starts on a new line, takes full width (e.g.,
<div>,<p>,<h1>,<table>). - Inline: Stays on the same line, takes only necessary width (e.g.,
<span>,<a>,<img>,<strong>).
📝 Past Paper Style Questions
Q1. Which tag is used to define a short inline quotation?
<q> (Use <blockquote> for long quotations).Q2. What is the difference between <strong> and <b>?
Both make text bold, but
<strong> indicates importance (semantic), while <b> is purely stylistic.Q3. Identify the error:
<img src="pic.jpg">Missing the
alt attribute. All images must have alt text for accessibility (WCAG).Q4. Which attribute allows a table cell to span across two columns?
colspan="2"Q5. What is the purpose of the <meta name="viewport"> tag?
It controls the layout on mobile browsers (responsive design), ensuring the page scales correctly.
Q6. Which element is used to group related form elements together?
<fieldset> (with <legend> for the caption).Q7. Spot the Error:
<ol type="A" start="3"> <li>Item</li> </ol>. What letter does the list start with?It starts with C (A=1, B=2, C=3).
Based on Pearson Edexcel International Advanced Level Information Technology Unit 2 Scheme of Work (Topic 7 & 11).
No comments:
Post a Comment