HTML
(Hypertext Markup Language)
HTML
➢ What is HTML (Hypertext Markup Language)
HTML stands for Hypertext Markup Language.
It is the standard language used to create and design webpages.
➢ History and evolution (HTML 1.0 → HTML5)
➢ Role in website development
➢ HTML document structure: <!DOCTYPE html>, <html>, <head>,
<body>
Introduction to HTML :-
➢ HTML (HyperText Markup Language) is the standard language used to create and design webpages. It structures
web content using elements enclosed within < > tags.
➢ HTML describes the Structure of Pages.
➢ The HTML code is made up of characters that live inside angled brackets — these are called HTML elements.
Elements are usually made up of two tags: an opening tag and a closing tag. (The closing tag has an extra forward
slash in it.) Each HTML element tells the browser something about the information that sits between its opening and
closing tags.
➢ HTML Tag = command (start/end of element)
Ex:-<h1> or </h1>
<p> or </p>
➢ HTML Element = full HTML component (tag + content)
Ex:-<h1>HTML</h1>
<p>HTML describes the Structure of Pages.</p>
History & Evolution of HTML Versions (1991 – Present) :-
Essential HTML Tags :-
Tag / Declaration Purpose
Declares the document type.
<!DOCTYPE html> Tells the browser that the document is written in HTML5.
Must be the very first line in the HTML document.
<html> The root element that wraps all the content of the web page.
Contains metadata (data about the page).
Does not display content directly on the page.
Includes:
<title>: Title shown in the browser tab.
<head>
<meta>: Character set, description, etc.
<link>: To external stylesheets.
<style>: Internal CSS.
<script>: JavaScript.
Essential HTML Tags :-
Tag / Declaration Purpose
Sets the title of the web page, shown in the browser’s tab or
<title>
window title.
Contains everything visible on the web page.
<body> Text, images, links, forms, etc. go here.
Example: <h1>, <p>, <a>, <img>, <div>, etc.
• In HTML some tags are self-closing tags knows as void element .
Example:-<br>, <img>, <hr>, <meta>, <input>
• Nesting Tags:-Nesting means placing tags inside other [Link] be properly nested: inner tags must be
closed before outer tags.
• Correct: <p><b>This is bold inside a paragraph.</b></p>
• Incorrect: <p><b>This is wrong nesting.</p></b>
• HTML ignores extra white spaces & HTML tag names are not case-sensitive.
Tags and Attributes :-
HTML Elements vs. Attributes
Element:-The full tag and its content.
Example: <p>Hello</p>
Attribute:-Extra info added inside the opening tag.
Example: <p style="color:red">Hello</p>
<img src="[Link]" alt="Sample Image" width="200">
Common HTML Attributes
Attribute Description
id Unique identifier for an element
class Groups elements for styling (CSS)
style Inline CSS styling
title Tooltip text on hover
lang Language of the content (en, hi, etc.)
align Aligns text (left, center, right) — deprecated in HTML5
Text formatting and styles
Semantic Tags
Semantic tags clearly describe the meaning or purpose of the content inside them.
They help both browsers and developers understand the structure and role of the content.
Examples of Semantic Tags:
Tag Meaning / Use
<header> Top section or heading of a page
<nav> Navigation links
<main> Main content of the document
<section> A separate section of content
<article> Independent article or post
<aside> Sidebar or related info
<footer> Bottom section of a page
<strong> Important text (bold with meaning)
<em> Emphasized text (italic with meaning)
Non-Semantic Tags
Non-semantic tags do not describe the content. They are generic containers without any specific meaning.
They are mainly used for styling and layout.
Examples of Non-Semantic Tags:<div> , <span> ,<i> ,<b>
Text styles tags:-
Tag Purpose
<b> Bold (non-semantic)
<strong> Important bold (semantic)
<i> Italic (non-semantic)
<em> Emphasized italic (semantic)
<u> Underlined text
<mark> Highlighted text
<sub> Subscript (e.g., H<sub>2</sub>O)
<sup> Superscript (e.g., x<sup>2</sup>)
<del> Deleted (strikethrough) text
Text Arrangement tags & Grouping tags:-
Text Arrangement Tags
<h1> to <h6> Headings (h1 = largest)
<p> Paragraph
<br> Line break
<hr> Horizontal line
<blockquote> Quoted block of text
Preformatted text (preserves
<pre>
spaces, tabs)
Grouping Tags
Tag Description
<div> Block-level container. Used for sections/layout.
<span> Inline container. Used to style small portions of text.
Common HTML Element :-
Headings :-
HTML has six "levels" of
headings:
<h1> is used for main headings
<h2> is used for subheadings
If there are further sections
under the subheadings then the
<h3> element is used, and so
on...
Browsers display the contents of
headings at different sizes. The
contents of an <h1> element is
the largest, and the contents of
an <h6> element is the smallest.
Common HTML Element :-
Paragraph :-
To create a paragraph,
surround the words that make up the paragraph
with an opening tag and closing tag.
By default, a browser will show each paragraph
on a new line with some
space between it and any
subsequent paragraphs.
Special & Visual Effect Tags:-
<div> – Division of Content
• A block-level container used to group elements together.
• Often used with CSS for layout and styling.
<dfn> – Defining Instance
• Used to indicate the definition of a term.
• The browser may show it in italics by default.
Special & Visual Effect Tags:-
<hr>:-Horizontal Rule
• Inserts a horizontal line to visually separate content.
<!-- Comment --> – Comment Tag
• Used to write comments in the code.
• Not visible in the browser.
• Helpful for documentation.
<nobr> – No Line Break
Prevents automatic line breaks in enclosed content.
<listing> – Preformatted Text Block
• Displays preformatted text like <pre>, preserving spaces, line breaks, and tabs.
• Replaced by <pre> in modern HTML.
Special & Visual Effect Tags:-
<marquee> Tag in HTML
The <marquee> tag is used to create scrolling text or images on a webpage — moving
horizontally or vertically.
Note: It is deprecated in HTML5. Modern developers use CSS animations instead.
Special & Visual Effect Tags:- Marquee Tag Attribute
Attribute Description Example
Controls the scroll behavior:
behavior behavior="alternate"
scroll, slide, alternate
Direction of scroll:
direction direction="right"
left, right, up, down
Speed of scrolling
scrollamount scrollamount="10"
(higher = faster)
Delay between each scroll movement
scrolldelay scrolldelay="100"
(in milliseconds)
Number of times it should scroll (use
loop loop="5"
infinite or a number)
bgcolor Background color inside marquee bgcolor="lightblue"
width & height Sets size of the marquee box width="300" height="50"
Horizontal and vertical space around
hspace, vspace hspace="20"
marquee
HTML Image Tag Attributes :-
<img> Tag
• Used to insert images into a webpage.
• Self-closing tag → does not need a closing </img>.
Common Attributes of <img>
Attribute Description
src Source (file path or URL) of the image
alt Alternate text if image doesn’t load
width Width of the image (in pixels or %)
height Height of the image
title Tooltip shown on mouse hover
border Border width (use CSS instead in modern HTML)
HTML Links & Navigation :-
<a> Tag
• The <a> (anchor) tag is used to create hyperlinks.
1.<a> Tag (Absolute vs Relative URLs)
Absolute URL
This includes the full web address (external links).
Relative URL
This links to a file inside your project folder (internal links).
HTML Links & Navigation :-
<a> Tag
• The <a> (anchor) tag is used to create hyperlinks.
2. Opening Links in New Tabs (target="_blank")
By default, links open in the same tab. To open in a new tab, use target="_blank".
3. Linking to Sections with IDs (Internal Linking)
You can jump to a section within the same page using id attributes.
HTML Links & Navigation :-
<a> Tag
• The <a> (anchor) tag is used to create hyperlinks.
4. Email & Phone Links ([Link] [Link]
You can create links that directly open email apps or phone dialers.
With subject & body:
Phone Link
HTML Table :-
HTML Table :-
HTML List and their types :-
HTML Ordered List :-
HTML Unordered List :-
HTML Definition List :-
HTML Forms elements :-
HTML Input Types :-
Forms Element : Input
<input type=“text” placeholder=“Enter Name”>
<input type=“password” placeholder=“Password”>
Forms Element : label
<label for="ID1">
<input type="radio" value="class X" name="class" id="ID1"> class X
</label>
<br>
<label for="ID2">
<input type="radio" value="class XI" name="class" id="ID1"> class XI
</label>
Drop down list HTML :-
<select name="city">
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Bangalore">Bangalore</option>
<option value="Hyderabad">Hyderabad</option>
</select>
Text Area HTML :-
<textarea name="feedback" placeholder="please enter ur feedback
here" row="5">Feedback</textarea>
<input type="submit" value="submit">
HTML <iframe> Tag :-
The <iframe> (Inline Frame) tag is used to embed another HTML page, document, or resource
inside the current webpage.
It creates a “window within a window” that loads content from another source.
Iframe Attributes
1. src → URL of the page to embed.
2. width & height → Control the size.
3. style → You can style it like any other element.
4. name → Gives the iframe a name (used for targetting links).
5. allowfullscreen → Allows embedded videos (like YouTube) to go full screen.
6. loading="lazy" → Delays loading until needed (improves performance).
External Document and page Section
Element Purpose
<header> Intro or top section of a page or article (logo, title, nav).
<nav> Main navigation links (menu, sidebar links).
<main> Central, unique content of the page (one per page).
<section> A thematic grouping of content (topic or chapter).
<article> A self-contained piece (blog post, news article).
<footer> Closing section with contact info, copyright, links.