1.
Introduction to HTML
What is HTML?
o HTML stands for Hyper Text Markup Language
o HTML is the standard markup language for creating Web pages
o HTML describes the structure of a Web page
o HTML consists of a series of elements
o HTML elements tell the browser how to display the content
Basic structure of an HTML document
2. HTML Document Structure
<!DOCTYPE> declaration
o The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
<html> element
o The <html> element is the root element of an HTML page
<head> section
o The <head> element contains meta information about the HTML page
o <title> - Sets the browser tab title
o <meta> - Provide metadata like character encoding, viewport settings,
and SEO info.
o <link> - Used to link external resources (CSS, favicons).
o <style> - Embeds CSS styles directly in HTML.
o <script> - Embeds or links JavaScript code
<body> section
o The <body> element defines the document's body, and is a container
for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
3. HTML Elements and Tags
Opening and closing tags
o HTML elements are defined by tags, which typically come in pairs:
o <p> is the opening tag
o </p> is the closing tag
o The content goes between them
Empty elements
o Some elements don't have content or a closing tag - they're self-
closing:
<br>
<img src="image.jpg" alt="Description">
<input type="text">
Nested elements
o Elements can contain other elements:
<div>
<h1>Main Heading</h1>
<p>This is a <strong>important</strong> paragraph.</p>
</div>
HTML attributes (id, class, style, etc.)
o Attributes provide additional information about elements
id - Unique identifier for an element
class - For styling/selecting multiple elements
style - Inline CSS styling
src, href - Source/link destinations
alt - Alternative text for images
title - Additional information (tooltip)
HTML comments
<!-- This is a comment -->
<p>Visible content</p>
<!--
Multi-line
comment
-->
<div> :
The <div> element is used as a container for other HTML
elements.
The <div> element is by default a block element, meaning that
it takes all available width, and comes with line breaks before
and after.
<span> :
The <span> element is an inline container used to mark up a
part of a text, or a part of a document.
The <span> element has no required attributes, but style, class
and id are common.
Id :
o The id attribute specifies a unique id for an HTML element. The value of
the id attribute must be unique within the HTML document.
o The id attribute is used to point to a specific style declaration in a style
sheet. It is also used by JavaScript to access and manipulate the
element with the specific id.
o The syntax for id is: write a hash character (#), followed by an id
name.
class :
o The class attribute is often used to point to a class name in a style
sheet.
o It can also be used by a JavaScript to access and manipulate elements
with the specific class name.
o To create a class; write a period (.) character, followed by a class
name. Then, define the CSS properties within curly braces {}:
Difference Between Class and ID :
A class name can be used by multiple HTML elements, while an id name must only
be used by one HTML element within the page.
LINK FOR ALL TAGS AND ATTRIBUTES :
https://docs.google.com/spreadsheets/d/1JRqlmbek-
CmMU15Tvk98SznGko0BhTshMio7YJIK_NM/edit?usp=sharing
4. Text Formatting
HTML provides various tags and attributes to format text for better
readability, structure, and styling. Below is a full overview of text formatting in
HTML, including semantic tags, presentational tags, and modern CSS-
based approaches.
Headings (<h1> to <h6>)
Paragraphs (<p>)
Formatting elements:
o <b>, <strong>
o <i>, <em>
o <mark>
o <small>
o <del>, <ins>
o <sub>, <sup>
Line breaks (<br>) and horizontal rules (<hr>)
Preformatted text (<pre>)
Quotations (<blockquote>, <q>)
Citations and definitions (<cite>, <dfn>)
5. Links and Anchors
<a> element and href attribute
Absolute vs relative URLs
Linking to:
o Other pages
o Page sections (anchors)
o Email addresses
o Phone numbers
o Files (PDF, images, etc.)
Target attribute (_blank, _self, etc.)
Link states and styling
6. Images and Multimedia
<img> element and attributes (src, alt, width, height)
Image formats (JPEG, PNG, GIF, SVG, WebP)
Responsive images (srcset, sizes)
Figure and figcaption (<figure>, <figcaption>)
Audio (<audio>) and video (<video>) elements
Embedding content (<iframe>, <embed>, <object>)
7. Lists
Ordered lists (<ol>, <li>)
Unordered lists (<ul>, <li>)
Description lists (<dl>, <dt>, <dd>)
Nested lists
List styling with CSS
8. Tables
<table> structure
Table rows (<tr>)
Table headers (<th>)
Table data (<td>)
Table sections (<thead>, <tbody>, <tfoot>)
Table caption (<caption>)
Column groups (<colgroup>, <col>)
Table styling and accessibility
9. Forms
<form> element and attributes
Form controls:
o Text input (<input type="text">)
o Password (<input type="password">)
o Email (<input type="email">)
o Number (<input type="number">)
o Date/time inputs
o Radio buttons (<input type="radio">)
o Checkboxes (<input type="checkbox">)
o File upload (<input type="file">)
o Hidden fields (<input type="hidden">)
o Submit/reset buttons
<textarea> element
<select>, <option>, and <optgroup>
<label> element
<fieldset> and <legend>
Form attributes (action, method, enctype, etc.)
Form validation (required, pattern, etc.)
10. HTML5 Semantic Elements
<header>, <footer>
<nav>
<main>
<article>, <section>
<aside>
<figure>, <figcaption>
<time>
<mark>
<details>, <summary>
LINK FOR ALL TAGS AND ATTRIBUTES :
https://docs.google.com/spreadsheets/d/1JRqlmbek-
CmMU15Tvk98SznGko0BhTshMio7YJIK_NM/edit?usp=sharing
