Chapter 7 — HTML – Advanced Features

What are semantic elements and why they matter
Semantic elements are tags that carry meaning about the content they contain. Using elements that describe structure, such as header, nav, main, article, section, aside and footer, helps readers, browsers and assistive technologies understand the purpose of each part of the page. When you label parts of a page with meaningful tags, search engines can index the important parts and screen readers can provide faster navigation to users who rely on them. Good structure also makes a web page easier for another student or developer to read and update.

Start page design by planning the content areas: what belongs in the header, which links form the navigation, which pieces are the main articles, and what information is supplementary. Then mark those parts with semantic tags rather than using many generic containers. This does not change how the page looks by itself; CSS controls presentation. Semantic HTML is about clarity and correctness of structure, not styling.

Follow a few simple rules: keep headings in order so the document outline is logical, place the primary content inside a main element, and use article for self-contained pieces that could be shared on their own, for example a news item or a blog post. Use aside for related notes such as author bios or side information. Use footer for contact details, legal notices or links that appear at the end of the document or a section. If a section is independent, give it a heading so it forms its own part of the outline.

Teaching practice includes converting a div-heavy page into semantic markup, checking how the document outline looks, and testing with a screen reader or browser tools that show structure. Explain that semantic choices improve accessibility and maintainability, and form a strong foundation for later CSS and JavaScript lessons.

Headings build the document outline
Headings are the skeleton of a page. Use h1 for the main page title and then h2, h3 and so on in descending order for subtopics. This creates a clear outline that helps everyone who reads the page. Assistive technologies rely on headings to let users jump quickly to the section they want, and search engines use headings to find important topics. A correct sequence of headings makes long pages easier to scan and understand.

Sections are groups of related content. Elements such as section and article act as containers for content that belongs together. Each such section should normally start with a heading that names the topic. For example, a school resources page might use h1 for the subject, h2 for chapters and h3 for individual lessons. Maintain a logical hierarchy so that headings reflect the true nesting of content; do not skip from h1 to h4 without intermediate levels unless there is a special reason.

A document outline is the map of the page created by headings and sectioning elements. You can make an internal table of contents by linking to headings using id attributes; this is useful for revision notes or long guides. When designing a page, think about how a visitor will scan the page: short, descriptive headings are better than long sentences. Keep headings focused and meaningful so users understand what each section contains at a glance.

Avoid using heading tags purely for visual size; style non-heading text with CSS instead. For decorative captions and labels use span or p and apply styles. When working on exercises, practice reorganising content into clear sections with headings and then create a small table of contents linking to those headings. These habits improve readability and accessibility, and prepare students for writing structured documents and web applications in higher classes.

Using tables for structured data
Tables are the correct choice when information naturally fits into rows and columns, for example timetables, marksheets or price lists. A basic table uses a table element with rows marked by tr and cells by th for headers and td for data cells. For clarity add a caption that gives a short title for the table; this helps everyone understand what the data shows. Captions are read first by assistive tools and appear in printouts.

Complex tables often require merging cells. Use colspan to have a cell span several columns and rowspan to span multiple rows. For example, in a timetable a subject that covers two consecutive periods can be represented by a td with colspan="2" so the schedule remains clear. Use thead, tbody and tfoot to group the header, body and footer of the table which makes styling and understanding easier. Keep headers descriptive and use scope attributes to define whether a header applies to a row or a column so screen readers can announce the table correctly.

Accessibility and mobile display need attention. For wide tables consider horizontal scrolling or reflowing data into stacked lists on small screens. Avoid using tables for page layout; they should describe data only. When preparing tables for school tasks, practise adding a caption, grouping headings, and using proper scope. Also include a short summary or clear heading text near the table if necessary to explain complex arrangements.

Styling should be in CSS, not by adding visual-only attributes to the HTML. Test tables by reading them with a screen reader or using browser accessibility tools to ensure header relationships are clear. Teaching activities include building a class timetable with colspan and rowspan, and creating a marksheet with thead, tbody and tfoot to show totals and averages in the footer row.

Forms collect information in a structured way
Forms are how users give information to a website. The form element groups controls like inputs, selects and textareas. Important form attributes include action, which names where data would be sent, and method, which indicates how. In class we focus on form structure and accessibility rather than server processing. Every input should have a descriptive label. Labels connect to inputs using the for attribute matched to the input id or by wrapping the input. Labels make forms usable for people who click or tap and for those using screen readers.

Grouping related controls with a fieldset and using a legend gives context to a set of related options, such as contact details or preferences. This helps keyboard users and assistive technologies understand the purpose of the group. Use placeholders for short hints but do not rely on them as the only explanation; placeholders disappear when the user types and cannot replace a label. Required fields can be marked with the required attribute so browsers show a quick warning if the user tries to submit without filling them.

Always ensure a logical tab order by placing controls in the expected sequence in the HTML. Provide clear submit and reset buttons and short help text when needed. For checkboxes and radio buttons, group related choices and make a single label explain the group; label each option clearly. Test forms using only the keyboard and with a screen reader if possible to find accessibility problems.

Practical work includes building a contact form with name, email and message fields, adding labels and a fieldset for options. Discuss privacy: explain why forms that collect personal data should display a short note about how the information will be used. These habits build good, accessible web forms that work for as many people as possible.

Pick the right input type for better data entry
The type attribute of an input helps the browser show the correct control and do simple validation. Types include text, password, email, number, date, tel, url and file. Choosing type="email" for email addresses lets browsers check for an @ symbol and shows a suitable keyboard on phones. type="number" gives small step controls and supports min, max and step attributes to restrict allowed values. The date type often provides a calendar picker which makes date entry easier and less error-prone.

Use attributes to tune behaviour. maxlength limits characters; minlength enforces a minimum; placeholder gives a short hint but should not replace labels; required prevents empty submissions. For number and date inputs use min and max to define sensible ranges such as an age limit between 5 and 18. The pattern attribute allows simple checks using regular expressions for formats like PIN codes. The file input supports accept to restrict file types and multiple to allow several files to be chosen at once.

Remember that input types and attributes provide friendly, client-side assistance but are not secure by themselves. Server-side checks are still required. Also check how inputs behave on different devices: mobile keyboards vary and some features are not supported in older browsers. When designing forms, think about user convenience: prefer input types that reduce typing and use default values where useful.

Hands-on exercises will let students try different input types and attributes and observe differences in behaviour. Students will learn why selecting the correct input type reduces mistakes and makes forms faster to fill, especially on mobile devices.

Validation improves data quality and user experience
Validation ensures that the information entered into a form meets the rules you expect. HTML input attributes provide simple client-side validation: required prevents empty fields; type="email" checks basic email format; minlength and maxlength control length; pattern enforces a simple format such as digits only. These checks give fast feedback to the user and reduce server work by catching common mistakes before submission.

However, client-side validation is only a convenience. It can be bypassed, so server-side validation is essential for security. Teach that client-side checks help users correct errors quickly while server checks protect the data and the application. Explain common validation steps: check mandatory fields first, then check formats and ranges, and finally clean or escape text before using it on the server.

User-friendly feedback matters. When a field is invalid, show a clear message close to the field and highlight the field so the user can fix it. Preserve already entered information so users do not need to retype everything. Use descriptive messages like "Enter a 6-digit PIN" rather than generic phrases. For patterns, give an example of a valid value so learners understand the expected format.

For class activities, practise adding validation attributes to form controls and testing them by entering wrong values. Also show the use of novalidate on the form to disable built-in checks when you need custom handling. These exercises teach students how to combine browser features and good messages to make forms both helpful and secure.

Images support meaning and visual interest
Images are added with an img element. Always include alternate text that briefly describes the image; this helps users who cannot see the image and appears when the image fails to load. For decorative images that add no information, an empty alt attribute tells assistive tools to skip them. Use figure and figcaption concepts in your planning to pair images with short explanatory captions so readers understand why the image is shown.

Responsive images help pages load quickly on different devices. The srcset and sizes attributes let the browser choose the most suitable image file for the device resolution and screen width. Another method is to set images to scale with CSS using max-width:100% so they reduce to the container width on small screens. Reserving space with width and height attributes or CSS avoids content jumping as images load.

Optimise images before adding them to pages. Choose suitable file formats such as compressed images for photos and simple vector-based or PNGs for illustrations. Reduce file dimensions to what is needed on the page to save data for mobile users. Test images on phones and tablets to check clarity and loading speed. For accessibility, provide longer descriptions or transcripts nearby if an image presents important data such as a chart.

Class exercises include adding images with meaningful alt text, creating a simple figure with a caption, and practicing responsive techniques so images scale properly. These practices result in faster pages that remain accessible to more users and devices.

Multimedia enriches learning but needs care
Audio and video elements allow sound and moving pictures to play inside a web page. Use the audio and video elements and include controls so users can play, pause and adjust volume. Provide source files in more than one format where possible so different browsers can play at least one. Always include a short text fallback inside the element explaining the content when media cannot play.

Accessibility is important. Provide captions or subtitle files for videos so people with hearing loss can follow along. Captions can be added with a track element that references a caption file. Also include a transcript of the audio or video content for students who prefer to read or for search engines to index content. Avoid autoplay with sound because many browsers block it and it can disturb users; if autoplay is needed, use muted and inform users.

Consider file size and performance: compress audio and video to an appropriate quality and use short clips for demonstrations. Control the display size with width and height or CSS so the player fits the page layout. Provide simple play and pause controls near the media if required and label them so screen reader users can find them.

Hands-on activities include embedding a short audio announcement with controls and adding a transcript, and embedding a video with two source formats and captions. These exercises teach how to include multimedia that works well, loads quickly and remains accessible to more learners.

Two ways to draw on the web
Canvas and SVG are two different technologies for drawing. Canvas provides a pixel drawing surface controlled by script. It is ideal for animations, games and many-pixel dynamic scenes. Because canvas is pixel-based, drawings are made by painting pixels and may lose quality when scaled. For Class 7 we learn the concept and simple examples: drawing rectangles, circles and clearing the surface. Canvas content needs a textual description outside the canvas for accessibility.

SVG is an XML-based way to describe shapes such as rectangles, circles, lines and paths. Because it is vector-based, SVG scales without losing sharpness and its elements remain part of the document structure. This makes SVG good for logos, icons and diagrams that must stay crisp at many sizes. Elements inside an SVG can have titles and descriptions which help screen readers and search engines. You can style SVG with CSS and change parts with scripts for simple interactivity.

Choose SVG when you need sharp scalable graphics and when elements need to be accessible or interactive without many pixels. Choose canvas for fast pixel drawing and games. Teach students to provide alternate text or a separate description for canvas and to add title or desc for SVG. Practice tasks include making a small SVG logo with simple shapes and using a prepared script to draw a rectangle and a circle on canvas to see how parameters affect the result.

Understanding the difference between canvas and SVG helps students pick the right tool for their projects and prepares them for later lessons that combine graphics with interactivity using code.

Information for the browser and search engines
The head part of an HTML page holds information that helps the browser and services understand the page. Meta tags provide metadata such as character set, description and viewport. The charset meta tag ensures correct character display. The viewport meta tag tells mobile browsers how to scale the page and is essential for responsive behaviour. A clear meta description helps search engines and social sites show a helpful summary under the page title.

Favicons are small icons shown in browser tabs and bookmarks. Add a link element that points to the icon file so the page has a recognisable symbol. Link elements also include stylesheets by using rel="stylesheet" and can preconnect to important resources to speed loading. Place these tags in the head so the browser finds them before rendering the page body.

Explain the difference between metadata that affects behaviour (for example viewport) and metadata used by services (for example description and keywords). Teach students to write short, useful descriptions for pages and to include an author meta tag when appropriate. Also practise linking to an external stylesheet and understand why separating style from content is good practice.

Class tasks include adding charset and viewport meta tags, linking a stylesheet and a favicon, and writing a short meta description for a page about a school event. These steps make pages more professional, discoverable and friendly to mobile users.

Embedding content from other sites
The iframe element lets you show another web page inside your page. It is useful for embedding maps, videos or other widgets. Use the src attribute to point to the URL and set width and height so the frame fits your layout. Because iframes load external content, they can bring privacy and security concerns: the embedded page may run scripts or send requests.

To reduce risk use the sandbox attribute which restricts actions inside the iframe, for example blocking scripts or form submission unless explicitly allowed. Always add a title attribute to describe the content to screen reader users. Avoid embedding untrusted pages or allowing many large iframes on a single page since they slow loading and may not behave well on small screens.

If a service provides an embed code, check whether it is trusted and whether it allows sandboxing. Consider linking to the external page instead of embedding when interaction is not needed. Also keep in mind that embedded content may not be accessible to all users; provide an alternative link and description so everyone can reach the same information.

Practice embedding a public, safe resource inside an iframe with a descriptive title and sandbox attribute and then describe why sandboxing was chosen. These exercises teach students to balance convenience and safety when using content from other websites.

Make pages adapt to different screens
Responsive design means pages work well on small phones, tablets and large desktop screens. The first step is the viewport meta tag which tells mobile browsers to use the device width. After that, use flexible layouts and relative units so elements can grow or shrink. Avoid fixed pixel widths for main layout containers; prefer percentages or other relative units so the layout adapts.

Structure the HTML to stack content vertically on narrow screens; semantic layout helps this process. Images should be responsive by using techniques that let them scale to the container, for example setting max-width to 100% so they reduce on small screens. Navigation that is horizontal on a wide screen can become a vertical stacked list for mobile users to avoid overflow and small clickable areas.

Although full media queries are part of CSS, teach the concept in class: different rules can apply depending on screen width. For Class 7 practice simple CSS rules such as switching from two columns to a single column at a given width. Test pages by resizing the browser window and using device tools in the developer console to simulate phones and tablets.

Focus on readable font sizes, large enough touch targets, and adequate spacing. These simple responsive practices make web pages accessible to more users and devices and prepare students to learn CSS techniques for more advanced responsiveness later.

Saving small bits of information on the device
Local storage is a browser feature that lets a web page save simple key-value pairs on the user's device. It is useful for saving non-sensitive preferences, such as a chosen theme colour or the last page a student viewed. The data remains until it is cleared by the user or by code, so it can be used to remember settings between visits. Local storage is not part of HTML itself but works with web pages and is simple to use with a little script.

Teach the idea without deep programming: explain that values are stored as text using a key, for example storing a theme as 'dark' under the key 'theme'. Show how reading a stored value when a page loads can restore the user's preferences. Emphasise that local storage should never hold passwords or private information because it is not encrypted and can be read by scripts on the same site.

Compare local storage briefly with cookies: cookies can be sent to the server on each request, while local storage stays only in the browser. This makes local storage convenient for client-only settings but unsuitable for server-based authentication. Also show simple management actions: set an item, get an item, remove an item and clear all items.

Class exercises include using a prepared script to save a background colour choice and applying it on page load, and showing how to clear stored data. These activities give a simple, practical introduction to client-side storage that students can use safely for personalisation features in their projects.