Scribd
Upload
2 views18 pages

Unit II HTML5 Lecture Notes

This document provides comprehensive lecture notes on HTML5, covering essential topics such as HTML tags, document structure, coding conventions, and semantic elements. It outlines learning objectives, definitions of various HTML elements, and best practices for creating clean and maintainable markup. Additionally, it includes examples of lists, images, and navigation elements, emphasizing the importance of accessibility and semantic meaning in web development.

Uploaded by

revathisubramani
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views18 pages

Unit II HTML5 Lecture Notes

This document provides comprehensive lecture notes on HTML5, covering essential topics such as HTML tags, document structure, coding conventions, and semantic elements. It outlines learning objectives, definitions of various HTML elements, and best practices for creating clean and maintainable markup. Additionally, it includes examples of lists, images, and navigation elements, emphasizing the importance of accessibility and semantic meaning in web development.

Uploaded by

revathisubramani
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

UNIT II

HTML5
Faculty Lecture Notes — Web Technologies (IT25301)
Prepared for Semester Examination Preparation (Anna University — New Regulation)

Syllabus Covered in This Unit


HTML Tags, Structure, HTML Coding Conventions – Block Elements, Text Elements, Code Related
Elements, Character References – Lists, Images, section, article, and aside Elements – nav and a
Elements – header and footer Elements – Audio & Video Support – HTML Forms & Controls –
Document Object Model (DOM).

Learning Objectives
• Understand the purpose and syntax of HTML tags and the overall structure of an HTML
document.

• Follow proper HTML coding conventions for clean, maintainable markup.

• Differentiate between block-level, text-level (inline) and code-related elements.

• Use character references (entities) to display reserved and special characters.

• Create ordered, unordered, definition and nested lists, and embed images correctly.

• Use HTML5 semantic elements — section, article, aside, nav, header, footer — to structure a
page meaningfully.

• Embed audio and video content using HTML5 media elements.

• Build HTML forms using various form controls for user input.

• Understand the Document Object Model (DOM) and how a browser represents an HTML page
internally.
2.1 HTML Tags
Definition: An HTML tag is a keyword enclosed in angle brackets (< >) that tells the browser how
to treat the piece of content it wraps. Tags mark up the start and end of an HTML element.

HTML (HyperText Markup Language) is a markup language, not a programming language — it


describes the structure and content of a web page rather than performing computation.

Structure of a Tag

• Most tags come in pairs: an opening tag (e.g. <p>) and a closing tag (e.g. </p>). The content in
between is the element's content.

• Some tags are self-closing / empty elements because they have no content, e.g. <br>, <hr>,
<img>, <input>.

• HTML tags are not case-sensitive (<P> and <p> behave the same), though lowercase is the
recommended convention in modern HTML.

• Tags can carry attributes — name="value" pairs written inside the opening tag — that provide
extra information, e.g. <img src="[Link]" alt="Logo">.

<p class="intro">This is a paragraph.</p>


<!-- tag name attribute content closing tag -->

Commonly Used Tags


Tag Purpose
<!DOCTYPE html> Declares the document type and HTML version being used (HTML5).
<html> The root element that wraps the entire HTML document.
<head> Contains meta-information about the document (title, links, meta tags)
— not displayed directly on the page.
<title> Sets the title shown in the browser tab/title bar.
<body> Contains all the visible content of the web page.
<h1> to <h6> Headings, from most important (h1) to least important (h6).
<p> A paragraph of text.
<br> Inserts a single line break, with no closing tag.
<hr> Inserts a horizontal rule (a dividing line).
<!-- ... --> Inserts a comment; ignored by the browser.

2.2 Structure of an HTML Document


Every valid HTML document follows the same basic skeleton: a document type declaration, followed
by an <html> root element containing a <head> and a <body>.

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is my first web page.</p>
</body>
</html>

<!DOCTYPE html>
+-------------------------------+
| <html> |
| +--------+ +----------+ |
| | <head> | --> | <body> | |
| | (title,| | (visible | |
| | meta) | | content) | |
| +--------+ +----------+ |
+-------------------------------+
Basic HTML document structure

Role of Each Section


Section Role
DOCTYPE declaration Tells the browser which version of HTML to use for rendering (HTML5 uses
the simple <!DOCTYPE html>).
<head> Holds metadata — title, character encoding, linked CSS files, scripts — that
describes the document but is not shown on the page itself.
<body> Holds everything the user actually sees and interacts with: headings,
paragraphs, images, forms, etc.

2.3 HTML Coding Conventions


Coding conventions are a set of good-practice guidelines that make HTML documents easier to read,
maintain and debug — especially important when multiple developers work on the same project.

Recommended Conventions

• Use lowercase for element names and attribute names (e.g. <p>, not <P>).

• Always close elements that require a closing tag, and close empty elements properly where
required by the doctype in use.

• Always quote attribute values, e.g. class="container" rather than class=container.

• Indent nested elements consistently (2 or 4 spaces) to visually reflect document structure.

• Use meaningful id and class names that describe purpose, not appearance (e.g. "main-nav"
rather than "blue-box").

• Avoid deeply nested tables or unnecessary markup — keep the structure as simple as the
content allows.
• Keep a single blank line between logical sections of markup for readability.

• Always specify the character encoding (commonly UTF-8) using a <meta charset="UTF-8"> tag
inside <head>.

Remember Points

• Good coding conventions do not change how a browser renders a page — they exist purely to
help developers.

• Consistent indentation is one of the fastest ways to spot missing or unmatched closing tags.

2.4 Block Elements and Text Elements


Definition: A block-level element always starts on a new line and takes up the full width available,
while a text-level (inline) element flows within the surrounding text and only takes up as much
width as its content needs.

Block-Level Elements

• Begin on a new line and push following content to the next line.

• Can contain other block-level elements as well as inline elements.

• Commonly used to define the overall layout/structure of a page.

Tag Purpose
<div> A generic block-level container, commonly used for layout/grouping.
<p> A paragraph of text.
<h1>–<h6> Section headings.
<ul>, <ol>, <li> Lists and list items.
<table> A data table.
<form> A form container for user input.

Text-Level (Inline) Elements

• Do not start on a new line — they flow along with the surrounding text.

• Only occupy the width of their own content, not the full line.

• Typically used to style or mark up a portion of text within a block element.

Tag Purpose
<span> A generic inline container, commonly used for styling a portion of text.
<a> A hyperlink.
<b> / <strong> Bold text; <strong> also implies semantic importance.
<i> / <em> Italic text; <em> also implies semantic emphasis.
<img> An inline image.
<label> A caption for a form control.
Comparison: Block vs Inline
Aspect Block-Level Element Inline (Text-Level) Element
New line Always starts on a new line Stays in the flow of the current line
Width Takes full available width by default Takes only as much width as needed
Nesting Can contain block and inline Should only contain other inline
elements elements
Examples <div>, <p>, <h1>, <ul> <span>, <a>, <b>, <img>

2.5 Code-Related Elements


HTML provides a small set of inline elements specifically meant for displaying computer code and
technical content in a readable, semantically correct way.

Tag Purpose
<code> Marks up a short fragment of computer code, usually shown in a monospace
font.
<pre> Displays preformatted text exactly as typed, preserving spaces and line breaks
— commonly wraps <code> for multi-line snippets.
<kbd> Represents user keyboard input, e.g. <kbd>Ctrl+C</kbd>.
<samp> Represents sample output from a program or script.
<var> Represents a variable name in a mathematical expression or code context.

<p>Use the <code>[Link]()</code> function to print output.</p>


<pre>
function greet() {
[Link]('Hello');
}
</pre>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

Note: Inside a <pre> element, whitespace and line breaks are preserved exactly as written — this
is different from normal HTML, where extra spaces and line breaks are collapsed.

2.6 Character References (HTML Entities)


Definition: A character reference (or HTML entity) is a special code, starting with & and ending
with ;, used to display characters that either have a reserved meaning in HTML (like < and >) or
cannot be typed directly on a keyboard.

Because the characters < and > are used to define tags, and & is used to start an entity, these
characters cannot be typed directly into page content — they must be written using their character
references.

Character Entity Name Entity Number Description


< &lt; &#60; Less-than sign
> &gt; &#62; Greater-than sign
Character Entity Name Entity Number Description
& &amp; &#38; Ampersand
" &quot; &#34; Double quotation mark
(non-breaking space) &nbsp; &#160; A space that will not cause a
line break
© &copy; &#169; Copyright symbol

<p>5 &lt; 10 and 10 &gt; 5</p>


<!-- Displays: 5 < 10 and 10 > 5 -->

Remember Points

• Every character reference ends with a semicolon (;) — omitting it can cause the browser to
misinterpret the following text.

• &nbsp; is frequently used to prevent unwanted line breaks or to add visible spacing that
normal HTML would collapse.

2.7 Lists
HTML provides three main types of lists to present grouped or related information clearly.

1. Ordered List (<ol>)

Used when the sequence of items matters. Each item is automatically numbered by the browser.

<ol>
<li>Open the editor</li>
<li>Write the HTML code</li>
<li>Save and open in a browser</li>
</ol>

<!-- Output:
1. Open the editor
2. Write the HTML code
3. Save and open in a browser -->

2. Unordered List (<ul>)

Used when the order of items does not matter. Each item is marked with a bullet by default.

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
3. Definition List (<dl>)

Used to present a list of terms and their descriptions, using <dt> (definition term) and <dd>
(definition description).

<dl>
<dt>HTML</dt>
<dd>The markup language used to structure web pages.</dd>
<dt>CSS</dt>
<dd>The style sheet language used to design web pages.</dd>
</dl>

4. Nested Lists

A list can be placed inside another list item to represent sub-items or a hierarchy.

<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Backend</li>
</ul>

Comparison of List Types


List Type Tag Marker Best Used For
Ordered <ol><li> Numbers/letters Steps, rankings, sequences
Unordered <ul><li> Bullets Unrelated/unranked items
Definition <dl><dt><dd> None Term-description pairs
(glossaries)
Nested List inside <li> Inherits parent type Hierarchical/sub-categorised
data

2.8 Images
Definition: The <img> tag embeds an image into an HTML page. It is an empty (self-closing)
element — it has no separate closing tag and no text content.

Syntax

<img src="path/to/[Link]" alt="description">

Important Attributes
Attribute Purpose
src The path (URL) to the image file — required.
Attribute Purpose
alt Alternate text shown if the image cannot load, and read aloud by screen
readers — important for accessibility.
width / height Sets the display dimensions of the image, in pixels or percentage.
title Extra descriptive text, usually shown as a tooltip on hover.
loading Can be set to "lazy" so the image loads only when it is about to enter the
viewport, improving page performance.

<img src="[Link]" alt="Company Logo" width="150" height="80">

Remember Points

• Always include a meaningful alt attribute — it is essential for accessibility and SEO.

• Images can also act as links by wrapping the <img> tag inside an <a> tag.

2.9 section, article, and aside Elements


HTML5 introduced semantic elements that describe the *meaning* of a block of content, not just its
appearance — making pages easier to understand for both developers and assistive technologies like
screen readers.

<section>

Definition: The <section> element groups together a thematically related block of content,
typically with its own heading.

• Used to divide a page into logical sections, e.g. an ‘About’ section, a ‘Services’ section.

• Not meant to be used purely for styling purposes — use <div> for that instead.

<section>
<h2>About Us</h2>
<p>We build web applications for small businesses.</p>
</section>

<article>

Definition: The <article> element represents a self-contained piece of content that would make
sense on its own if distributed independently — such as a blog post, news story, or forum post.

<article>
<h2>Understanding HTML5 Semantics</h2>
<p>Published on 12 July 2026</p>
<p>Semantic elements make your markup more meaningful...</p>
</article>
<aside>

Definition: The <aside> element represents content that is tangentially related to the main
content — such as a sidebar, pull quote, or related-links widget.

<aside>
<h3>Related Articles</h3>
<ul>
<li>Intro to CSS</li>
<li>JavaScript Basics</li>
</ul>
</aside>

Comparison: section vs article vs aside


Element Represents Typical Use
<section> A thematic grouping of content Chapters, tabbed content, page sections with
their own heading
<article> Independent, self-contained Blog posts, news articles, forum posts, product
content cards
<aside> Content related but secondary to Sidebars, advertisements, related-link widgets,
the main content pull quotes

2.10 nav and a Elements


<nav>

Definition: The <nav> element identifies a block of navigation links — the major navigation menus
of a site, such as the main menu or a table of contents.

• Not every group of links needs to be wrapped in <nav> — use it only for major navigation
blocks.

<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>

<a> (Anchor)

Definition: The <a> element defines a hyperlink, used to navigate to another page, another part of
the same page, an email address, or a file.

Attribute Purpose
href The destination URL, path, or #id of the link — required for the link to be
clickable.
Attribute Purpose
target Where to open the linked document, e.g. "_blank" opens it in a new tab.
title Extra information shown as a tooltip on hover.
download Prompts the browser to download the linked file instead of navigating to it.

<a href="[Link] target="_blank">Visit Example</a>


<a href="#section2">Jump to Section 2</a>
<a href="[Link] Us</a>

2.11 header and footer Elements


<header>

Definition: The <header> element represents introductory content for a page or a section —
typically containing a logo, site title, and/or navigation.

• A page can have one page-level <header>, and individual <article> or <section> elements can
each have their own <header> too.

<header>
<h1>My Website</h1>
<nav>...</nav>
</header>

<footer>

Definition: The <footer> element represents closing content for a page or section — typically
containing copyright information, contact details, or related links.

<footer>
<p>&copy; 2026 My Website. All rights reserved.</p>
</footer>

+--------------------------------------+
| <header> |
+--------------------------------------+
| <nav> | <main> |
| | +----------+ +---------+ |
| | |<section> | |<aside> | |
| | |<article> | | | |
| | +----------+ +---------+ |
+--------------------------------------+
| <footer> |
+--------------------------------------+
A typical HTML5 semantic page layout

Remember Points

• header, footer, nav, section, article and aside are all semantic block-level elements
introduced/standardised in HTML5.
• They replace generic <div> tags with more meaningful names, improving accessibility, SEO, and
code readability.

2.12 Audio & Video Support


Before HTML5, playing audio or video in a browser required third-party plug-ins such as Flash.
HTML5 introduced the native <audio> and <video> elements so media can be embedded without
any plug-in.

The <audio> Element

<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Your browser does not support the audio element.
</audio>

The <video> Element

<video width="400" height="300" controls>


<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>

Common Attributes
Attribute Purpose
controls Displays the browser's default play/pause/volume control bar.
autoplay Starts playback automatically as soon as the media is ready (often blocked
by browsers unless muted).
loop Restarts playback automatically once it reaches the end.
muted Mutes the audio track by default.
poster (video only) Specifies an image to show before the video starts playing.
<source> Lets multiple file formats be offered; the browser plays the first format it
supports.

Remember Points

• Providing multiple <source> elements in different formats improves cross-browser


compatibility, since not every browser supports every codec.

• The text placed between the opening and closing tags is fallback content shown only if the
browser does not support the element at all.
2.13 HTML Forms & Controls
Definition: An HTML form, defined with the <form> element, collects user input and typically
sends it to a server for processing.

Basic Form Structure

<form action="/submit" method="POST">


<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>

Key <form> Attributes


Attribute Purpose
action The URL to which the form data is sent when submitted.
method The HTTP method used to send data — GET (appends data to the URL) or
POST (sends data in the request body).
autocomplete Controls whether the browser may auto-fill values based on past entries.
novalidate Turns off the browser's built-in form validation.

Common Form Controls


Control Example Purpose
Text input <input type="text"> Single-line free text entry.
Password <input type="password"> Masks the entered characters.
Email <input type="email"> Validates that the value looks like an email
address.
Number <input type="number"> Restricts input to numeric values, often with
min/max/step.
Checkbox <input type="checkbox"> Lets the user select zero or more options from
a set.
Radio button <input type="radio"> Lets the user select exactly one option from a
set sharing the same name.
Dropdown <select><option> Lets the user pick one option from a drop-
down list.
Text area <textarea> Multi-line free text entry.
Submit button <input type="submit"> Submits the form data.
File upload <input type="file"> Lets the user choose a file to upload.

Example — A Simple Registration Form

<form action="/register" method="POST">


<label for="uname">Username:</label>
<input type="text" id="uname" name="uname" required><br>

<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" required><br>

<label>Gender:</label>
<input type="radio" name="gender" value="M"> Male
<input type="radio" name="gender" value="F"> Female<br>

<label for="country">Country:</label>
<select id="country" name="country">
<option value="in">India</option>
<option value="us">USA</option>
</select><br>

<input type="submit" value="Register">


</form>

Remember Points

• The name attribute of each control (not its id) is what gets sent to the server as the form field's
key.

• The <label for="..."> element should match the id of its associated control — this also lets the
user click the label to focus the control, improving accessibility.

2.14 Document Object Model (DOM)


Definition: The Document Object Model (DOM) is a programming interface that represents an
HTML (or XML) document as a tree of objects, where each tag, attribute and piece of text
becomes a node that can be read or modified.

When a browser loads an HTML page, it does not just display the raw text — it parses the markup
and builds an in-memory tree structure (the DOM tree). This tree is what scripts like JavaScript
actually interact with to read or change page content.

Structure of the DOM Tree

Consider the following simple HTML document:

<html>
<body>
<h1>Title</h1>
<p>Some text</p>
</body>
</html>

document
|
<html>
|
<body>
/ \
<h1> <p>
| |
"Title" "Some text"
The HTML document represented as a DOM tree

Key DOM Concepts


Term Meaning
Node Every item in the tree — elements, attributes, and text are all represented as
nodes.
Element node A node representing an HTML tag, e.g. <p>, <div>.
Text node A node representing the actual text content inside an element.
Parent / Child A node directly containing another node is its parent; the contained node is
its child.
Sibling Nodes that share the same parent node.
Root node The topmost node of the tree — the document object itself.

Why the DOM Matters

• It gives scripting languages like JavaScript a structured way to find, read and modify page
content after the page has loaded (this is used extensively in Unit IV of this course).

• It is what enables dynamic web pages — content that changes without a full page reload.

• Browser developer tools (“Inspect Element”) display the live DOM tree of the current page,
which can differ from the original HTML source if scripts have modified it.

Remember Points

• The DOM is a representation of the document, not the HTML source code itself — the browser
builds it after parsing the HTML.

• The DOM tree is what JavaScript methods such as getElementById() or querySelector() search
through.

Unit Summary
• HTML tags mark up elements using angle brackets; most come in start/end pairs, some are self-
closing (<br>, <img>).

• Every HTML document follows a standard skeleton: DOCTYPE, <html>, <head> (metadata) and
<body> (visible content).

• Coding conventions (lowercase tags, quoted attributes, consistent indentation) keep markup
clean and maintainable.

• Block-level elements start on a new line and take full width; text-level (inline) elements flow
within a line.
• Code-related elements (<code>, <pre>, <kbd>, <samp>, <var>) display programming content
meaningfully.

• Character references (&lt;, &gt;, &amp;, &nbsp;, ...) display reserved or special characters
safely.

• Lists (<ol>, <ul>, <dl>) and nested lists organise related items; <img> embeds pictures with the
alt attribute for accessibility.

• HTML5 semantic elements — <section>, <article>, <aside>, <nav>, <header>, <footer> —


describe page structure meaningfully rather than generically.

• <audio> and <video> provide native, plug-in-free media playback with the controls, autoplay,
loop and source attributes.

• HTML forms (<form>, <input>, <select>, <textarea>) collect user input and submit it to a server
via GET or POST.

• The DOM represents an HTML document as a tree of nodes, forming the foundation for
dynamic, script-driven web pages.

Important Keywords
HTML tag, element, attribute, DOCTYPE, head, body, block-level element, inline element,
character reference / entity, ordered list, unordered list, definition list, alt attribute, section,
article, aside, nav, header, footer, semantic element, audio, video, source, form, form control,
GET/POST, label, Document Object Model (DOM), node, DOM tree.

Mind Map — HTML5


+-------------+
| HTML5 |
+-------------+
______________________/ | \______________________
/ | \
Structure Content Types Interaction
- Tags - Lists (ol/ul/dl) - Forms & Controls
- Doc structure - Images - DOM (tree of nodes)
- Coding conventions - Code elements (code/pre)
- Block vs Inline - Char. references
- Semantic layout - Audio & Video
(header/nav/section/
article/aside/footer)
One-glance overview of Unit II topics

Quick Revision Table


Topic One-Line Recall
HTML Tags Keyword in <angle brackets>; usually paired start/end tags.
Structure DOCTYPE + <html> containing <head> and <body>.
Topic One-Line Recall
Coding Conventions Lowercase tags, quoted attributes, consistent indentation.
Block Elements Start on a new line, take full width (<div>, <p>).
Text Elements Flow inline with text, only take needed width (<span>, <a>).
Code Elements <code>, <pre>, <kbd>, <samp>, <var> for technical content.
Character References &lt; &gt; &amp; &nbsp; — display reserved/special characters.
Lists <ol> numbered, <ul> bulleted, <dl> term-description pairs.
Images <img src="" alt=""> — always include alt text.
section / article / aside Thematic group / self-contained content / related sidebar content.
nav / a Navigation block / hyperlink with href.
header / footer Introductory content / closing content of a page or section.
Audio & Video <audio>/<video> with controls, autoplay, loop, <source>.
Forms & Controls <form action method> with <input>, <select>, <textarea>.
DOM Browser's tree representation of the document, used by scripts.

2-Mark Questions with Answers


Q.1 What is an HTML tag?
Ans. An HTML tag is a keyword enclosed in angle brackets that marks the start or end of an HTML
element and tells the browser how to treat the content it wraps.

Q.2 What are the four essential parts of an HTML document?


Ans. The DOCTYPE declaration, the <html> root element, the <head> section (metadata), and the
<body> section (visible content).

Q.3 Differentiate block-level and inline elements in one line each.


Ans. A block-level element starts on a new line and takes full width (e.g. <div>); an inline element
flows within the line and takes only the width it needs (e.g. <span>).

Q.4 What is a character reference? Give an example.


Ans. A character reference is a code starting with & and ending with ; used to display reserved or
special characters, e.g. &lt; displays <.

Q.5 Name the three types of HTML lists.


Ans. Ordered list (<ol>), unordered list (<ul>), and definition list (<dl>).

Q.6 What is the purpose of the alt attribute in <img>?


Ans. It provides alternate text shown if the image fails to load and is read aloud by screen readers,
aiding accessibility.

Q.7 Differentiate <section> and <article>.


Ans. <section> groups thematically related content, usually with its own heading; <article> is a self-
contained piece of content that makes sense on its own, like a blog post.

Q.8 What is the purpose of the <nav> element?


Ans. It identifies a block of major navigation links on a page, such as the main menu.
Q.9 List two attributes of the HTML5 <video> element.
Ans. controls (shows play/pause/volume UI) and autoplay (starts playback automatically).

Q.10 What is the difference between GET and POST form methods?
Ans. GET appends form data to the URL and is visible/limited in length; POST sends data in the
request body and is used for larger or sensitive data.

Q.11 What is the DOM?


Ans. The Document Object Model is a tree-structured, in-memory representation of an HTML
document that scripts use to read and modify page content.

5-Mark Questions
• Explain the basic structure of an HTML document with a suitable example.

• Explain HTML coding conventions and why they are important.

• Differentiate between block-level elements and text-level (inline) elements with examples.

• Explain code-related elements in HTML with examples of <code>, <pre> and <kbd>.

• What are character references? Explain with a table of commonly used entities.

• Explain the different types of HTML lists with examples.

• Explain the <img> tag and its important attributes.

• Explain the section, article and aside elements with suitable examples.

• Explain the nav and a elements with examples.

• Explain the header and footer elements with a diagram of a typical page layout.

• Explain how audio and video are embedded in HTML5, with their common attributes.

• Explain common HTML form controls with examples.

• Explain the Document Object Model (DOM) with a diagram.

13-Mark Questions
• Explain in detail the structure of an HTML document, HTML tags, and HTML coding conventions
with suitable examples.

• Explain block-level, text-level and code-related elements in HTML with examples for each, and
compare them in a table.

• Explain HTML5 semantic elements — section, article, aside, nav, header and footer — in detail
with a diagram showing a typical page layout and suitable code examples.
• Explain HTML forms and controls in detail. Design a registration form using appropriate form
controls, and explain each control used.

• Explain the Document Object Model (DOM) in detail with a neat diagram. Discuss why the
DOM is important for building dynamic web pages.

• Write short notes on: (a) Character references (b) Lists in HTML (c) Audio and video support in
HTML5.

Expected Anna University Questions


• Explain the structure of an HTML document with an example. (Part B)

• Differentiate between block and inline elements. (Part A / B)

• Explain HTML5 semantic elements with examples. (Part B)

• Design an HTML form for user registration using various form controls. (Part B / C)

• Explain the Document Object Model with a diagram. (Part B)

• What are character references? Why are they needed? (Part A)

Viva / Interview Questions


• Is HTML a programming language? Why or why not?

• Why must <, > and & be written using character references in page content?

• What happens if the alt attribute is omitted from an <img> tag?

• Can a <div> be used instead of <section>? What is lost by doing so?

• What is the difference between <b> and <strong>, and between <i> and <em>?

• Why is the <label for="..."> attribute important in forms?

• What is the difference between the HTML source code and the DOM?

• Why does HTML5 provide multiple <source> elements inside <audio>/<video>?

You might also like