HTML5 Lecture Notes: All Elements with
Colored Slides
Slide 1: Introduction to HTML5
Background Color: #4CAF50 (Green)
What is HTML5?
Latest version of HyperText Markup Language
Enhances structure, multimedia, forms, and
APIs
Focuses on semantics, accessibility, and
mobile support
Why Learn HTML5?
Builds modern, responsive websites
Supports multimedia without plugins
Improves SEO and accessibility
Structure of These Notes
One slide per HTML5 element
Definition, example, and usage notes
Non-deprecated elements only
Slide 2: <html>
Background Color: #2196F3 (Blue)
Definition: Root element of an HTML
document, containing all other elements.
Purpose: Defines the document’s language
and structure.
Example<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Usage Notes
Use lang attribute for accessibility (e.g.,
en, es).
Must include <head> and <body> as children.
Always start with <!DOCTYPE html>.
Slide 3: <head>
Background Color: #FF9800 (Orange)
Definition: Contains metadata about the
document, such as title and links.
Purpose: Provides information to browsers
and search engines.
Example<head>
<title>My Website</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="[Link]">
</head>
Usage Notes
Common children: <title>, <meta>, <link>,
<script>.
Does not display content on the page.
Include charset for proper text rendering.
Slide 4: <body>
Background Color: #E91E63 (Pink)
Definition: Contains all visible content of
the HTML document.
Purpose: Holds the content users see and
interact with.
Example<body>
<h1>Welcome</h1>
<p>This is the main content area.</p>
</body>
Usage Notes
Only one <body> per document.
Can include any visible HTML elements
(e.g., <div>, <img>).
Use semantic elements inside for better
structure.
Slide 5: <title>
Background Color: #9C27B0 (Purple)
Definition: Specifies the document’s title,
shown in the browser’s title bar or tab.
Purpose: Describes the page’s purpose for
users and search engines.
Example<head>
<title>My First Webpage</title>
</head>
Usage Notes
Required in <head>.
Keep concise (60–70 characters) for SEO.
Avoid keyword stuffing.
Slide 6: <meta>
Background Color: #FF5722 (Deep Orange)
Definition: Provides metadata, such as
character encoding or viewport settings.
Purpose: Configures document behavior and
information.
Example<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<meta name="description" content="A sample
webpage">
Usage Notes
Common attributes: charset, name, content.
Use for SEO (e.g., description, keywords).
Viewport meta tag is critical for
responsive design.
Slide 7: <link>
Background Color: #3F51B5 (Indigo)
Definition: Links external resources, like
CSS stylesheets or favicons.
Purpose: Connects the document to external
files.
Example<link rel="stylesheet"
href="[Link]">
<link rel="icon" href="[Link]"
type="image/x-icon">
Usage Notes
Placed in <head>.
Common rel values: stylesheet, icon,
dns-prefetch.
Ensure correct href paths.
Slide 8: <style>
Background Color: #FFC107 (Amber)
Definition: Embeds CSS styles directly in
the HTML document.
Purpose: Applies styles without an external
file.
Example<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
</style>
Usage Notes
Use in <head> or <body> (preferably
<head>).
Prefer external CSS for large projects.
Can be scoped with scoped attribute
(non-standard).
Slide 9: <script>
Background Color: #009688 (Teal)
Definition: Embeds or links to JavaScript
code.
Purpose: Adds interactivity or dynamic
content.
Example<script>
alert("Hello, world!");
</script>
<script src="[Link]" defer></script>
Usage Notes
Place in <head> (with defer/async) or end
of <body>.
Use defer to load scripts after HTML
parsing.
External scripts improve maintainability.
Slide 10: <base>
Background Color: #607D8B (Blue Grey)
Definition: Specifies the base URL for all
relative URLs in the document.
Purpose: Simplifies relative link
management.
Example<base href="[Link]
<a href="[Link]">Link</a> <!-- Resolves
to [Link] -->
Usage Notes
Place in <head>, only one per document.
Affects all relative URLs (e.g., <a>,
<img>).
Use cautiously to avoid breaking links.
Slide 11: <header>
Background Color: #F44336 (Red)
Definition: Represents introductory content
or navigational links.
Purpose: Marks the header section of a page
or section.
Example<header>
<h1>My Site</h1>
<nav><a href="/home">Home</a></nav>
</header>
Usage Notes
Semantic element, improves accessibility.
Can be used multiple times (e.g., in
<article>).
Not for footer content.
Slide 12: <nav>
Background Color: #4CAF50 (Green)
Definition: Defines a set of navigation
links.
Purpose: Groups links for site navigation.
Example<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
Usage Notes
Use for primary navigation menus.
Enhances screen reader navigation.
Avoid for non-navigation links (e.g.,
social media icons).
Slide 13: <main>
Background Color: #2196F3 (Blue)
Definition: Represents the primary content
of the document.
Purpose: Identifies the main focus, unique
to each page.
Example<main>
<h2>Main Content</h2>
<p>This is the primary content area.</p>
</main>
Usage Notes
Only one <main> per document.
Exclude headers, footers, or sidebars.
Improves accessibility and SEO.
Slide 14: <article>
Background Color: #FF9800 (Orange)
Definition: Represents self-contained
content, like a blog post or news article.
Purpose: Groups content that can stand
alone.
Example<article>
<h2>Blog Post</h2>
<p>This is a complete article.</p>
</article>
Usage Notes
Can contain <header>, <footer>, etc.
Use for syndicated content (e.g., RSS
feeds).
Multiple <article> elements allowed.
Slide 15: <section>
Background Color: #E91E63 (Pink)
Definition: Defines a thematic grouping of
content, typically with a heading.
Purpose: Organizes content into logical
sections.
Example<section>
<h2>Services</h2>
<p>We offer various services.</p>
</section>
Usage Notes
Use when <article> or <div> isn’t
appropriate.
Include a heading for clarity.
Avoid for styling-only purposes.
Slide 16: <aside>
Background Color: #9C27B0 (Purple)
Definition: Represents content tangentially
related to the main content.
Purpose: Used for sidebars, callouts, or
ads.
Example<aside>
<h3>Related Links</h3>
<p>Check out our blog!</p>
</aside>
Usage Notes
Often styled as a sidebar.
Enhances document structure for screen
readers.
Can be used within <article>.
Slide 17: <footer>
Background Color: #FF5722 (Deep Orange)
Definition: Contains footer content, like
copyright or contact info.
Purpose: Marks the footer of a page or
section.
Example<footer>
<p>© 2025 My Site</p>
<a href="/contact">Contact Us</a>
</footer>
Usage Notes
Can appear in <article>, <section>, or
document.
Avoid using for main content.
Include contact or legal info for
accessibility.
Slide 18: <div>
Background Color: #3F51B5 (Indigo)
Definition: A generic container for
grouping content.
Purpose: Used when no semantic element
fits, often for styling.
Example<div class="container">
<p>This is a generic container.</p>
</div>
Usage Notes
Use only when semantic elements (e.g.,
<section>) are inappropriate.
Common for CSS layouts (e.g., Flexbox,
Grid).
Avoid overuse; prefer semantic elements.
Slide 19: <a>
Background Color: #FFC107 (Amber)
Definition: Creates a hyperlink to another
resource or page.
Purpose: Enables navigation or resource
access.
Example<a href="[Link]
target="_blank">Visit Example</a>
Usage Notes
Attributes: href, target, rel, download.
Use rel="nofollow" for untrusted links.
Ensure descriptive text for accessibility.
Slide 20: <em>
Background Color: #009688 (Teal)
Definition: Indicates emphasized text,
typically italicized.
Purpose: Highlights text with stress or
importance.
Example<p>This is <em>important</em>
text.</p>
Usage Notes
Semantic, not just stylistic (use CSS for
style-only italics).
Affects screen reader pronunciation.
Nesting increases emphasis.
Slide 21: <strong>
Background Color: #607D8B (Blue Grey)
Definition: Indicates text with strong
importance, typically bold.
Purpose: Marks critical or urgent content.
Example<p>This is <strong>critical</strong>
information.</p>
Usage Notes
Use for semantic importance, not just bold
styling.
Can be combined with <em> for emphasis.
Avoid overuse to maintain impact.
Slide 22: <span>
Background Color: #F44336 (Red)
Definition: A generic inline container for
styling or scripting.
Purpose: Groups inline content without
semantic meaning.
Example<p>This is a <span style="color:
red;">red</span> word.</p>
Usage Notes
Use for CSS or JavaScript hooks.
Prefer semantic elements (e.g., <em>) when
applicable.
Minimal semantic impact.
Slide 23: <br>
Background Color: #4CAF50 (Green)
Definition: Inserts a line break within
text.
Purpose: Forces content to a new line.
Example<p>First line<br>Second line</p>
Usage Notes
Use sparingly; prefer CSS for layout.
Avoid for paragraph separation (use <p>).
Self-closing tag.
Slide 24: <hr>
Background Color: #2196F3 (Blue)
Definition: Represents a thematic break
between content.
Purpose: Separates sections or topics,
often as a horizontal line.
Example<p>Section 1</p>
<hr>
<p>Section 2</p>
Usage Notes
Semantic, not just visual.
Style with CSS for custom appearance.
Use for logical breaks, not decoration.
Slide 25: <b>
Background Color: #FF9800 (Orange)
Definition: Represents text styled in bold
without implying importance.
Purpose: Used for stylistic emphasis (e.g.,
keywords).
Example<p>This is <b>bold</b> text.</p>
Usage Notes
Use <strong> for semantic importance.
Primarily for visual styling.
Avoid in favor of CSS when possible.
Slide 26: <i>
Background Color: #E91E63 (Pink)
Definition: Represents text in an alternate
voice or mood, typically italicized.
Purpose: Used for technical terms, foreign
words, or thoughts.
Example<p>This is an <i>Italian</i>
phrase.</p>
Usage Notes
Use <em> for semantic emphasis.
Style with CSS for custom italics.
Improves accessibility with proper context.
Slide 27: <u>
Background Color: #9C27B0 (Purple)
Definition: Represents text with
non-textual annotation, typically
underlined.
Purpose: Marks text like misspellings or
proper names in some languages.
Example<p>This is <u>misspelled</u>
text.</p>
Usage Notes
Avoid for links (use <a>).
Use CSS for decorative underlines.
Limited semantic use.
Slide 28: <mark>
Background Color: #FF5722 (Deep Orange)
Definition: Highlights text for reference
or importance.
Purpose: Draws attention to specific
content.
Example<p>This is <mark>highlighted</mark>
text.</p>
Usage Notes
Default style is yellow background.
Use for search results or key points.
Customize with CSS.
Slide 29: <small>
Background Color: #3F51B5 (Indigo)
Definition: Represents side comments or
fine print, typically in smaller text.
Purpose: Used for disclaimers or secondary
information.
Example<p>Regular text <small>(terms
apply)</small></p>
Usage Notes
Semantic, not just for small text (use CSS
for size).
Common in footers or legal notices.
Maintains readability.
Slide 30: <sub>
Background Color: #FFC107 (Amber)
Definition: Represents subscript text, like
in chemical formulas.
Purpose: Displays text below the baseline.
Example<p>H<sub>2</sub>O is water.</p>
Usage Notes
Use for scientific or mathematical
notation.
Avoid for styling (use CSS).
Ensure legibility.
Slide 31: <sup>
Background Color: #009688 (Teal)
Definition: Represents superscript text,
like in exponents.
Purpose: Displays text above the baseline.
Example<p>E = MC<sup>2</sup></p>
Usage Notes
Common in math, footnotes, or ordinals
(e.g., 1st).
Use CSS for decorative superscripts.
Keep text size readable.
Slide 32: <q>
Background Color: #607D8B (Blue Grey)
Definition: Indicates a short inline
quotation.
Purpose: Marks quoted text within a
sentence.
Example<p>She said, <q>Let's go!</q></p>
Usage Notes
Browsers add quotation marks by default.
Use <blockquote> for longer quotes.
Include cite attribute for source
(optional).
Slide 33: <blockquote>
Background Color: #F44336 (Red)
Definition: Represents a longer quotation,
typically indented.
Purpose: Highlights extended quoted
content.
Example<blockquote
cite="[Link]
<p>This is a famous quote.</p>
</blockquote>
Usage Notes
Use cite attribute for source URL.
Style with CSS for indentation.
Can contain other elements like <p>.
Slide 34: <cite>
Background Color: #4CAF50 (Green)
Definition: References the source of a
creative work or quotation.
Purpose: Provides attribution for quotes or
media.
Example<p>According to <cite>The
Book</cite>, this is true.</p>
Usage Notes
Use for titles of books, articles, or
media.
Not for URLs (use <a>).
Typically italicized by default.
Slide 35: <code>
Background Color: #2196F3 (Blue)
Definition: Represents a fragment of
computer code.
Purpose: Displays code snippets inline or
in blocks.
Example<p>Use the <code>print()</code>
function in Python.</p>
Usage Notes
Combine with <pre> for multi-line code.
Monospace font by default.
Use for inline code only.
Slide 36: <pre>
Background Color: #FF9800 (Orange)
Definition: Displays preformatted text,
preserving whitespace and line breaks.
Purpose: Shows code or text with fixed
formatting.
Example<pre>
function hello() {
[Link]("Hello");
}
</pre>
Usage Notes
Common for code blocks or ASCII art.
Use CSS for styling (e.g., white-space:
pre).
Combine with <code> for semantics.
Slide 37: <abbr>
Background Color: #E91E63 (Pink)
Definition: Represents an abbreviation or
acronym with an optional expansion.
Purpose: Clarifies shortened terms for
accessibility.
Example<abbr title="World Health
Organization">WHO</abbr>
Usage Notes
Use title attribute for full text.
Improves screen reader support.
Style with CSS for visual cues (e.g.,
dotted underline).
Slide 38: <data>
Background Color: #9C27B0 (Purple)
Definition: Associates content with a
machine-readable value.
Purpose: Links human-readable text to data
for scripts.
Example<p>Product: <data
value="123">Widget</data></p>
Usage Notes
Use value attribute for machine-readable
data.
Useful for microdata or JavaScript.
Limited browser support for advanced use.
Slide 39: <time>
Background Color: #FF5722 (Deep Orange)
Definition: Represents a specific time or
date.
Purpose: Provides machine-readable
date/time data.
Example<time datetime="2025-07-23">July 23,
2025</time>
Usage Notes
Use datetime attribute for ISO 8601 format.
Improves SEO and calendar integration.
Human-readable text is flexible.
Slide 40: <var>
Background Color: #3F51B5 (Indigo)
Definition: Represents a variable in
programming or mathematics.
Purpose: Marks variables or placeholders.
Example<p>The variable <var>x</var> is
unknown.</p>
Usage Notes
Typically italicized by default.
Use for math equations or code variables.
Combine with <code> for programming
context.
Slide 41: <samp>
Background Color: #FFC107 (Amber)
Definition: Represents sample output from a
program.
Purpose: Shows computer output or results.
Example<p>The program outputs: <samp>Error
404</samp></p>
Usage Notes
Monospace font by default.
Use with <pre> for multi-line output.
Semantic for documentation.
Slide 42: <kbd>
Background Color: #009688 (Teal)
Definition: Represents user input, like
keyboard or voice commands.
Purpose: Indicates input to be typed or
spoken.
Example<p>Press <kbd>Ctrl</kbd> +
<kbd>S</kbd> to save.</p>
Usage Notes
Monospace font by default.
Nest for key combinations (e.g.,
<kbd>Ctrl</kbd>+<kbd>C</kbd>).
Enhances tutorial clarity.
Slide 43: <ruby>, <rt>, <rp>
Background Color: #607D8B (Blue Grey)
Definition: Represents ruby annotations for
East Asian text; <rt> provides
pronunciation, <rp> offers fallback.
Purpose: Supports pronunciation for
characters (e.g., Chinese, Japanese).
Example<ruby>
漢 <rt>kan</rt><rp>(</rp>字<rp>)</rp>
</ruby>
Usage Notes
<rp> displays in browsers without ruby
support.
Common in East Asian languages.
Ensure proper browser support.
Slide 44: <p>
Background Color: #F44336 (Red)
Definition: Defines a paragraph of text.
Purpose: Groups text into logical blocks.
Example<p>This is a paragraph of text.</p>
Usage Notes
Default margins via CSS.
Avoid nesting block elements (e.g., <div>
inside <p>).
Use for narrative or descriptive text.
Slide 45: <ul>
Background Color: #4CAF50 (Green)
Definition: Creates an unordered (bulleted)
list.
Purpose: Displays items without specific
order.
Example<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
Usage Notes
Use <li> for list items.
Style bullets with CSS.
Common for navigation or features.
Slide 46: <ol>
Background Color: #2196F3 (Blue)
Definition: Creates an ordered (numbered)
list.
Purpose: Displays items in a specific
sequence.
Example<ol>
<li>First step</li>
<li>Second step</li>
</ol>
Usage Notes
Attributes: start, reversed, type (e.g., 1,
A, a).
Use for instructions or rankings.
Customize numbering with CSS.
Slide 47: <li>
Background Color: #FF9800 (Orange)
Definition: Represents a list item in <ul>
or <ol>.
Purpose: Defines individual items in a
list.
Example<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Usage Notes
Can contain text, images, or other
elements.
Use value attribute in <ol> for custom
numbering.
Ensure proper nesting.
Slide 48: <dl>, <dt>, <dd>
Background Color: #E91E63 (Pink)
Definition: <dl> creates a description
list; <dt> defines terms, <dd> provides
descriptions.
Purpose: Structures key-value pairs or
glossaries.
Example<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
Usage Notes
Multiple <dt> or <dd> per group allowed.
Use for dictionaries or metadata.
Style with CSS for layout.
Slide 49: <figure>
Background Color: #9C27B0 (Purple)
Definition: Represents self-contained
content, like images or diagrams.
Purpose: Groups media with optional
captions.
Example<figure>
<img src="[Link]" alt="A photo">
<figcaption>Image caption</figcaption>
</figure>
Usage Notes
Use with <figcaption> for captions.
Semantic for illustrations, code, or
charts.
Improves accessibility.
Slide 50: <figcaption>
Background Color: #FF5722 (Deep Orange)
Definition: Provides a caption for a
<figure> element.
Purpose: Describes or labels media content.
Example<figure>
<img src="[Link]" alt="Scenery">
<figcaption>Beautiful
landscape</figcaption>
</figure>
Usage Notes
Must be inside <figure>.
First or last child of <figure>.
Enhances context for screen readers.
Slide 51: <h1>, <h2>, <h3>, <h4>, <h5>,
<h6>
Background Color: #3F51B5 (Indigo)
Definition: Represents headings of
decreasing importance (1 is highest).
Purpose: Structures content hierarchy.
Example<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section Heading</h3>
Usage Notes
Use in order for accessibility (no skipping
levels).
Only one <h1> per page for SEO.
Style with CSS for visual hierarchy.
Slide 52: <hgroup>
Background Color: #FFC107 (Amber)
Definition: Groups multiple headings
(<h1>–<h6>) for a single section.
Purpose: Combines main heading with
subheadings.
Example<hgroup>
<h1>Main Title</h1>
<h2>Subtitle</h2>
</hgroup>
Usage Notes
Rarely used; consider <header> instead.
Only contains headings.
Limited browser support for outline
algorithms.
Slide 53: <table>
Background Color: #009688 (Teal)
Definition: Defines a table for tabular
data.
Purpose: Organizes data in rows and
columns.
Example<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
Usage Notes
Use for data, not layout (use CSS
Grid/Flexbox).
Include <thead>, <tbody> for structure.
Add aria-label for accessibility.
Slide 54: <tr>
Background Color: #607D8B (Blue Grey)
Definition: Defines a table row.
Purpose: Groups cells in a horizontal line.
Example<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
Usage Notes
Child of <table>, <thead>, <tbody>, or
<tfoot>.
Contains <td> or <th> elements.
Ensure consistent cell counts.
Slide 55: <td>
Background Color: #F44336 (Red)
Definition: Defines a table data cell.
Purpose: Holds data within a table row.
Example<table>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Usage Notes
Use rowspan or colspan for merging cells.
Add headers attribute for accessibility.
Style with CSS for alignment.
Slide 56: <th>
Background Color: #4CAF50 (Green)
Definition: Defines a table header cell.
Purpose: Labels columns or rows in a table.
Example<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
Usage Notes
Use scope attribute (row, col) for
accessibility.
Typically bold and centered by default.
Link to <td> via id for complex tables.
Slide 57: <thead>
Background Color: #2196F3 (Blue)
Definition: Groups header content in a
table.
Purpose: Organizes table headers for
clarity.
Example<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
</table>
Usage Notes
Optional but improves semantics.
Contains <tr> elements.
Use with <tbody> and <tfoot>.
Slide 58: <tbody>
Background Color: #FF9800 (Orange)
Definition: Groups body content in a table.
Purpose: Separates data from
headers/footers.
Example<table>
<tbody>
<tr>
<td>John</td>
<td>30</td>
</tr>
</tbody>
</table>
Usage Notes
Default if not specified.
Multiple <tbody> allowed for grouping.
Enhances table accessibility.
Slide 59: <tfoot>
Background Color: #E91E63 (Pink)
Definition: Groups footer content in a
table.
Purpose: Holds summary or total rows.
Example<table>
<tfoot>
<tr>
<td>Total</td>
<td>100</td>
</tr>
</tfoot>
</table>
Usage Notes
Place after <thead>, before <tbody> in code
(rendered at bottom).
Optional for simple tables.
Use for totals or notes.
Slide 60: <caption>
Background Color: #9C27B0 (Purple)
Definition: Provides a title or caption for
a table.
Purpose: Describes the table’s purpose.
Example<table>
<caption>Monthly Sales</caption>
<tr>
<td>Data</td>
</tr>
</table>
Usage Notes
First child of <table>.
Improves accessibility for screen readers.
Style with CSS for alignment.
Slide 61: <col>
Background Color: #FF5722 (Deep Orange)
Definition: Defines attributes for one or
more table columns.
Purpose: Applies styles or properties to
columns.
Example<table>
<colgroup>
<col span="2" style="background-color:
yellow;">
</colgroup>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
Usage Notes
Used within <colgroup>.
Attributes: span, style.
Limited styling support (e.g., background,
width).
Slide 62: <colgroup>
Background Color: #3F51B5 (Indigo)
Definition: Groups <col> elements to apply
styles or attributes.
Purpose: Organizes column properties.
Example<table>
<colgroup>
<col style="background-color:
lightgray;">
</colgroup>
<tr>
<td>Cell</td>
</tr>
</table>
Usage Notes
Place before <tr> in <table>.
Optional for simple tables.
Use for consistent column styling.
Slide 63: <form>
Background Color: #FFC107 (Amber)
Definition: Defines a form for collecting
user input.
Purpose: Enables data submission to
servers.
Example<form action="/submit"
method="post">
<input type="text" name="username">
<button type="submit">Submit</button>
</form>
Usage Notes
Attributes: action, method, enctype.
Use POST for sensitive data, GET for
queries.
Avoid onSubmit in sandboxed environments.
Slide 64: <input>
Background Color: #009688 (Teal)
Definition: Creates an input field for user
data.
Purpose: Collects various types of user
input.
Example<input type="text" name="username"
placeholder="Enter name" required>
Usage Notes
Types: text, email, password, checkbox,
radio, date, etc.
Use required, pattern for validation.
Pair with <label> for accessibility.
Slide 65: <textarea>
Background Color: #607D8B (Blue Grey)
Definition: Creates a multi-line text input
field.
Purpose: Allows longer text input.
Example<textarea name="comment" rows="4"
cols="50">Enter text here</textarea>
Usage Notes
Attributes: rows, cols, maxlength.
Use placeholder for hints.
Style with CSS for size.
Slide 66: <button>
Background Color: #F44336 (Red)
Definition: Creates a clickable button.
Purpose: Triggers actions or form
submission.
Example<button type="button"
onclick="myFunction()">Click me</button>
Usage Notes
Types: submit, reset, button.
Use type="button" for non-form actions.
Add aria-label for accessibility.
Slide 67: <select>
Background Color: #4CAF50 (Green)
Definition: Creates a dropdown list.
Purpose: Allows users to select one or more
options.
Example<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
Usage Notes
Use <option> for items.
Attributes: multiple, size.
Pair with <label>.
Slide 68: <option>
Background Color: #2196F3 (Blue)
Definition: Defines an option in a <select>
element.
Purpose: Provides selectable choices.
Example<select>
<option value="apple">Apple</option>
<option value="banana"
selected>Banana</option>
</select>
Usage Notes
Attributes: value, selected, disabled.
Use <optgroup> for grouping.
Ensure descriptive values.
Slide 69: <optgroup>
Background Color: #FF9800 (Orange)
Definition: Groups related options in a
<select> element.
Purpose: Organizes dropdown options.
Example<select>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</optgroup>
</select>
Usage Notes
Use label attribute for group name.
Cannot be nested.
Improves usability for long lists.
Slide 70: <label>
Background Color: #E91E63 (Pink)
Definition: Associates a label with a form
control.
Purpose: Improves accessibility and
usability.
Example<label
for="username">Username:</label>
<input type="text" id="username"
name="username">
Usage Notes
Use for attribute to link to id of input.
Clicking label focuses the input.
Essential for screen readers.
Slide 71: <fieldset>
Background Color: #9C27B0 (Purple)
Definition: Groups related form elements,
often with a border.
Purpose: Organizes form inputs logically.
Example<fieldset>
<legend>Personal Info</legend>
<input type="text" name="name">
</fieldset>
Usage Notes
Use <legend> for caption.
Can be styled with CSS.
Use disabled attribute to disable group.
Slide 72: <legend>
Background Color: #FF5722 (Deep Orange)
Definition: Provides a caption for a
<fieldset>.
Purpose: Describes the purpose of grouped
inputs.
Example<fieldset>
<legend>Contact Details</legend>
<input type="email" name="email">
</fieldset>
Usage Notes
First child of <fieldset>.
Enhances accessibility.
Style with CSS for alignment.
Slide 73: <datalist>
Background Color: #3F51B5 (Indigo)
Definition: Provides a list of predefined
options for an <input>.
Purpose: Enables autocomplete
functionality.
Example<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>
Usage Notes
Link via list attribute to id of
<datalist>.
Works with text, search, url, etc.
Browser support varies.
Slide 74: <output>
Background Color: #FFC107 (Amber)
Definition: Represents the result of a
calculation or user action.
Purpose: Displays dynamic form output.
Example<form
oninput="[Link]=parseInt([Link])+par
seInt([Link])">
<input type="number" id="a" value="10">
+ <input type="number" id="b" value="20">
= <output name="result">30</output>
</form>
Usage Notes
Use with for attribute to link inputs.
Requires JavaScript for updates.
Semantic for form calculations.
Slide 75: <img>
Background Color: #009688 (Teal)
Definition: Embeds an image in the
document.
Purpose: Displays images for visual
content.
Example<img src="[Link]"
alt="Description of image" width="200">
Usage Notes
alt attribute is required for
accessibility.
Use srcset for responsive images.
Avoid for decorative images (use CSS).
Slide 76: <audio>
Background Color: #607D8B (Blue Grey)
Definition: Embeds audio content with
playback controls.
Purpose: Plays sound files natively.
Example<audio controls>
<source src="audio.mp3"
type="audio/mpeg">
Your browser does not support audio.
</audio>
Usage Notes
Use <source> for multiple formats.
Attributes: controls, autoplay, loop.
Include fallback text.
Slide 77: <video>
Background Color: #F44336 (Red)
Definition: Embeds video content with
playback controls.
Purpose: Plays videos without external
plugins.
Example<video controls width="400">
<source src="video.mp4" type="video/mp4">
Your browser does not support video.
</video>
Usage Notes
Attributes: controls, poster, autoplay.
Use <track> for subtitles.
Optimize for performance.
Slide 78: <source>
Background Color: #4CAF50 (Green)
Definition: Specifies media resources for
<audio> or <video>.
Purpose: Provides multiple formats for
compatibility.
Example<video controls>
<source src="video.mp4" type="video/mp4">
<source src="[Link]"
type="video/webm">
</video>
Usage Notes
Attributes: src, type, media.
Browser selects first supported format.
Include fallback content.
Slide 79: <track>
Background Color: #2196F3 (Blue)
Definition: Adds subtitles, captions, or
descriptions to <video> or <audio>.
Purpose: Enhances accessibility with timed
text.
Example<video controls>
<source src="video.mp4" type="video/mp4">
<track src="[Link]"
kind="subtitles" srclang="en"
label="English">
</video>
Usage Notes
Attributes: kind (subtitles, captions),
srclang, label.
Uses WebVTT format for .vtt files.
Test for browser support.
Slide 80: <embed>
Background Color: #FF9800 (Orange)
Definition: Embeds external content, like
plugins, at a specified point.
Purpose: Integrates non-HTML content (e.g.,
Flash, PDF).
Example<embed src="[Link]"
type="application/x-shockwave-flash"
width="200" height="200">
Usage Notes
Limited modern use (prefer <video>,
<object>).
Attributes: src, type, width, height.
Accessibility challenges.
Slide 81: <object>
Background Color: #E91E63 (Pink)
Definition: Embeds an external resource,
like a PDF or multimedia.
Purpose: Displays complex content with
fallback.
Example<object data="[Link]"
type="application/pdf" width="600"
height="400">
<p>PDF not supported.</p>
</object>
Usage Notes
Attributes: data, type, width, height.
Use <param> for additional settings.
Include fallback content.
Slide 82: <param>
Background Color: #9C27B0 (Purple)
Definition: Defines parameters for an
<object> element.
Purpose: Configures embedded content.
Example<object data="[Link]">
<param name="autoplay" value="true">
</object>
Usage Notes
Attributes: name, value.
Used with legacy plugins.
Limited modern relevance.
Slide 83: <iframe>
Background Color: #FF5722 (Deep Orange)
Definition: Embeds another HTML document
within the current one.
Purpose: Displays external pages or
content.
Example<iframe src="[Link]
width="600" height="400" title="Embedded
Page"></iframe>
Usage Notes
Attributes: src, width, height, title.
Use sandbox for security.
Add title for accessibility.
Slide 84: <picture>
Background Color: #3F51B5 (Indigo)
Definition: Provides multiple sources for
an image, enabling responsive selection.
Purpose: Optimizes images for different
devices or conditions.
Example<picture>
<source media="(min-width: 800px)"
srcset="[Link]">
<img src="[Link]" alt="Image">
</picture>
Usage Notes
Use <source> for alternative images.
Fallback <img> is required.
Improves performance and responsiveness.
Slide 85: <details>
Background Color: #FFC107 (Amber)
Definition: Creates a disclosure widget
that shows/hides content.
Purpose: Provides collapsible content
sections.
Example<details>
<summary>Click to expand</summary>
<p>Hidden content here.</p>
</details>
Usage Notes
Use <summary> for toggle label.
Attribute: open to show by default.
Native interactivity, no JavaScript needed.
Slide 86: <summary>
Background Color: #009688 (Teal)
Definition: Provides a label for a
<details> element.
Purpose: Summarizes content in a
collapsible section.
Example<details>
<summary>More Info</summary>
<p>Additional details.</p>
</details>
Usage Notes
First child of <details>.
Clickable to toggle visibility.
Style with CSS for custom appearance.
Slide 87: <dialog>
Background Color: #607D8B (Blue Grey)
Definition: Represents a dialog box or
modal window.
Purpose: Displays temporary or interactive
content.
Example<dialog open>
<p>This is a dialog box.</p>
<button
onclick="[Link]()">Close<
/button>
</dialog>
Usage Notes
Attributes: open to display.
Requires JavaScript for full functionality.
Use aria-modal for accessibility.
Slide 88: <menu>
Background Color: #F44336 (Red)
Definition: Represents a group of commands.
Purpose: Structures context menus or
toolbars (rarely used).
Example<menu>
<li><button>Option 1</button></li>
<li><button>Option 2</button></li>
</menu>
Usage Notes
Limited browser support.
Prefer <ul> or <nav> for modern use.
Experimental in HTML5.
Slide 89: <canvas>
Background Color: #4CAF50 (Green)
Definition: Provides a drawing surface for
JavaScript-driven graphics.
Purpose: Creates dynamic 2D or WebGL
graphics.
Example<canvas id="myCanvas" width="200"
height="100"></canvas>
<script>
let ctx =
[Link]("myCanvas").getCont
ext("2d");
[Link](10, 10, 50, 50);
</script>
Usage Notes
Requires JavaScript for rendering.
Attributes: width, height.
Include fallback content for accessibility.
Slide 90: <noscript>
Background Color: #2196F3 (Blue)
Definition: Displays content when
JavaScript is disabled.
Purpose: Provides fallback for
non-JavaScript users.
Example<noscript>
<p>Please enable JavaScript to view this
content.</p>
</noscript>
Usage Notes
Place in <head> or <body>.
Use for critical content fallbacks.
Rare with modern JavaScript reliance.
Slide 91: <template>
Background Color: #FF9800 (Orange)
Definition: Holds reusable content that can
be cloned via JavaScript.
Purpose: Stores HTML for dynamic insertion.
Example<template id="myTemplate">
<p>Template content</p>
</template>
<script>
let content =
[Link]("myTemplate").conte
[Link](true);
[Link](content);
</script>
Usage Notes
Content is not rendered until cloned.
Ideal for Web Components.
Requires JavaScript to activate.
Slide 92: <slot>
Background Color: #E91E63 (Pink)
Definition: A placeholder in a web
component for user-provided content.
Purpose: Enables customizable Web
Components.
Example<template id="myComponent">
<slot name="content">Default
content</slot>
</template>
<my-component>
<span slot="content">Custom
content</span>
</my-component>
Usage Notes
Used with <template> in Web Components.
Requires JavaScript for Shadow DOM.
Limited standalone use.
Slide 93: <bdi>
Background Color: #9C27B0 (Purple)
Definition: Isolates text with different
directionality (e.g., for RTL languages).
Purpose: Ensures correct text rendering in
mixed-direction content.
Example<p>User <bdi><إسم/bdi> has logged
in.</p>
Usage Notes
Use for Arabic, Hebrew, or mixed scripts.
Prevents directionality issues.
Rarely needed in single-language sites.
Slide 94: <bdo>
Background Color: #FF5722 (Deep Orange)
Definition: Overrides text directionality
(e.g., for right-to-left display).
Purpose: Forces text direction explicitly.
Example<p><bdo dir="rtl">Reverse this
text</bdo></p>
Usage Notes
Attributes: dir (ltr, rtl).
Use <bdi> for automatic directionality.
Limited practical use.
Slide 95: <map>
Background Color: #3F51B5 (Indigo)
Definition: Defines an image map with
clickable areas.
Purpose: Creates interactive regions on
images.
Example<img src="[Link]" alt="Map"
usemap="#mymap">
<map name="mymap">
<area shape="rect" coords="0,0,100,100"
href="[Link]" alt="Link">
</map>
Usage Notes
Link via usemap to name of <map>.
Use <area> for clickable regions.
Add alt for accessibility.
Slide 96: <area>
Background Color: #FFC107 (Amber)
Definition: Defines a clickable area within
an image map.
Purpose: Specifies interactive regions on
an image.
Example<map name="mymap">
<area shape="circle" coords="50,50,20"
href="[Link]" alt="Circle">
</map>
Usage Notes
Attributes: shape, coords, href, alt.
Shapes: rect, circle, poly.
Test for accessibility.
Slide 97: Best Practices
Background Color: #009688 (Teal)
Accessibility
Use semantic elements (e.g., <nav>,
<main>).
Add alt for <img>, title for <iframe>.
Use <label> and ARIA attributes.
Performance
Optimize images with <picture> or srcset.
Minimize external resources in <link>,
<script>.
Use defer/async for scripts.
SEO
Include <title>, meta description, and
semantic markup.
Use proper heading hierarchy (<h1>–<h6>).
Validate with W3C tools.
Example<img src="[Link]"
alt="Descriptive text">
<label for="name">Name:</label>
<input id="name" type="text"
aria-required="true">
Slide 98: Validation and Tools
Background Color: #607D8B (Blue Grey)
Validation
Use W3C Markup Validator
([Link]).
Check for proper nesting, doctype, and
attributes.
Tools
Browser DevTools (Chrome, Firefox).
Lighthouse for accessibility/performance.
MDN Web Docs for reference.
Example<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Valid Page</title>
</head>
<body>
<p>Valid HTML5 content</p>
</body>
</html>
Slide 99: Resources
Background Color: #F44336 (Red)
Official Documentation
W3C HTML5 Specification:
[Link]
MDN Web Docs:
[Link]
b/HTML