HTML (Hyper text markup language)
Complete notes by introvert
All subjects Helping group:[Link]
CS/IT projects Group:[Link]
Whatsapp (Stay updated):[Link]
Youtube (learn together):[Link]
HTML BASICS
Overview of HTML and it’s significance In web development.
HTML (HyperText Markup Language) is the standard markup language used to create and
structure content on the web. It defines the layout and elements of a webpage using tags and
attributes, which browsers interpret to display content.
Not a programming language—it's a markup language
Provides structure, not style or behavior
Works alongside CSS (for styling) and JavaScript (for interactivity)
STRUCTURE OF AN HTML DOCUMENT
Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document Title</title>
</head>
<body>
</body>
</html>
Semantic tags
Semantic tags clearly describe the meaning and purpose of the content they contain.
Example
<header> <!-- Top section of a page -->
<nav> <!-- Navigation links -->
<main> <!-- Main content -->
<section> <!-- Thematic grouping -->
<article> <!-- Self-contained content -->
<aside> <!-- Sidebar or extra info -->
<footer> <!-- Bottom section -->
NON- Semantic tags
Non-semantic tags do not describe their content’s meaning
Example
<div> <!-- Generic container -->
<span> <!-- Generic inline container -->
BASIC HTML TAGS
Headings
HTML heading tags (<h1> to <h6>) are used to define titles and subtitles on a webpage. They help
organize content into a clear hierarchy, making it easier for users
Example
<h1>Main Title of the Page</h1>
<h2>Primary Section</h2>
<h3>Subsection</h3>
<h4>Detail Level 1</h4>
<h5>Detail Level 2</h5>
<h6>Least Important Heading</h6>
Paragraphs
Its use to add paragraph in webpage
Example
<p>This is the first paragraph. It introduces the topic.</p>
<pre>This is the first paragraph.
It introduces the topic.</pre>
More tags
<br> — Adds a line break without starting a new paragraph
<hr> — Inserts a horizontal rule to separate content
<pre> — Displays preformatted text with preserved spacing and line breaks
Lists
We use lists in HTML to organize content into a structured, readable format
Three types of lists.
Order list
Un-order list
Description list
Order list
Used when the sequence matters
Example
<ol>
<li> Open your editor</li>
<li> Write HTML code</li>
<li> Save and preview</li>
</ol>
Unorder list
Used when the order doesn’t matter
Example
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Description List
Used to define terms and their meanings
Example
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
EMPHASIS AND STRONG TAGS
Emphasis
it usually displays the text in italic.
Example
<em>really</em>
<i>really</i>
Strong
It usually display the text bold
Example
<strong>Warning:</strong>
<i>really</i>
Div and span element
Use <div> when you're building layouts or sections.
Use <span> when you're styling inline text or small elements.
Div
<div>act like container block level element</div>
Span
<div>act like container Inline element</div>
TABLE MANAGEMENT
An HTML table is used to display data in rows and columns, just like a spreadsheet. It helps
organize information clearly
<th> for header cells
<td> for data cells
Creating tables
<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
<tr>
<td>Ayesha</td>
<td>Math</td>
<td>A</td>
</tr>
<tr>
<td>Ali</td>
<td>Science</td>
<td>B+</td>
</tr>
</table>
Table row
The <tr> tag defines a row in an HTML table.
Example
<tr>
<td>Ayesha</td>
<td>Math</td>
<td>A</td>
</tr>
Table cell
A table cell is the smallest unit of a table. It holds the actual content
Example
<th>Name</th>
<td>Ayesha</td>
Table headers
Headers are always on the top of table. Header cells are bold and centered by default.
Example
<th>Naam</th>
Merging cells (colspan and rowspan)
Colspan
Colspan can merge multiple columns
Example
<table>
<tr>
<th colspan="2">Student Info</th>
</tr>
<tr>
<td>Name</td>
<td>Ayesha</td>
</tr>
</table>
Rowspan
Rowspan can merge multiple rows
Example
<table>
<tr>
<th>Name</th>
<th rowspan="2">Grade</th>
</tr>
<tr>
<td>Ayesha</td>
</tr>
</table>
Comments
<!—Comments in HTML -->
FORM ELEMENTS
Form elements are the building blocks inside the <form> tag that allow users to input data,
make selections, and submit information to a server.
Basic form tags
<form>
<label>
<input>
<textarea>
<select>
<option>
<button>
Input tag types
<input type="text"> <!-- Single-line text -->
<input type="password"> <!-- Hidden characters for passwords -->
<input type="email"> <!-- Email address with validation -->
<input type="number"> <!-- Numeric input with spinner -->
<input type="url"> <!-- Website URL -->
<input type="search"> <!-- Search field -->
<input type="date"> <!-- Date picker -->
<input type="time"> <!-- Time picker -->
<input type="datetime-local"> <!-- Date + time picker -->
<input type="month"> <!-- Month and year -->
<input type="week"> <!-- Week of the year -->
<input type="checkbox"> <!-- Multiple selection toggle -->
<input type="radio"> <!-- Single selection from options -->
<input type="color"> <!-- Color picker -->
<input type="file"> <!-- File upload -->
<input type="hidden"> <!-- Hidden field (not visible) -->
<input type="submit"> <!-- Submit button -->
<input type="reset"> <!-- Reset form fields -->
<input type="button"> <!-- Custom button -->
<input type="image"> <!—image-->
FORM ATTRIBUTES AND VALIDATIONS
Basic key attributes & validations
action
method
target
required
maxlength
minlength
placeholder
Handling form submission
Form submission is the process of sending user-entered data from an HTML form to a
server for processing
Example
<form action="filename" method="post/get">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<button type="submit">Submit</button>
</form>
IMAGES AND LINKS HANDLING
Inserting and formatting image
The <img> tag is used to embed an image
Important attributes of image tags
src <!-- Path or URL of the image -->
alt <!-- Alternate text for accessibility -->
width <!-- Width of the image (in px or %) -->
height <!-- Height of the image (in px or %) -->
Example
<img src="[Link]" alt="Sample" width="300" height="200">
Creating hyperlinks
It is use to add links in our website
Common attributes of anchor tag
href <!-- Destination URL -->
target <!-- Where to open the link (_blank, _self, etc.) -->
title <!-- Tooltip text on hover -->
download <!-- Triggers file download -->
Example
<a href="[Link] to Google</a>