HTML Revision
Categories of HTML Tags
• Basic Structure Tags
• Headings & Text Formatting
• Links & Media
• Lists
• Tables
• Forms & Input
• Semantic & Layout
Basic Structure Tags
• <html>
• <head>
• <title>
• <body>
• Tag : <html>
• Purpose: The <html> tag is the root element of every
HTML document.
• Tag: <head>
• Purpose: The <head> tag contains metadata (information
about the webpage), scripts, styles, etc — not the visible
content.
Tag: <title>
Purpose:
• The <title> tag defines the title of the HTML document.
• It appears on the browser tab.
• It’s used by search engines as the page title in search results.
• It’s located inside the <head> section.
Code:
• Tag: <body>
• Purpose: The <body> tag contains everything visible on a webpage
— such as text, images, links, tables, and more.
Code:
Headings & Text Formatting
• <h1> to <h6> • <i> or <em>
• <p> • <u>
• <br> • <mark>
• <hr>
• <small>
• <b> or <strong>
• <sup>
• Tag: <h1> to <h6>
• Purpose: These tags define HTML headings, from the largest and most
important (<h1>) to the smallest (<h6>).
Code:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
• Tag : <p>
• Purpose: The <p> tag defines a paragraph of text.
• Code:
• Tag : <br>
• Purpose: The <br> tag inserts a line break — it moves the text to the
next line without starting a new paragraph.
• Code:
• Tag : <hr>
• Purpose: The <hr> tag inserts a horizontal line (rule) across the page.
• Code:
• Tag : <b> <strong>
• Purpose: <b> Makes text bold visually
<strong> Makes text bold AND indicates strong importance
• Code:
• Tag : <i>
• Purpose: Makes text italic visually
• Code:
• Tag : <u>
• Purpose: The <u> tag is used to underline text.
Often used to highlight names, keywords, or links,
• Code:
• Tag : <mark>
• Purpose: The <mark> tag is used to highlight text, usually with a
yellow background by default.
• Code:
• Tag:<small>
• Purpose:The <small> tag is used to reduce the size of text.
• Often used for fine print, disclaimers, or legal text
• Code:
• Tag:<sup>
• Purpose:The <sup> tag is used to display text as superscript, which
means the text appears slightly above the normal line and in a
smaller font size.
• Code:
• Tag:<sub>
• Purpose: The <sub> tag is used to display text as subscript, which
means the text appears slightly below the normal line and in a
smaller font size.
• Code:
Links &Media
• <a>
• <img>
• <video>
• <audio>
• <iframe>
• Tag:<a> - Anchor
• Purpose: The <a> tag is used to create hyperlinks in HTML.
• Code:
• Tag: <img>
• Purpose: Used to display images on a web page.
• Code:
• Tag: <audio>
• Purpose: To embed sound or music in a webpage.
• Code:
• Tag: <video>
• Purpose: To embed videos directly in a webpage.
• Code:
• Tag: <iframe>
• Purpose: To embed another web page or external content (like
YouTube, Google Maps, etc.) inside your page.
• Code:
Lists
• <ul>
• <ol>
• <li>
• <dl>
• <dt>
• <dd>
• Tag:<ul>
• Purpose: The <ul> tag creates an unordered list, which is a bulleted
list of items.
• Code:
• Tag:<ol>
• Purpose: The <ol> tag creates an ordered list, which is a numbered
list of items.
• Code:
• Tag:<dl> <dt> <dd>
• Purpose:The <dl> tag is used to create a definition list, which is a list
of terms and their descriptions.
• <dl> → the container for the list
• <dt> → defines the term
• <dd> → defines the description of the term
• Code:
Tables
• <table> • <thead>
• <tr> • <tbody>
• <td> • <tfoot>
• <th> • <tcaption>
• Tag:<table> <tr> <th> <td>
• Purpose:The <table> tag is used to create tables to display data in
rows and columns.
• <tr> → Table Row
• <th> → Table Header (bold and centered by default)
• <td> → Table Data (cell content)
• Code:
<th>
<td>
<td>
<td>
• Tag:<thead> <tbody> <tfoot>
• Purpose:
<thead> Groups the header rows of a table
<tbody> Groups the main content/data rows of the table.
<tfoot>Groups the footer rows, often for totals or summary.
<thead>
<tbody>
<tfoot>
• Tag: <caption>
• Purpose: The <caption> tag is used to provide a title or description
for a table.
• Code:
<caption>
Forms & Input
• <form> • <select>
• <input> • <label>
• <textarea> • <fieldset>
• <button> • <legend>
• <option>
• Tag:<form>
• Purpose: The <form> tag is used to collect user input on a web page.
• Code:
<form action="/submit" method="post">
</form>
• Tag:<input>
• Purpose: Used to create single-line input fields for text, email,
password, numbers, checkboxes, radio buttons, etc.
• Code:
<input type="text">
<input type="checkbox">
<input type="radio">
• Tag: <textarea> - Multi line text
• Purpose: Used to create a larger text area for multi-line input, such
as messages or comments.
• Code:
<textarea id="message" name="message" placeholder="Enter
your message"></textarea>
• Tag:<button>
• Purpose:Creates a clickable button for submitting forms, resetting
forms, or performing custom actions.
• Code:
<button type="submit">Submit</button>
• Tag:<select>
• Purpose: Creates a dropdown list allowing users to select one or
more options.
• Code:
• Tag: <label>
• Purpose: Provides a text description for an input field.
• Code:
<input>
<label>
<select>
<textarea>
<button>
• Tag:<option>
• Purpose: Represents each choice inside a <select> dropdown.
• Code:
<option>
• Tag:<fieldset> <legend>
• Purpose:
• The <fieldset> tag is used to group related form elements together.
• The <legend> tag is used to provide a caption or title for a <fieldset>.
<legend>
<fieldset>
<legend>
<fieldset>
Semantic &Layout
• <header> • <section>
• <footer> • <article>
• <nav> • <aside>
• <main> • <div>
• <span>
• Tag:<header>
• Purpose:Represents the introductory content or top section of a
page/section. Typically contains a logo, title, or navigation.
• Code:
• Tag:<nav>
• Purpose: Defines a navigation section with links to other pages or
sections of the page.
• Code:
• Tag: <main>
• Purpose: Represents the main content of the page.
• Code:
• Tag: <footer>
• Purpose: Represents the bottom section of a page/section. Usually
contains copyright info, links, or contact info.
• Code:
<header>
<Nav>
<Main>
<footer>
• Tag: <section>
• Purpose: The <section> tag in HTML is used to define a thematic
grouping of content — typically with a heading.
It helps structure a webpage into meaningful sections like
Introduction, About Us, Services, Contact, [Link]:
• Code:
• Tag: <article>
• Purpose: The <article> tag is used to represent independent, self-
contained content — like a blog post, news story, forum post, or
product card.
Each <article> should make sense on its own, even if taken out of
context.
• Code:
• Tag: <aside>
• Purpose: The <aside> tag is used for content that’s related to the main content, but
not part of it directly.
Typical examples include:
• Sidebars
• Author bios
• Advertisements
• Related links
• Notes or tips
• Code:
• Tag: <div>
• Purpose: The <div> tag (short for “division”) is a generic container used to group
together HTML elements for styling or scripting.
It doesn’t carry any semantic meaning on its own — but it’s extremely useful for
layout, grouping, and applying CSS styles.
• You’ll often use <div> to:
• Group content (like cards, sections, or navigation items)
• Create grid or flexbox layouts
• Apply specific styles or JavaScript behavior to a set of elements
• Code:
• Tag: <span>
• Purpose: The <span> tag is an inline container used to apply styles or scripts to a specific part of
text or a small piece of content.
Unlike <div> (which is block-level), <span> doesn’t start a new line — it stays inline with surrounding
text.
• You typically use <span> when you want to:
Change the style of a few words in a sentence.
Add interactivity to a specific text segment.
Wrap inline text for JavaScript manipulation.
• Code:
CSS
CSS
•Inline
•Internal
•External
INLINE
• Inline: Inline CSS means adding CSS styles directly to an individual
HTML element using the style attribute inside the tag itself.
• Syntax: <element style="property: value; property: value;">
• Code:
Internal
• Internal: Internal CSS means writing CSS inside the HTML
document, but separately from the content, within a <style> tag placed
inside the <head> section.
• Syntax:
External
• External: External CSS means writing all your CSS styles in a
separate .css file, and linking that file to your HTML using the <link>
tag inside the <head> section.
• Syntax to link: <link rel="stylesheet" href=“[Link]">
HTML file:
• [Link] file
CSS SELECTORS
• Class
• ID
• Type(element)
• Attribute
• Pseudo-classes
• Pseudo-element
• Universal
Class Selector:
• Syntax: .classname
• Targets elements with that class
ID Selector:
• Syntax: #idname
• Targets one unique element with that id
Type(element):
• Syntax: element(like div, p, h1)
• Targets all elements of that type.
Attribute Selector:
• Targets elements based on attribute.
Pseudo-classes Selector:
• Targets elemets based on state or position.
Pseudo-element Selector:
• Styles just the first letter of the paragraph.
Universal Selector:
• It is used in CSS to select all elements on a webpage and apply the
same style to them.
Exercise