How unit 2 is examined
HTML document structure, links, lists, forms, XHTML and frames carry the marks; browser architecture and HTML5 are asked as low-weight 7-markers, and the rest is short but must not be missing.
Basics of HTML
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">High weight</span>
Definition. A web page is a document on the World Wide Web, fetched from a web server and displayed by a browser. <mark>HTML (HyperText Markup Language) is the standard markup language that describes the structure of a web page using tags, and it is an application of SGML.</mark>
Key points.
- A static web page has fixed content stored as a file on the server and sent unchanged to every visitor, for example an "About us" page.
- A dynamic web page is generated at request time by server-side code (PHP, JSP) or changed in the browser by client-side JavaScript, so its content can differ per user, for example a mail inbox.
- SGML (Standard Generalized Markup Language) is the parent meta-language of HTML; its goals are device independence, reusability of documents and standardization of markup.
- An HTML document has a
<!DOCTYPE html>declaration, then the<html>root holding a<head>(not displayed) and a<body>(displayed). - The head holds title, meta, link (external CSS) and script elements; the body holds headings
<h1>-<h6>, paragraphs<p>, lists, tables, forms and images. - Tags come in pairs (
<p>...</p>) or as empty tags (<br>,<hr>,<img>), and attributes give extra information asname="value". - Tag categories: structural (
html,head,body,div), formatting (b,i,u,font), list (ol,ul,dl), table (table,tr,td), form (form,input) and media (img,audio,video).
Diagram. <figure class="ds-fig" style="margin:1.4rem 0;overflow-x:auto"><svg xmlns="http://www.w3.org/2000/svg" id="dsfig-u2-01" viewBox="0 0 540 198" width="540" height="198" role="img" aria-label="Structure of an HTML document"><style>#dsfig-u2-01 .e{stroke:#454C5A;stroke-width:1.4;fill:none}#dsfig-u2-01 .e.hi{stroke:#2340B8;stroke-width:2.6}#dsfig-u2-01 .n{fill:#FFFFFF;stroke:#16181D;stroke-width:1.4}#dsfig-u2-01 .n.hi{fill:#E3E9FC;stroke:#2340B8;stroke-width:2.2}#dsfig-u2-01 .n.rb-b{fill:#16181D;stroke:#16181D}#dsfig-u2-01 .n.rb-r{fill:#BD3227;stroke:#BD3227}#dsfig-u2-01 text{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:13px}#dsfig-u2-01 .t{fill:#16181D;font-weight:500}#dsfig-u2-01 .t.inv{fill:#FFFFFF;font-weight:700}#dsfig-u2-01 .kd{stroke:#16181D;stroke-width:1.2}#dsfig-u2-01 .dot{fill:#16181D}#dsfig-u2-01 .ann{fill:#2340B8;font-size:11px;font-weight:700}#dsfig-u2-01 .lbl{fill:#6F7787;font-family:system-ui,-apple-system,sans-serif;font-size:12px;font-weight:700}#dsfig-u2-01 .ptr{fill:#2340B8;font-size:12px;font-weight:700}#dsfig-u2-01 .ah{fill:#454C5A}#dsfig-u2-01 .ah.hi{fill:#2340B8}#dsfig-u2-01 .wl rect{fill:#FFFFFF;stroke:#DCE0E7}#dsfig-u2-01 .wl .t{font-size:12px;font-weight:700}#dsfig-u2-01 .wl.hi rect{fill:#2340B8;stroke:#2340B8}#dsfig-u2-01 .wl.hi .t{fill:#FFFFFF}html.dark #dsfig-u2-01 .e{stroke:#B1B7C3}html.dark #dsfig-u2-01 .e.hi{stroke:#8FA3FF}html.dark #dsfig-u2-01 .n{fill:#161920;stroke:#E6E8ED}html.dark #dsfig-u2-01 .n.hi{fill:#1E2748;stroke:#8FA3FF}html.dark #dsfig-u2-01 .n.rb-b{fill:#E6E8ED;stroke:#E6E8ED}html.dark #dsfig-u2-01 .n.rb-r{fill:#FF7E71;stroke:#FF7E71}html.dark #dsfig-u2-01 .t{fill:#E6E8ED}html.dark #dsfig-u2-01 .t.inv{fill:#0F1115}html.dark #dsfig-u2-01 .kd{stroke:#E6E8ED}html.dark #dsfig-u2-01 .dot{fill:#E6E8ED}html.dark #dsfig-u2-01 .ann{fill:#8FA3FF}html.dark #dsfig-u2-01 .lbl{fill:#858D9C}html.dark #dsfig-u2-01 .ptr{fill:#8FA3FF}html.dark #dsfig-u2-01 .ah{fill:#B1B7C3}html.dark #dsfig-u2-01 .ah.hi{fill:#8FA3FF}html.dark #dsfig-u2-01 .wl rect{fill:#161920;stroke:#2A2E37}html.dark #dsfig-u2-01 .wl.hi rect{fill:#8FA3FF;stroke:#8FA3FF}html.dark #dsfig-u2-01 .wl.hi .t{fill:#0F1115}</style><defs><marker id="ah3" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path class="ah" d="M0,1 L9,5 L0,9 z"/></marker><marker id="ahh3" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path class="ah hi" d="M0,1 L9,5 L0,9 z"/></marker></defs><line class="e" x1="236.1" y1="39" x2="113.3" y2="103"/><line class="e" x1="236.1" y1="39" x2="359" y2="103"/><line class="e" x1="113.3" y1="103" x2="43.5" y2="167"/><line class="e" x1="113.3" y1="103" x2="115" y2="167"/><line class="e" x1="113.3" y1="103" x2="183" y2="167"/><line class="e" x1="359" y1="103" x2="242" y2="167"/><line class="e" x1="359" y1="103" x2="292" y2="167"/><line class="e" x1="359" y1="103" x2="342" y2="167"/><line class="e" x1="359" y1="103" x2="404.5" y2="167"/><line class="e" x1="359" y1="103" x2="476" y2="167"/><rect class="n" x="210.1" y="24" width="52" height="30" rx="8"/><text class="t" x="236.1" y="39" dy=".35em" text-anchor="middle">html</text><rect class="n" x="87.3" y="88" width="52" height="30" rx="8"/><text class="t" x="113.3" y="103" dy=".35em" text-anchor="middle">head</text><rect class="n" x="14" y="152" width="59" height="30" rx="8"/><text class="t" x="43.5" y="167" dy=".35em" text-anchor="middle">title</text><rect class="n" x="89" y="152" width="52" height="30" rx="8"/><text class="t" x="115" y="167" dy=".35em" text-anchor="middle">meta</text><rect class="n" x="157" y="152" width="52" height="30" rx="8"/><text class="t" x="183" y="167" dy=".35em" text-anchor="middle">link</text><rect class="n" x="333" y="88" width="52" height="30" rx="8"/><text class="t" x="359" y="103" dy=".35em" text-anchor="middle">body</text><circle class="n" cx="242" cy="167" r="17"/><text class="t" x="242" y="167" dy=".35em" text-anchor="middle">h1</text><circle class="n" cx="292" cy="167" r="17"/><text class="t" x="292" y="167" dy=".35em" text-anchor="middle">p</text><circle class="n" cx="342" cy="167" r="17"/><text class="t" x="342" y="167" dy=".35em" text-anchor="middle">ul</text><rect class="n" x="375" y="152" width="59" height="30" rx="8"/><text class="t" x="404.5" y="167" dy=".35em" text-anchor="middle">table</text><rect class="n" x="450" y="152" width="52" height="30" rx="8"/><text class="t" x="476" y="167" dy=".35em" text-anchor="middle">form</text></svg><figcaption style="font-size:.82em;opacity:.72;margin-top:.45rem">Structure of an HTML document</figcaption></figure>
Example.
<!DOCTYPE html>
<html>
<head><title>My Page</title><meta charset="UTF-8"></head>
<body><h1>Hello</h1><p>First page.</p></body>
</html>
Answer frame. Open with the definition of HTML/web page and SGML; draw the tree above; develop points 4-5 with the example code, then tags of points 6-7 (and 1-2 for the web-page question, 3 for the SGML question); close with "HTML tags tell the browser how to structure and display content".
Asked: [7 marks] (Dec 2020) What is Web Page? Explain types of web pages. Asked: [7 marks] (Dec 2024) What is HTML? List the goals of SGML. Explain the various HTML tags to develop the web pages. Asked: [7 marks] (Dec 2025) Explain HTML structure, forms, tables and meta tags. Asked: [7 marks] (Jun 2025) Explain the basic structure of an HTML document.
Formatting and fonts
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>
Definition. Text formatting tags change how text looks without changing its meaning.
Key points.
<b>/<strong>gives bold,<i>/<em>italic,<u>underline,<sub>and<sup>subscript and superscript,<big>and<small>size changes.<font face="Arial" size="4" color="red">sets typeface, size (1-7) and colour; it is deprecated in favour of CSS.- Headings
<h1>(largest) to<h6>,<br>for a line break and<hr>for a horizontal rule.
Commenting code
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>
Definition. A comment is text in the source that the browser ignores: <!-- comment -->.
Key points.
- Comments explain code to developers and are not displayed.
- They can span several lines and are used to disable code temporarily.
- They stay visible in "view source", so secrets must never be put in them.
Color
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>
Definition. Colour is given by name, hexadecimal code or RGB value, for example red, #FF0000, rgb(255,0,0).
Key points.
- A hex code
#RRGGBBhas two hexadecimal digits each for red, green and blue, so#000000is black and#FFFFFFis white. - Page colours are set with
bgcolor,text,link,vlink,alinkon<body>(old HTML) or with CSScolorandbackground-color. - There are 16 million (256^3) possible colours; the 16 basic colour names work on every browser.
Hyperlink
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Medium weight</span>
Definition. A hyperlink is a clickable element that moves the user to another resource or another part of the same page, created with the anchor tag <a>. ==Internal linking links to a location inside the same page, using an id on the target and href="#id" on the anchor.==
Key points.
- The
hrefattribute holds the destination URL, and the text between<a>and</a>is the visible link. - An external link uses an absolute URL (
href="https://www.rgpv.ac.in"), while a relative URL (href="page2.html") points to a file on the same site. target="_blank"opens the link in a new window andtitlegives a tooltip.- For internal linking, first mark the target with
id, for example<h2 id="sec2">. - Then create the link
<a href="#sec2">Go to Section 2</a>; clicking scrolls to the target (the old form used<a name="sec2">). - Links to another page's part combine both:
href="page.html#sec2". mailto:links open the mail client:<a href="mailto:[email protected]">.
Example.
<a href="#end">Jump to end</a>
<p>...long text...</p>
<h3 id="end">The End</h3>
<a href="https://example.com" target="_blank">Visit</a>
Answer frame. Open with the definition of a hyperlink and internal linking; develop points 4-5 as two steps with the example, then points 1-3; for the anchor/image/table question give the syntax and attributes of each tag (see Images and Tables) with one example; close with "the anchor tag makes web pages hypertext".
Asked: [7 marks] (Nov 2019) What do you mean by internal Linking? How is it done in HTML? Asked: [7 marks] (Nov 2022) List out the following HTML tags and explain with suitable examples: anchor, image and table tags.
Lists
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Medium weight</span>
Definition. An HTML list groups related items. <mark>HTML has three list types: ordered (<ol>), unordered (<ul>) and definition (<dl>) lists.</mark>
Key points.
- An ordered list numbers its items; its
typeattribute chooses 1, A, a, I or i andstartsets the first number. - An unordered list marks items with bullets;
typecan be disc, circle or square. - Each item of
<ol>and<ul>is written in<li>. - A definition list holds terms and descriptions:
<dt>is the term and<dd>its description, shown indented. - Lists can be nested by putting a list inside an
<li>.
Example.
<ol type="A"><li>HTML</li><li>CSS</li></ol>
<ul type="square"><li>Tea</li><li>Milk</li></ul>
<dl><dt>WWW</dt><dd>World Wide Web</dd></dl>
Output: A. HTML, B. CSS; two square bullets Tea and Milk; the term WWW with "World Wide Web" indented below it.
Answer frame. Open with the definition; write one code block per list type as above and describe its rendered output; then attributes (points 1-2) and nesting; close with "lists organise content for easy reading". For the Jun 2025 question add the <img> answer of the Images topic.
Asked: [7 marks] (Dec 2020, Nov 2022) Explain various types of lists that can be created in HTML giving suitable example; design the different list tag elements with simple programs. Asked: [7 marks] (Jun 2025) What is an HTML list, and what are the different types of lists? How do you add images to an HTML document?
Tables
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Low weight</span>
Definition. A table arranges data in rows and columns using <table>, <tr> (row), <th> (heading cell) and <td> (data cell). <mark>Cellpadding is the space inside a cell between its content and its border; cellspacing is the space between adjacent cells.</mark>
Key points.
<table border="1" cellpadding="10" cellspacing="5">sets a border, 10 px padding inside each cell and 5 px gap between cells.- Larger cellpadding makes cells roomier; larger cellspacing separates cells and thickens the grid.
colspanandrowspanmerge cells across columns or rows, and<caption>titles the table.- Other attributes:
width,align,bgcolor.
Asked: [7 marks] (Nov 2019) Explain Cell padding and Cell spacing.
Images
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>
Definition. The empty tag <img> embeds an image: <img src="a.jpg" alt="Logo" width="100" height="80">.
Key points.
srcgives the image file path or URL andaltthe text shown if the image fails to load (also used by screen readers).widthandheightset the size in pixels;borderandalignare older attributes.- An image becomes a link when placed inside
<a>. - Common formats are JPEG, PNG and GIF.
Forms
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Medium weight</span>
Definition. An HTML form collects user input and sends it to a server; it is created with <form> holding input fields. <mark>The action attribute gives the URL that processes the data and method gives how it is sent (GET or POST).</mark>
Key points.
actionis the server program that receives the data, andmethod="get"appends data to the URL (visible, limited length) whilemethod="post"sends it in the request body.namenames the form,targetsays where the response opens (_self,_blank), andenctypegives the encoding (application/x-www-form-urlencoded, ormultipart/form-datafor file upload).- Also
autocomplete. <input type="...">makes the fields:text,password(masked),radio(one choice, samename),checkbox(many choices),file,hidden,submit,reset,button.<textarea rows cols>gives multi-line text and<select><option>a drop-down list.<label>names a field, andnameon every field is the key sent to the server.submitsends the form andresetclears all fields.
Example.
<form action="save.php" method="post">
Name: <input type="text" name="name"><br>
Phone: <input type="text" name="phone"><br>
<input type="submit" value="Send">
<input type="reset" value="Clear">
</form>
Answer frame. For the attributes question define <form> then explain points 1-3 one by one with the example; for the fields question give point 4-5 as a list and the example; for the program question write the complete document (<html><body> around the form above); close with "forms make web pages interactive".
Asked: [7 marks] (Nov 2019) Describe all the attributes of
<Form>tag. Asked: [7 marks] (Dec 2020) Write an HTML document to provide a form that collect name and phone numbers. Asked: [7 marks] (Jun 2020) What are FORMS? Explain different FORM fields.
XHTML
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Medium weight</span>
Definition. XHTML (Extensible HyperText Markup Language) is HTML rewritten as an XML application, so documents must be well-formed. <mark>HTML is forgiving about syntax, whereas XHTML follows strict XML rules.</mark>
Key points.
- XHTML tags and attribute names must be lowercase, while HTML accepts any case.
- Every non-empty element must be closed in XHTML (
<p>text</p>), whereas HTML allows<p>text. - Empty elements must be self-closed in XHTML (
<br />), whereas HTML writes<br>. - Elements must be properly nested in XHTML (
<b><i>x</i></b>), while HTML browsers tolerate overlap. - Attribute values must be quoted and given in full (
checked="checked"), whereas HTML allowswidth=10andchecked. - XHTML needs one root
<html>element with an xmlns namespace and a DOCTYPE, and a browser stops on an error.
| Point | HTML | XHTML |
|---|---|---|
| Base | SGML | XML |
| Case | Not sensitive | Lowercase only |
| Closing tags | Optional, <p> |
Required, <p></p> |
| Empty tags | <br> |
<br /> |
| Attribute values | Quotes optional | Quotes compulsory |
| Errors | Tolerated | Document rejected |
Answer frame. Open with the two definitions; give the table, then one paired example (<P>Hi<BR> versus <p>Hi<br /></p>); close with "XHTML is stricter, cleaner and machine-readable".
Asked: [7 marks] (Jun 2020, Nov 2023, Dec 2024) Discuss the difference between HTML and XHTML with respect to elements; differentiate HTML and XHTML with suitable examples; define XHTML and give the differences with an example.
Meta tags
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>
Definition. Meta tags are empty <meta> tags in <head> that give metadata about the page, not displayed.
Key points.
<meta name="description" content="...">andname="keywords"help search engines (SEO), andname="author"names the writer.<meta charset="UTF-8">sets the character encoding andname="viewport"controls mobile scaling.<meta http-equiv="refresh" content="5;url=x.html">redirects after 5 seconds.
Character entities
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>
Definition. A character entity is a code that displays a reserved or special character, written &name; or &#number;.
Key points.
<shows <,>shows >,&shows &,"shows a double quote. inserts a non-breaking space,©gives the copyright sign and®the registered sign.- They are needed because
<and&would otherwise be read as markup.
Frames and frame sets
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Medium weight</span>
Definition. Frames divide the browser window into independent panes, each showing a separate HTML document. ==A <frameset> replaces <body> and defines the panes with rows or cols, and each pane is a <frame src="...">.==
Key points.
rows="20%,80%"splits the window horizontally andcols="30%,70%"vertically; sizes may be percentages, pixels or*.<frame>attributes aresrc,name(so a link can usetarget="name"),noresize,scrollingandframeborder.<noframes>gives content for browsers that do not support frames.- The inline frame tag (iframe, with
src,width,height) places a frame inside a normal page. - Layers are overlapping blocks made with
<div>and CSSposition(absolute),top,leftandz-index, which decides which layer is on top. - Advantages: a fixed menu stays while content changes and only one pane reloads. Disadvantages: bookmarking and printing are hard, search engines index them poorly, and frames are obsolete in HTML5.
Example (Nov 2023 program).
<html>
<frameset rows="20%,80%">
<frame src="top.html">
<frameset cols="30%,70%">
<frame src="left.html">
<frame src="right.html">
</frameset>
</frameset>
</html>
Output: a top pane of 20% height, and below it a left pane 30% wide and a right pane 70% wide.
Answer frame. Open with the definition of frames; draw the layout output; write the frameset code, then points 2-4; add layers (point 5) for the frames-and-layers question with a div example; for the program question give only the code and layout; close with the advantages.
Asked: [7 marks] (Jun 2020, Nov 2022) How Frames and Layers uses in HTML? Explain with examples; enlighten the concept of frames with a suitable program. Asked: [7 marks] (Nov 2023) Write an HTML program to divide your browsing window into 3 parts consisting of 2 rows of size 20% and 80% and divide the last row into two columns of size 30% and 70%.
Browser architecture and Web site structure
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Low weight</span>
Definition. A browser is software that fetches, interprets and displays web content. <mark>The rendering engine turns HTML and CSS into pixels through parse, DOM/CSSOM, render tree, layout and paint.</mark>
Key points.
- Main components: user interface, browser engine (links UI and rendering engine), rendering engine, networking, JavaScript interpreter, UI backend and data storage.
- Networking fetches the page over HTTP; the rendering engine parses HTML into the DOM tree and CSS into the CSSOM.
- DOM and CSSOM combine into the render tree of visible nodes; layout computes size and position, and paint draws them, while the JavaScript engine can modify the DOM.
- Web site structure is linear, hierarchical (tree) or web (mesh) organised pages linked from a home page.
<figure class="ds-fig" style="margin:1.4rem 0;overflow-x:auto"><svg xmlns="http://www.w3.org/2000/svg" id="dsfig-u2-02" viewBox="0 0 338 209" width="338" height="209" role="img" aria-label="UI user interface, BE browser engine, RE rendering engine, NET networking, JS interpreter, ST data storage"><style>#dsfig-u2-02 .e{stroke:#454C5A;stroke-width:1.4;fill:none}#dsfig-u2-02 .e.hi{stroke:#2340B8;stroke-width:2.6}#dsfig-u2-02 .n{fill:#FFFFFF;stroke:#16181D;stroke-width:1.4}#dsfig-u2-02 .n.hi{fill:#E3E9FC;stroke:#2340B8;stroke-width:2.2}#dsfig-u2-02 .n.rb-b{fill:#16181D;stroke:#16181D}#dsfig-u2-02 .n.rb-r{fill:#BD3227;stroke:#BD3227}#dsfig-u2-02 text{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:13px}#dsfig-u2-02 .t{fill:#16181D;font-weight:500}#dsfig-u2-02 .t.inv{fill:#FFFFFF;font-weight:700}#dsfig-u2-02 .kd{stroke:#16181D;stroke-width:1.2}#dsfig-u2-02 .dot{fill:#16181D}#dsfig-u2-02 .ann{fill:#2340B8;font-size:11px;font-weight:700}#dsfig-u2-02 .lbl{fill:#6F7787;font-family:system-ui,-apple-system,sans-serif;font-size:12px;font-weight:700}#dsfig-u2-02 .ptr{fill:#2340B8;font-size:12px;font-weight:700}#dsfig-u2-02 .ah{fill:#454C5A}#dsfig-u2-02 .ah.hi{fill:#2340B8}#dsfig-u2-02 .wl rect{fill:#FFFFFF;stroke:#DCE0E7}#dsfig-u2-02 .wl .t{font-size:12px;font-weight:700}#dsfig-u2-02 .wl.hi rect{fill:#2340B8;stroke:#2340B8}#dsfig-u2-02 .wl.hi .t{fill:#FFFFFF}html.dark #dsfig-u2-02 .e{stroke:#B1B7C3}html.dark #dsfig-u2-02 .e.hi{stroke:#8FA3FF}html.dark #dsfig-u2-02 .n{fill:#161920;stroke:#E6E8ED}html.dark #dsfig-u2-02 .n.hi{fill:#1E2748;stroke:#8FA3FF}html.dark #dsfig-u2-02 .n.rb-b{fill:#E6E8ED;stroke:#E6E8ED}html.dark #dsfig-u2-02 .n.rb-r{fill:#FF7E71;stroke:#FF7E71}html.dark #dsfig-u2-02 .t{fill:#E6E8ED}html.dark #dsfig-u2-02 .t.inv{fill:#0F1115}html.dark #dsfig-u2-02 .kd{stroke:#E6E8ED}html.dark #dsfig-u2-02 .dot{fill:#E6E8ED}html.dark #dsfig-u2-02 .ann{fill:#8FA3FF}html.dark #dsfig-u2-02 .lbl{fill:#858D9C}html.dark #dsfig-u2-02 .ptr{fill:#8FA3FF}html.dark #dsfig-u2-02 .ah{fill:#B1B7C3}html.dark #dsfig-u2-02 .ah.hi{fill:#8FA3FF}html.dark #dsfig-u2-02 .wl rect{fill:#161920;stroke:#2A2E37}html.dark #dsfig-u2-02 .wl.hi rect{fill:#8FA3FF;stroke:#8FA3FF}html.dark #dsfig-u2-02 .wl.hi .t{fill:#0F1115}</style><defs><marker id="ah4" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path class="ah" d="M0,1 L9,5 L0,9 z"/></marker><marker id="ahh4" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path class="ah hi" d="M0,1 L9,5 L0,9 z"/></marker></defs><path class="e" d="M59,40 L150,40"/><path class="e" d="M188,40 L279,40"/><path class="e" d="M169,59 L169,150"/><path class="e" d="M298,59 L298,150"/><path class="e" d="M155.6,53.4 L53.4,155.6"/><circle class="n" cx="40" cy="40" r="18"/><text class="t" x="40" y="40" dy=".35em" text-anchor="middle">UI</text><circle class="n" cx="169" cy="40" r="18"/><text class="t" x="169" y="40" dy=".35em" text-anchor="middle">BE</text><circle class="n" cx="298" cy="40" r="18"/><text class="t" x="298" y="40" dy=".35em" text-anchor="middle">RE</text><circle class="n" cx="169" cy="169" r="18"/><text class="t" x="169" y="169" dy=".35em" text-anchor="middle">NET</text><circle class="n" cx="298" cy="169" r="18"/><text class="t" x="298" y="169" dy=".35em" text-anchor="middle">JS</text><circle class="n" cx="40" cy="169" r="18"/><text class="t" x="40" y="169" dy=".35em" text-anchor="middle">ST</text></svg><figcaption style="font-size:.82em;opacity:.72;margin-top:.45rem">UI user interface, BE browser engine, RE rendering engine, NET networking, JS interpreter, ST data storage</figcaption></figure>
Asked: [7 marks] (Jun 2025) How does a web browser's architecture facilitate the rendering of HTML content? Describe the key components of a browser's rendering engine and explain how they collaborate to display web pages.
Overview and features of HTML5
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Low weight</span>
Definition. HTML5 is the latest HTML version, adding semantic, multimedia, graphics and storage features without plug-ins. <mark>HTML5 lets a page play media, draw graphics and store data natively.</mark>
Key points.
- Semantic tags
<header>,<nav>,<section>,<article>,<aside>and<footer>describe the page meaning. <audio>and<video>play media without Flash, and<canvas>draws graphics with JavaScript.- Local storage and session storage keep data in the browser, and the Geolocation API finds the user's position.
- New form input types (
email,date,number) and attributes (required,placeholder) give built-in validation. - Advantages over HTML4: a simple doctype, cross-device support, no plug-ins and better SEO.
Asked: [7 marks] (Dec 2025) Explain HTML5 features and browser architecture. Asked: [14 marks] (Nov 2023) Short note on any two, including features of HTML5.
Last-minute revision
- HTML is a markup language and an application of SGML; XHTML is HTML as an XML application.
- Document skeleton: DOCTYPE,
html,head(title, meta, link, script),body. - Static page: fixed file; dynamic page: generated by server- or client-side code.
- Lists:
ol,ul,dlwithli,dt,dd. - Internal link:
id="x"on target and<a href="#x">. - Cellpadding is inside a cell; cellspacing is between cells.
- Form attributes: action, method (get/post), name, target, enctype.
- XHTML: lowercase, closed, quoted, nested,
<br />. - Frames:
framesetreplacesbody;rowsandcols;noframes; inline frame (iframe). - Rendering: parse, DOM + CSSOM, render tree, layout, paint.
- HTML5: semantic tags, audio, video, canvas, storage, geolocation.
Memory hooks
- SGML goals: "DRS" - Device independence, Reusability, Standardization.
- Padding is Pillow inside the cell; Spacing is the Space between cells.
- XHTML = "Xtra strict": lowercase, close, quote, nest.
- Rendering: "Please Do Render, Layout, Paint" - Parse, DOM, Render tree, Layout, Paint.
- Frameset rows go across, cols go down.
Coverage checklist
- Basics of HTML: Dec 2020 web page, Dec 2024 HTML/SGML, Dec 2025 structure, Jun 2025 structure.
- formatting and fonts: covered, not asked.
- commenting code: covered, not asked.
- color: covered, not asked.
- hyperlink: Nov 2019 internal linking, Nov 2022 anchor, image and table tags.
- lists: Dec 2020, Nov 2022 list types, Jun 2025 lists and images.
- tables: Nov 2019 cellpadding and cellspacing.
- images: covered, with the Jun 2025 and Nov 2022 image parts.
- forms: Nov 2019 form attributes, Dec 2020 form program, Jun 2020 form fields.
- XHTML: Jun 2020, Nov 2023, Dec 2024 HTML vs XHTML.
- Meta tags: covered, part of Dec 2025 structure question.
- Character entities: covered, not asked.
- frames and frame sets: Jun 2020, Nov 2022 frames and layers, Nov 2023 frameset program.
- Browser architecture and Web site structure: Jun 2025, Dec 2025 browser architecture.
- Overview and features of HTML5: Dec 2025, Nov 2023 short note.