Skip to content
CS-504 (A) · Internet and Web Technology/Quick Revision Short Notes

Internet and Web Technology (CS-504 (A)) - Unit 2 Short Notes

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.

  1. 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.
  2. 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.
  3. SGML (Standard Generalized Markup Language) is the parent meta-language of HTML; its goals are device independence, reusability of documents and standardization of markup.
  4. An HTML document has a <!DOCTYPE html> declaration, then the <html> root holding a <head> (not displayed) and a <body> (displayed).
  5. The head holds title, meta, link (external CSS) and script elements; the body holds headings <h1>-<h6>, paragraphs <p>, lists, tables, forms and images.
  6. Tags come in pairs (<p>...</p>) or as empty tags (<br>, <hr>, <img>), and attributes give extra information as name="value".
  7. 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.

  1. <b>/<strong> gives bold, <i>/<em> italic, <u> underline, <sub> and <sup> subscript and superscript, <big> and <small> size changes.
  2. <font face="Arial" size="4" color="red"> sets typeface, size (1-7) and colour; it is deprecated in favour of CSS.
  3. 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.

  1. Comments explain code to developers and are not displayed.
  2. They can span several lines and are used to disable code temporarily.
  3. 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.

  1. A hex code #RRGGBB has two hexadecimal digits each for red, green and blue, so #000000 is black and #FFFFFF is white.
  2. Page colours are set with bgcolor, text, link, vlink, alink on <body> (old HTML) or with CSS color and background-color.
  3. 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.

  1. The href attribute holds the destination URL, and the text between <a> and </a> is the visible link.
  2. 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.
  3. target="_blank" opens the link in a new window and title gives a tooltip.
  4. For internal linking, first mark the target with id, for example <h2 id="sec2">.
  5. Then create the link <a href="#sec2">Go to Section 2</a>; clicking scrolls to the target (the old form used <a name="sec2">).
  6. Links to another page's part combine both: href="page.html#sec2".
  7. 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.

  1. An ordered list numbers its items; its type attribute chooses 1, A, a, I or i and start sets the first number.
  2. An unordered list marks items with bullets; type can be disc, circle or square.
  3. Each item of <ol> and <ul> is written in <li>.
  4. A definition list holds terms and descriptions: <dt> is the term and <dd> its description, shown indented.
  5. 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.

  1. <table border="1" cellpadding="10" cellspacing="5"> sets a border, 10 px padding inside each cell and 5 px gap between cells.
  2. Larger cellpadding makes cells roomier; larger cellspacing separates cells and thickens the grid.
  3. colspan and rowspan merge cells across columns or rows, and <caption> titles the table.
  4. 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.

  1. src gives the image file path or URL and alt the text shown if the image fails to load (also used by screen readers).
  2. width and height set the size in pixels; border and align are older attributes.
  3. An image becomes a link when placed inside <a>.
  4. 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.

  1. action is the server program that receives the data, and method="get" appends data to the URL (visible, limited length) while method="post" sends it in the request body.
  2. name names the form, target says where the response opens (_self, _blank), and enctype gives the encoding (application/x-www-form-urlencoded, or multipart/form-data for file upload).
  3. Also autocomplete.
  4. <input type="..."> makes the fields: text, password (masked), radio (one choice, same name), checkbox (many choices), file, hidden, submit, reset, button.
  5. <textarea rows cols> gives multi-line text and <select><option> a drop-down list.
  6. <label> names a field, and name on every field is the key sent to the server.
  7. submit sends the form and reset clears 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.

  1. XHTML tags and attribute names must be lowercase, while HTML accepts any case.
  2. Every non-empty element must be closed in XHTML (<p>text</p>), whereas HTML allows <p>text.
  3. Empty elements must be self-closed in XHTML (<br />), whereas HTML writes <br>.
  4. Elements must be properly nested in XHTML (<b><i>x</i></b>), while HTML browsers tolerate overlap.
  5. Attribute values must be quoted and given in full (checked="checked"), whereas HTML allows width=10 and checked.
  6. 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.

  1. <meta name="description" content="..."> and name="keywords" help search engines (SEO), and name="author" names the writer.
  2. <meta charset="UTF-8"> sets the character encoding and name="viewport" controls mobile scaling.
  3. <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.

  1. &lt; shows <, &gt; shows >, &amp; shows &, &quot; shows a double quote.
  2. &nbsp; inserts a non-breaking space, &copy; gives the copyright sign and &reg; the registered sign.
  3. 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.

  1. rows="20%,80%" splits the window horizontally and cols="30%,70%" vertically; sizes may be percentages, pixels or *.
  2. <frame> attributes are src, name (so a link can use target="name"), noresize, scrolling and frameborder.
  3. <noframes> gives content for browsers that do not support frames.
  4. The inline frame tag (iframe, with src, width, height) places a frame inside a normal page.
  5. Layers are overlapping blocks made with <div> and CSS position (absolute), top, left and z-index, which decides which layer is on top.
  6. 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.

  1. Main components: user interface, browser engine (links UI and rendering engine), rendering engine, networking, JavaScript interpreter, UI backend and data storage.
  2. Networking fetches the page over HTTP; the rendering engine parses HTML into the DOM tree and CSS into the CSSOM.
  3. 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.
  4. 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.

  1. Semantic tags <header>, <nav>, <section>, <article>, <aside> and <footer> describe the page meaning.
  2. <audio> and <video> play media without Flash, and <canvas> draws graphics with JavaScript.
  3. Local storage and session storage keep data in the browser, and the Geolocation API finds the user's position.
  4. New form input types (email, date, number) and attributes (required, placeholder) give built-in validation.
  5. 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, dl with li, 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: frameset replaces body; rows and cols; 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.
Go to where you left off?

Quick Add to Notes

Save questions, your own notes and screenshots into notes filed by unit. It takes a free account.

Create free account

Have an account? Log in