Part II — HTML and HTML5
10. HTML meaning, history and document anatomy
HTML stands for HyperText Markup Language. It describes a webpage's structure using elements representing headings, paragraphs, links, tables, forms, and other content. Files conventionally use the .html or .htm extension. HTML is a markup language, not a programming language.
The image breaks the name into Hyper → reference/link; Text → data/information; Markup → predefined/marked; Language → communication.
10.1 HTML Evolution & Specification History
| Year | Event/version as printed |
|---|---|
| 1989 | Tim Berners-Lee invented WWW |
| 1991 | Tim Berners-Lee invented HTML |
| 1993 | Dave Raggett drafted HTML+ |
| 1995 | HTML Working Group defined HTML 2.0 |
| 1997 | W3C Recommendation: HTML 3.2 |
| 1999 | W3C Recommendation: HTML 4.01 |
| 2000 | W3C Recommendation: XHTML 1.0 |
| 2008 | WHATWG HTML5 First Public Draft |
| 2012 | WHATWG HTML5 Living Standard |
| 2014 | W3C Recommendation: HTML5 |
| 2016 | W3C Candidate Recommendation: HTML 5.1 |
| 2017 | W3C Recommendation: HTML5.1 2nd Edition |
| 2017 | W3C Recommendation: HTML5.2 |
Web standards and specifications are maintained continuously by the W3C and WHATWG.
10.2 Basic document
Source-based consolidated example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Welcome to HTML5</h1>
<p>This is my first webpage.</p>
</body>
</html>
| Part | Purpose |
|---|---|
<!DOCTYPE html> |
HTML doctype declaration; standards-mode rendering, avoiding quirks mode; not an HTML element |
<html> |
Root containing the document |
lang |
Document language, useful for assistive technology and language interpretation |
<head> |
Metadata, title, character encoding, style/script/resource information |
<title> |
Browser tab/window title |
<meta charset="UTF-8"> |
Character encoding |
<link> |
Relationship to external resource, such as CSS or favicon |
<style> |
CSS written in the document |
<script> |
Script such as the source's external JavaScript file |
<body> |
Main container for visible document content; the source teaches one body |
<h1> |
Heading |
<p> |
Paragraph |
Language codes taught: en English, fr French, es Spanish, hi Hindi, pa Punjabi. The tree diagram shows html above head and body, with title under head and h1/p under body.
The simplest source output is My First Heading followed by My first paragraph. Other examples print “welcome to web world,” “Welcome to my web page!”, and “Welcome to My Webpage.” All versions remain in Appendix A.
10.3 Tags, elements, attributes and comments
A usual element has a start tag, content, and end tag: <p>This is a paragraph.</p>. Tags use angle brackets; closing tags include /. Attributes appear in the start tag and give extra information, generally a name/value pair.
The anatomy image uses legacy <FONT SIZE="10">this is a font tag</FONT> to label start tag, attribute name SIZE, value 10, content, and end tag. This is a syntax illustration, not a modern font-styling recommendation.
Void/empty elements: Certain elements such as <br>, <hr>, <img>, and <input> have no closing tag in HTML. HTML element tags are case-insensitive, though lowercase is standard industry practice.
<!-- This is a comment -->
<!-- Header Section -->
<h1>College Website</h1>
<!-- Footer Starts -->
Comments document source code and are not displayed as page text. The source's VS Code shortcut is Ctrl + /. The abbreviated <!--> in a later table is not the full comment syntax.
11. HTML5 features, advantages and limitations
Features include native audio/video, new form controls such as date and email, storage, semantic structure, Canvas/SVG graphics, and improved support for mobile applications. The feature image additionally labels Audio, 3D, Video, Games, Storage, Type, Motion. Labels such as <3D> and <Games> in that artwork are feature captions, not literal HTML tag names.
Advantages listed: cross-platform use, geolocation, offline capabilities in the HTML5-era platform, readable semantic markup, and mobile performance. Limitations listed: older-browser inconsistencies, older-mobile issues, risks from misused storage, complexity of advanced APIs, and poor support in IE8 and below. Note: Earlier HTML5 specifications included AppCache for offline caching; modern web standards recommend Service Workers and the Cache API.
The HTML4/HTML5 image maps div id="header" to header, div id="menu" to nav, repeated div class="post" to article, and div id="footer" to footer. It illustrates clearer semantics; it does not mean div disappeared.
11.1 Canvas and progress examples
<canvas id="myCanvas" width="100" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100);
</script>
<progress value="70" max="100"></progress>
The <canvas> element provides a scriptable bitmap drawing area where JavaScript draws 2D shapes, charts, and graphics dynamically via coordinates. The <progress> element displays task completion (e.g. 70 out of 100, or 70%).
12. Semantic and non-semantic HTML
Semantic elements communicate the meaning/role of content. Generic <div> and <span> do not identify a particular content role by their tag names. Both semantic and generic elements can be styled; semantics should not be confused with automatic visual positioning.
12.1 Complete element inventory taught
| Element | Purpose and details |
|---|---|
<header> |
Introductory content; heading(s), logo/icon, navigation, authorship. Multiple headers may occur for different contexts. Source excludes nesting inside a footer, address, or another header. |
<nav> |
Navigation links |
<main> |
Central content; placed inside <body> |
<section> |
Thematic group; chapters, introduction, news items, contact information |
<article> |
Independent content; forum/blog posts, comments, product cards, newspaper/magazine articles, news stories |
<aside> |
Related/secondary content; sidebar, tips, related links, extra facts |
<footer> |
Authorship, copyright, contact, sitemap, back-to-top links, related documents |
<figure> |
Self-contained image, diagram, photograph, chart, illustration or code listing |
<figcaption> |
Figure caption; first or last child of figure in the taught pattern |
<mark> |
Highlighted/relevant text |
<details> |
Expandable/collapsible additional content |
<summary> |
Visible, clickable heading of details |
<time> |
Human-readable date/time with machine-readable information |
<bdi> |
Isolates text direction for mixed/unknown-direction text |
<wbr> |
Optional line-break opportunity |
<datalist> |
Suggested input options |
<keygen> |
Historical key-pair-generation element; source explicitly marks it deprecated |
<output> |
Result of a calculation/script action |
<progress> |
Task progress |
<svg> |
Scalable vector graphics |
<canvas> |
Script-driven drawing |
<audio> |
Audio content |
<video> |
Video content |
<source> |
Alternative media sources; also used in the project picture requirement |
<track> |
Captions/subtitles |
<embed> |
External resource |
In addition, elements like <img>, <table>, and <form> carry clear structural and semantic meaning. Section versus article: a section groups a topic; an article is a self-contained piece. The supplied examples allow an article inside a section.
12.2 Complete Beginner Semantic HTML5 Layout Template
<!DOCTYPE html>
<html>
<head>
<title>My College</title>
</head>
<body>
<header><h1>My College</h1></header>
<nav><a href="#">Home</a> <a href="#">Courses</a></nav>
<main>
<section><h2>Web Technologies</h2>
<article><h3>HTML5</h3><p>HTML creates webpage structure.</p></article>
</section>
<aside><p>Quick Tip: Use semantic tags for meaningful structure.</p></aside>
</main>
<footer><p>© 2026 My College</p></footer>
</body>
</html>
The # links are placeholders. The following practical example demonstrates the core semantic tags working together in a unified document hierarchy.
12.3 Other source examples to understand
- Sections: WWF and WWF's Panda symbol; text includes 1961, the former World Wildlife Fund name, and Chi Chi's transfer from Beijing Zoo to London Zoo.
- Articles: separate Google Chrome, Mozilla Firefox, and Microsoft Edge browser descriptions. Popularity claims are dated example text, not current statistics.
- Header: “What Does WWF Do?” and “WWF's mission,” followed by environmental mission text.
- Footer:
cu@chitkara.edu.in; editable code usesmailto:, while the older screenshot omits it. - Navigation:
/html/,/css/,/js/,/jquery/labelled HTML, CSS, JavaScript, jQuery. - Aside: Epcot family-visit narrative plus an Epcot Center description.
- Figure: Trulli in Puglia/Alberobello, image
pic_trulli.jpg, caption “Fig.1 - Trulli, Puglia, Italy.” - Blog Structure: Header banner, thematic dividers (
<hr>), main article content, and© 2025footer layout.
13. Div, span, block and inline behavior
| Aspect | <div> |
<span> |
|---|---|---|
| Default behavior | Block | Inline |
| New line | Starts a block | Flows with surrounding text |
| Width | Normally available container width | Width needed by content |
| Use | Group larger content/layout regions | Target a word/phrase/small inline region |
| Styling/selection | class, id, CSS, JavaScript |
class, id, CSS, JavaScript |
Common block elements include <p> and <div>. Note that default margins depend on user-agent stylesheets and vary across block elements.
<style>
.myDiv {
border: 5px outset black;
background-color: lightgreen;
text-align: center;
}
</style>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text present in a div element.</p>
</div>
<p>This is text outside the div element.</p>
<p>This is an inline span
<span style="border: 1px solid black">Hello World</span>
element inside a paragraph.
</p>
For example, styling text inside an inline <span> allows targeted color and weight changes within a line, while a block <div> creates a full-width container that starts on a new line.
14. Text, quotations, formatting and character entities
14.1 Headings, paragraphs and line breaks
<h1> through <h6> express heading levels. Source output shows decreasing default sizes, Heading no. 1 through Heading no. 6. <p> creates a paragraph; <br> breaks a line without starting another paragraph; <hr> divides sections with a horizontal rule in default rendering.
<p>This <br> is a para<br> graph with line breaks</p>
The displayed lines are “This”, “is a para”, and “graph with line breaks”. Ordinary HTML whitespace is collapsed in the simple text examples. <pre> preserves preformatted text layout.
14.2 Formatting inventory
| Tag | Meaning / source presentation |
|---|---|
<b> |
Bold/attention styling in examples |
<strong> |
Importance; commonly bold |
<i> |
Italic presentation in source |
<em> |
Emphasis; commonly italic |
<mark> |
Highlight |
<u> |
Underlined presentation in source |
<strike> |
Legacy strikethrough |
<sup> |
Superscript, e.g. x<sup>2</sup> + y<sup>2</sup> |
<sub> |
Subscript, e.g. H<sub>2</sub>O |
<del> |
Deleted content, e.g. Old HTML course |
<ins> |
Inserted content, e.g. New HTML5 course |
<big> |
Legacy increased font-size presentation |
<small> |
Small-print text; source explains smaller presentation |
Legacy elements remain documented because they are taught, with status clarified in Part V.
14.3 Quotation/citation elements and exact examples
| Tag | Role | Source example |
|---|---|---|
<abbr> |
Abbreviation/acronym expansion | WHO, title “World Health Organization”, founded in 1948 in example text |
<address> |
Author/owner contact | Example.com; Box 564, Disneyland; USA |
<bdo> |
Override text direction | dir="rtl" and “This text will go right-to-left.” |
<blockquote> |
Extended quotation | WWF sentence; cite="http://www.worldwildlife.org/who/index.html" |
<cite> |
Title of a work | The Scream, with “Edward Munch” and 1893 as printed |
<q> |
Inline quotation | “Build a future where people live in harmony with nature.” |
The project also has a blockquote reading The Web is for everyone., citing W3C, and an address with email and telephone links. These are source-example contents, not separately researched history or attribution claims.
14.4 Entity table
| Character | Meaning | Named reference | Numeric reference |
|---|---|---|---|
| Non-breaking space | Space without ordinary line break | |
  |
< |
Less than | < |
< |
> |
Greater than | > |
> |
& |
Ampersand | & |
& |
" |
Double quotation mark | " |
" |
' |
Apostrophe | ' |
' |
¢ |
Cent | ¢ |
¢ |
£ |
Pound | £ |
£ |
¥ |
Yen | ¥ |
¥ |
€ |
Euro | € |
€ |
© |
Copyright | © |
© |
® |
Registered trademark | ® |
® |
HTML provides named character references for typographical whitespace: (non-breaking space),   (en-space), and   (em-space). These are character entities, not HTML tags.
15. Hyperlinks and navigation
<a href="url">link text</a>
href gives the destination; link text is the visible label. A link can contain an image rather than text.
target |
Destination context |
|---|---|
_self |
Same tab/window; default in the source |
_blank |
New tab/window |
_parent |
Parent frame |
_top |
Top-level/full window |
<a href="https://www.chitkara.edu.in/" target="_blank">Chitkara University</a>
<a href="about.html">About Us</a>
<a href="#contact">Contact Section</a>
<h2 id="contact">Contact Us</h2>
<a href="mailto:example@gmail.com">Send me an Email</a>
<a href="tel:+911234567890">Call Me</a>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
<button onclick="document.location='default.asp'">HTML Tutorial</button>
Hyperlink destinations can include absolute external URLs (e.g. https://www.w3.org), relative internal paths (e.g. /css/default.asp), or on-page fragment identifiers (e.g. #about).
16. Images and image formats
<img src="images/photo.jpg" alt="Description of the image" width="150" height="100">
src locates the image; alt supplies its textual alternative for unavailable images and assistive technology. An incorrect path can produce a broken-image icon. Relative and absolute URLs are both taught. Image sources can point to local relative paths or absolute online URLs.
The examples include flower.jpg at 500×600, /html/images/test.png at 150×100, img_chania.jpg with Flowers in Chania, 3_small.jpg at 550×450 with Sunset View, and an HTML5 logo at 250×250. Local Windows paths in old examples are machine-specific and are not portable website paths.
Sizing example: A stylesheet img { width: 100%; } overrides the source's width="128" attribute. The second image uses style="width:128px;height:128px;", which wins against that particular ordinary stylesheet rule. This explains the two different screenshots; it is not a statement that inline styles defeat every possible CSS rule.
Legacy image attributes included align, border, hspace, and vspace. Modern web standards strongly recommend using CSS properties (such as margin, border, and vertical-align) instead of deprecated HTML presentation attributes.
| Format | Expansion as taught | Extensions |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image, as printed | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
17. Tables: complete structure and formatting
Tables organize data in rows and columns.
| Element | Role |
|---|---|
<table> |
Table |
<tr> |
Row |
<th> |
Header cell |
<td> |
Data cell |
<caption> |
Table caption |
<colgroup> |
Group of columns |
<col> |
Column properties within group |
<thead> |
Header rows |
<tbody> |
Body rows |
<tfoot> |
Footer rows |
Place caption immediately after the opening table tag in the source pattern. A colgroup follows any caption and precedes row groups/rows. Grouping with Using <thead>, <tbody>, and <tfoot> adds semantic document structure, enabling distinct styling for header, body, and summary footer rows.
17.1 Cleaned basic table example
The following example demonstrates a properly structured data table with CSS border collapsing and cell padding:
<style>
table, th, td { border: 1px solid black; }
th, td { padding: 10px; }
table { width: 500px; border-collapse: collapse; }
</style>
<table>
<caption>My savings</caption>
<tr><th>Month</th><th>Savings</th></tr>
<tr><td>January</td><td>$100</td></tr>
<tr><td>February</td><td>$80</td></tr>
</table>
The original also demonstrates background-color:#000000, float:right, a body background url('image.jpg'), caption text alignment right, and caption-side:bottom; these are separate styling choices, not multiple nested tables.
17.2 Borders, padding and spacing
| Concept | Meaning | Source CSS |
|---|---|---|
| Border | Outline of table/cells | border: 1px solid black; |
| Collapsed borders | Shared adjacent borders | border-collapse: collapse; |
| Cell padding | Content-to-cell-edge space | th, td { padding: 15px; } |
| Cell spacing | Gap between cells | table { border-spacing: 30px; } |
The source quotes default padding 0 and spacing 2px. Treat these as its baseline illustration, not values immune to browser styles or CSS. Legacy examples use cellpadding="5", cellspacing="5", table width="400" height="150", border="1", bordercolor="red", bgcolor="yellow", and background. Their originals remain available; modern CSS versions are distinguished in Part V.
17.3 Rowspan and colspan
rowspan allows a table cell to span multiple vertical rows, while colspan expands a cell across multiple horizontal columns:
<table>
<tr><th rowspan="2">name</th><th colspan="2">marks</th></tr>
<tr><th>WT</th><th>ES</th></tr>
<tr><td>student1</td><td>95</td><td>75</td></tr>
<tr><td>student2</td><td>75</td><td>55</td></tr>
</table>
17.4 Image-only colgroup example
The following code demonstrates row spanning in an HTML table:
<style>
table, th, td { border: 1px solid black; }
</style>
<h1>The colgroup element</h1>
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr><th>ISBN</th><th>Title</th><th>Price</th></tr>
<tr><td>3476896</td><td>My first HTML</td><td>$53</td></tr>
<tr><td>5869207</td><td>My first CSS</td><td>$49</td></tr>
</table>
Output: first two columns red, price column yellow. The screenshot's enclosing doctype/html/head/body wrapper is visible in Appendix B.
17.5 Every distinct source data set
The exact tables and their code remain in Appendix A. Distinct values to recognize:
- Company/contact/country: Alfreds Futterkiste / Maria Anders / Germany; Centro comercial Moctezuma / Francisco Chang / Mexico; Ernst Handel / Roland Mendel / Austria; Island Trading / Helen Bennett / UK; Laughing Bacchus Winecellars / Yoshi Tannamuri / Canada; Magazzini Alimentari Riuniti / Giovanni Rovelli / Italy.
- Names/ages: Emil, Tobias, Linus with 16,14,10, and headings Person 1, Person 2, Person 3.
- Unheaded table: Jill Smith 50; Eve Jackson 94.
- Salary: Ramesh Raman 5000; Shabbir Hussein 7000.
- Red border: Shivam 50,000.00; Vansh 45,000.00.
- Yellow background: Jayapal 50,000.00; Ravi 45,000.00.
- Row groups: Mon/TG; Tue/PG; wed/tesla under Day/venue.
- Caption-size example: This is the caption with Row 1/2, Column 1/2 cells.
- Course schedule: retained in Part IV, including its original 11 Hours total.
18. Lists
| Type | Container and items | Use |
|---|---|---|
| Unordered | <ul> with <li> |
Related items without required order |
| Ordered | <ol> with <li> |
Sequence / numbering |
| Description/definition | <dl> with <dt> term and <dd> description |
Glossaries and name/value descriptions |
Source list items: Beetroot, Ginger, Potato, Radish. Other overview examples: html, css, javascript; Coffee, Tea, Milk; Coffee — black hot drink; Milk — white cold drink.
<ul>
<li>Beetroot</li><li>Ginger</li><li>Potato</li><li>Radish</li>
</ul>
<ol type="i" start="4">
<li>Beetroot</li><li>Ginger</li><li>Potato</li><li>Radish</li>
</ol>
<dl>
<dt>HTML</dt><dd>This stands for Hyper Text Markup Language</dd>
<dt>HTTP</dt><dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
Ordered types: 1 numerals; I uppercase Roman; i lowercase Roman; A uppercase letters; a lowercase letters. With start="4", initial markers are 4, IV, iv, D, d respectively. The illustrated lower-Roman output is iv, v, vi, vii.
Unordered list marker styles include disc (default), square, and circle. Nested lists provide structured groupings, such as organizing HTML, CSS, and JavaScript under Frontend Development, and Node.js, Python, and PHP under Backend Development.
19. Audio, video, embedding and marquee
19.1 Audio and video
<audio controls loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls autoplay muted loop>
<source src="Colourmixing.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
These consolidate source examples and repair the curly quote after Colourmixing.mp4. Other source files are abc.m4a, movie.mp4, audio/sample.mp3, video/html-course.mp4.
| Attribute/element | Purpose |
|---|---|
controls |
Browser playback controls: play, pause, volume; video includes fullscreen |
autoplay |
Requests automatic playback (subject to modern browser user-gesture restrictions) |
muted |
Initially muted audio output |
loop |
Repeats playback; not a numeric repetition count for audio/video |
width, height |
Video dimensions; reserve space in the layout |
poster |
Image displayed before video plays (e.g., images/video-thumbnail.jpg) |
<source> |
Specifies multiple media resources for browser selection based on codec compatibility |
<track> |
Specifies text tracks (subtitles, captions, descriptions, chapters) using WebVTT format (.vtt) |
| Fallback text | Rendered for legacy browsers without HTML5 media support |
preload="metadata" |
Restricts advance loading to media metadata (duration, dimensions) to conserve bandwidth |
Accessible HTML5 Video Example with Subtitles (W3Schools Standard):
<video width="640" height="360" controls poster="thumbnail.jpg">
<source src="presentation.mp4" type="video/mp4">
<source src="presentation.webm" type="video/webm">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<p>Your browser does not support HTML5 video. <a href="presentation.mp4">Download video</a>.</p>
</video>
The source notes that a counted video loop would require additional logic such as JavaScript. Autoplay may be blocked; adding muted does not create a universal playback guarantee.
Standard native audio formats include MP3, WAV, OGG; standard native video formats include MP4, WebM, OGG:
| Browser label in source | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | YES | YES* | YES* |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
The stars have no explanation in the supplied table; they are not silently interpreted.
19.2 Embedded resources
<embed src="ball.svg" width="500" height="450">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/UB1O30fR-EE"
title="HTML Tutorial" allowfullscreen></iframe>
<iframe src="https://example.com" width="600" height="300"
title="Example Website"></iframe>
SVG stands for Scalable Vector Graphics, an XML-based format for two-dimensional vector graphics with support for interactivity and animation, distinct from legacy plugin-based media formats.
19.3 Marquee, retained as legacy syllabus material
<marquee> scrolls text or images horizontally/vertically; the source explicitly calls it deprecated in HTML5.
| Attribute | Values/details from source |
|---|---|
direction |
left, right, up, down |
behavior |
scroll, slide, alternate |
scrollamount |
Higher means faster; default 6 in source |
scrolldelay |
Delay in milliseconds; higher means slower |
loop |
Number of repetitions; default infinite in source |
bgcolor |
Name/hex color |
width, height |
Dimensions; source lists pixels/percentages |
hspace, vspace |
Outer spacing in the longer example |
scroll: repeats scrolling, default right-to-left example. slide: moves in and stops. alternate: bounces back and forth.
Legacy examples: <marquee>WELCOME</marquee>; and styling with behavior slide, direction right, scrollamount 25, loop 4. Note that marquee is deprecated in modern HTML.