# HTML Reference Standalone HTML references for structuring text, links, images, lists, tables, forms and embedded content. # HTML Text and Headings HTML provides elements for displaying text, headings and page structure. Headings Headings are used to organise content on a webpage. HTML provides six heading levels.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Result: Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Paragraphs Paragraphs are used for normal text content.

This is a paragraph.

This is another paragraph.

Result: This is a paragraph. This is another paragraph. Bold Text Use the strong element to make text bold. Important information Result: Important information Italic Text Use the em element to emphasise text. Important information Result: Important information Line Breaks Use the br element to move text onto a new line. Line One
Line Two Result: Line One Line Two Horizontal Lines Use the hr element to create a horizontal divider.
Result: Subscript Subscript is commonly used in science and mathematics. H2O Result: H2O Superscript Superscript is commonly used for powers and exponents. x2 Result: x2 Combining Elements Multiple text elements can be combined.

Science Report

Water is written as H2O.

The formula for area is x2.

Result: Complete Example Text Example

Heading 1

Heading 2

This is a paragraph.

Bold text

Italic text
H2O
x2 Quick Reference Headings

Heading 1

Heading 6
Paragraph

Paragraph text

Bold Bold text Italic Italic text Line Break
Horizontal Rule
Subscript Superscript You now know how to create headings and display text content in HTML. # HTML Links and Images Links support navigation and images communicate visual information. Both need meaningful text alternatives. ## Links ~~~html View tournament results ~~~ Link text should describe the destination without relying on “click here”. For an external link opened in a new tab: ~~~html Visit the example website ~~~ Only open a new tab when useful, and make the behaviour clear in surrounding text. ## Email and page sections ~~~html Email fictional support Jump to testing evidence

Testing evidence

~~~ Use `example.com` addresses in demonstrations rather than real school or personal details. ## Images ~~~html Fictional Falcons team logo ~~~ Alternative text communicates the image’s purpose. A decorative image uses an empty alternative: ~~~html ~~~ Do not put essential words only inside an image. Avoid using width and height attributes to distort the aspect ratio; use responsive CSS. ## Figures ~~~html
Leaderboard with the Falcons ranked first on 12 points
Example leaderboard produced from fictional data.
~~~ ## Check - [ ] Link text is meaningful. - [ ] External new tabs use `rel="noopener"`. - [ ] Demonstrations use fictional addresses and data. - [ ] Informative images have purposeful alternative text. - [ ] Decorative images use `alt=""`. - [ ] Images resize without distortion. # HTML Lists and Tables Lists organise related items. Tables represent information with meaningful row and column relationships. ## Unordered and ordered lists ~~~html
  1. Choose a fictional dataset.
  2. Validate its headings.
  3. Import valid rows.
~~~ Use an ordered list when sequence matters. Do not create visual bullets with hyphens and line breaks. ## Description list ~~~html
Administrator
Imports and manages fictional tournament data.
User
Views processed results and statistics.
~~~ ## Accessible table ~~~html
Fictional team standings
Team Wins Points
Falcons 4 12
~~~ The caption identifies the table. Header cells and `scope` communicate relationships to assistive technology. Do not use tables for page layout. For narrow screens, keep the semantic table and place it inside a horizontally scrollable wrapper. ## Check - [ ] List type matches the content. - [ ] Table has a caption. - [ ] Header cells use suitable scope. - [ ] Values remain understandable without colour. - [ ] Layout tables are avoided. - [ ] Screenshots have meaningful alternative text or are marked decorative. # HTML Forms Forms collect user input. Accessible forms connect every control to a visible label and provide instructions and errors that do not rely on placeholders or colour. ## Basic form ~~~html

Use 3–50 letters, numbers or underscores.

~~~ The label’s `for` value matches the input’s `id`. The `name` identifies the value submitted to PHP. ## Useful input types ~~~html ~~~ Input types and HTML constraints help users, but PHP must validate every submitted value again. ## Related choices ~~~html
Preferred output
~~~ Use `fieldset` and `legend` for a related group. ## Error summary ~~~html

Please correct the following:

  • Capacity must be from 1 to 100.
~~~ Preserve valid values after an error when safe, and never return passwords to the form. ## GET or POST Use GET for non-sensitive searches and filters that may be bookmarked. Use POST for registration, login, file upload and operations that change stored data. ## Check - [ ] Every control has an associated label. - [ ] Instructions remain visible. - [ ] Appropriate input types and autocomplete values are used. - [ ] PHP repeats validation. - [ ] Errors are specific and accessible. - [ ] Forms contain only fictional data. # HTML Embeds and Comments HTML can be used to embed videos, maps and other content into a webpage. Comments can also be added to help explain code without displaying anything on the page. --- ## HTML Comments Comments are ignored by the browser. They are useful for explaining code and leaving notes for yourself or other developers. ```html ``` Example: ```html ``` Comments are not visible on the webpage. --- ## Embedding a YouTube Video YouTube provides embed code for videos. Example: ```html ``` Result: A YouTube video displayed on the page. --- ## Responsive YouTube Videos To help videos work on phones and tablets: ```html ``` The video will automatically adjust to the available width. --- ## Embedding a Google Map Google Maps can also be embedded. Example: ```html ``` Result: An interactive map displayed on the page. --- ## Displaying a Video File Videos stored in your project can be displayed using the `video` element. ```html ``` Result: A video player with play and pause controls. --- ## Displaying Audio Files Audio can be embedded using the `audio` element. ```html ``` Result: An audio player with playback controls. --- ## Displaying PDF Files PDF documents can be embedded directly into a webpage. ```html ``` Result: The PDF document is displayed inside the webpage. --- ## Common Uses for Embeds Embeds are commonly used for: - YouTube videos - Google Maps - PDF documents - Audio players - Demonstration videos - Interactive content --- ## Complete Example ```html Embeds Example

Media Examples



``` --- ## Quick Reference ### Comment ```html ``` ### YouTube Video ```html