L-2 HTML From Basic to Advance
16 June 2025
17:05
HyperText Markup Language
HyperText: -Hypertext is a system of managing and presenting text in a non-linear format, where
you can jump from one part of the text to another via links, called hyperlinks.
Hypertext is text with links
Key Features of Hypertext:
Non-linear: Unlike reading a book from start to finish, you can jump around using links.
Interactive: Users control the path they take through information.
Flow of control of information is decided by users.
Markup Language and how it is different from programming language
A markup language is a way to annotate text so that a computer can understand how to
display or organize it.
o it describes structure and formatting.
o The most well-known example is HTML (HyperText Markup Language), which is used
to create and structure content on web pages.
o Purpose : Structure and format text
o Action execution : No
o Contains : No logic
o Eg : HTML, XML (
eXtensible Markup Language, is a markup language designed for encoding documents in
a format that is both human-readable and machine-readable
o Contains Logic : No
A programming language is used to write software that performs actions or computations.
o Purpose :- Perform logic and computation
o Action execution : yes
o Contains : logic
Purpose of HTML
An HTML element defines the structure/content (e.g., a paragraph, image, or link).
An attribute provides additional information about an element (like a URL, style, ID, etc.).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my first web page.</p>
</body>
</html>
<!DOCTYPE html> Declares document type and HTML version
<html> root element
<head> Metadata, title, links, etc.
The <meta> tag in HTML provides metadata about the HTML document.
Metadata is data about data — it describes the page, but it's not displayed directly on the
web page.
o It's always placed inside the <head> section of the HTML document.
Meta Tag Purpose
<meta charset="UTF-8"> Defines the character encoding (UTF-8
supports most languages/symbols).
<meta name="viewport" Makes the page responsive on mobile
content="width=device-width, initial- devices.
scale=1.0">
<meta name="description" content="A Helps search engines understand what
short description of the page"> your page is about (SEO).
<meta name="keywords" content="HTML, (Less used today) Keywords for search
web development, meta tags"> engines.
<meta name="author" content="Your States who created the page.
Name">
<body> visible content of page
Term Description
Tag The command inside angle brackets like <p>
Element The full structure: opening tag + content + closing tag
Self-closing Tag Tag that doesn’t need a closing tag
Inline vs Block Elements
Block :- Block elements start on a new line and take up the full width of their parent container by
default.
Examples : <div> <p> <h1> to <h6> <ul> <ol> <li> <section> <nav>
Inline Elements : Inline elements do not start on a new line. They sit next to each other and only take
up as much width as necessary.
<span> <a> <img> <strong> <em> <b> <i> <input> <label>
<html> — Root Element
o Wraps the whole HTML document.
o Typically has no attributes, but can include lang.
Attribute Description
lang Language of the document (en, fr, etc.)
o <html lang="en">
<head> and <title>
o <head> contains metadata, scripts, links etc.
o <title> sets the browser title
<body>
o Contains everything visible on the page.
Attribute Description
style Inline CSS styling
class CSS class name(s)
id Unique identifier for scripting/CSS
Attribute Description
style Inline CSS styling
class CSS class name(s)
id Unique identifier for scripting/CSS
<h1> to <h6>
<p>
<a>
o <a href="https://example.com" target="_blank">Visit Example</a>
Attribute Description
href URL to link to
target Where to open the link (_blank, _self)
title Tooltip on hover
<img>
o <img src="logo.png" alt="Company Logo" width="100" height="50">
Attribute Description
src Image source (URL or path)
alt Alternate text if image doesn't load
width Width of image (in px or %)
height Height of image
o ✅ Self-closing tag — doesn't need a closing tag.
<ul> <ol> <li>
o Unordered list bullets
o Ordered list
Attribute Description
type For <ol>, can be 1, A, a, I, etc.
<ol type="A">
<li>Step 1</li>
<li>Step 2</li>
</ol>
<input>
o ✅ Self-closing tag — doesn't need a closing tag.
o <input type="text" name="username" placeholder="Enter your name">
Attribute Description
type Type of input (text, password, email, etc.)
name Name of the input (used in forms)
placeholder Hint text shown inside input
value Default input value
required Makes the field mandatory
<button>
Attribute Description
type Can be submit, reset, button
disabled Makes the button inactive
HTML Text Formatting
o <b> / <strong> – Bold text
o <i> / <em> – Italic text
o <u> – Underlined text
o <mark> – Highlight
o <small> – Small text
o <del> – Deleted text
o <ins> – Inserted text
HTML Forms
o Used to collect user input.
<form action="/submit" method="POST">
<label>Name:</label>
<input type="text" name="username">
<input type="submit" value="Submit">
</form>
o <input>, <textarea>, <button>, <select>, <option>, <label>
o Input Types : text, password, checkbox, radio, email, file, submit, button
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<textarea name="message" rows="5" cols="30">
Enter your message here...
</textarea>
o name: Specifies the name of the textarea (used when submitting the form).
o rows: Defines the number of visible text lines.
o cols: Defines the visible width in average character widths.
o placeholder: Text shown when the textarea is empty.
o maxlength: Limits the number of characters.
o readonly: Makes the textarea non-editable.
o disabled: Disables the textarea.
o required: Makes the field mandatory in a form.
<form>
<label for="feedback">Your Feedback:</label><br>
<textarea id="feedback" name="feedback" rows="6" cols="50" placeholder="Write your feedback
here..." required></textarea>
</form>
HTML Tables
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
<table>, <tr>, <td>, <th>, <caption>, <thead>, <tbody>, <tfoot>
Inline vs Block Elements
Block Elements
o Start on a new line
o Take up the full width of the parent container (by default)
o Stack vertically
o Can contain inline elements and other block elements
o Eg <div> <p> <h1> to <h6> <ul> <ol><li>
o <section> <article> <header> <footer>
Inline Elements
o Do not start on a new line
o Only take up as much width as necessary
o Sit next to other inline elements (flow with text)
o Can only contain text or other inline elements
o <span> <a> <strong> <em> <b> <i> <img> <input>
Feature Block Elements Inline Elements
Starts on a new line ✅ Yes ❌ No
Takes full width ✅ Yes ❌ No (just the content width)
Stack direction Vertical Horizontal (within a line)
Can contain Block + Inline elements Inline elements and text only
Example tags <div>, <p>, <h1>, <ul> <span>, <a>, <img>, <strong>
There’s also a third type: inline-block, which mixes both behaviors — it stays inline but
allows height and width control.
o <img>, <input>, <select>, <textarea>
o <button>
Semantic vs non-semantic tags
Tag Purpose
<header> Page/header section
<footer> Bottom content
<nav> Navigation links
<section> A section of content
<article> Standalone content
<aside> Side content
<main> Main page content
<figure> / <figcaption> – Images with captions
HTML entities are special codes used to represent characters that either:
Have special meanings in HTML (like <, >, &)
Aren’t available on the keyboard (like ©, ™, emojis, math symbols)
Character Entity Name Entity Number Description
& & & Ampersand
< < < Less-than
> > > Greater-than
" " " Double quote
' ' ' Apostrophe (not fully supported in older
HTML)
© © © Copyright symbol
® ® ® Registered trademark
™ ™ ™ Trademark
€ € € Euro currency symbol
  Non-breaking space
1. New Semantic Elements
HTML5 introduced elements that better describe the structure of web content:
o <header>
o <footer>
o <article>
o <section>
o <nav>
o <aside>
o <main>
2. Multimedia Support (Without Plugins)
o <audio> and <video> elements allow embedding media directly.
o No need for Flash or third-party plugins.
3. Form Enhancements
New input types:
o email, url, tel, date, range, color, etc.
New attributes:
o placeholder, required, autofocus, pattern, etc.
4. Local Storage
o localStorage and sessionStorage let web apps store data on the client side.
5. Improved Accessibility and Semantics
Better support for screen readers and search engines.
