HTML Links, Images, Lists, Tables and Forms
HTML elements should be selected for their meaning rather than appearance. Semantic markup gives browsers and assistive technologies meaningful structure.
Summary
HTML elements should be selected for their meaning rather than appearance. Semantic markup gives browsers and assistive technologies meaningful structure.
Links use <a> with href to specify a destination. Descriptive link text communicates its purpose. A fragment such as href="#section" targets the current page's element with id="section".
Images use <img> with src for the image source. The alt attribute conveys an informative image's meaning or function; alt="" marks a purely decorative image.
| List element | Purpose | Child elements |
|---|---|---|
| <ul> | Unordered items | <li> |
| <ol> | Ordered items | <li> |
| <dl> | Term-description groups | <dt> and <dd> |
Data tables use <tr> for rows, <th> for headers, and <td> for data cells. A <caption> names the table, while scope="col" or scope="row" identifies a header's association direction.
Forms use action for the submission destination and method to select GET or POST. GET supports bookmarkable query URLs; POST sends form data in the request body. A control's name identifies its submitted value. Explicit labels associate with controls when the label's for matches the control's id.
The required attribute demands a value in supported controls. Browser validation provides immediate feedback, but servers must independently validate submitted input.
Common Misconceptions: POST does not encrypt submissions without HTTPS. Email input validation checks syntax, not whether an address exists. Semantic elements describe meaning, not merely visual appearance.
🧠 Key Concepts
- Semantic Elements
- Fragment Links
- Image Alternatives
- List Types
- Table Headers
- Label Association
- Form Submission
- Input Validation
🧠 Quick Check
See what you remember from the summary.
A link uses href="#details". What must the destination element have?
🧠 Flashcards Preview
Tap a card to reveal the definition.
Ready to quiz yourself?
Test what you remember with a full practice quiz on this note. Create a free account and start in seconds.
Full Notes
Read the original note content before deciding whether to save or study from it.
HTML Links, Images, Lists, Tables and Forms
📘 Overview HTML defines navigation, embedded images, grouped content, tabular data, and user-input controls through semantic elements. Correct elements and attributes give browsers and assistive technologies meaningful structure and predictable behavior.
🧠 Key Idea Choose HTML elements by their meaning rather than their appearance: links navigate, images convey visual content, lists group items, tables express data relationships, and forms collect input.
⚔️ Core Details: - Links use <a href="URL">descriptive text</a> to identify a navigation destination. - Images use <img src="photo.jpg" alt="Description"> to provide an image source and a text alternative. - Lists use <ul> for unordered items, <ol> for ordered items, and <dl> with <dt> and <dd> for term-description groups. - Data tables organize rows with <tr>, header cells with <th>, and data cells with <td>. - Forms use action to identify the submission destination and method to select GET or POST. - A control's name identifies its submitted value; an explicit <label> association requires its for attribute to match the control's id.
🎯 Why It Matters: - Descriptive link text and appropriate image alternatives make content understandable without relying on visual presentation. - Semantic lists and associated table headers expose content relationships to assistive technologies. - GET supports bookmarkable query URLs; POST sends form data in the request body but does not provide encryption without HTTPS. - Browser validation improves immediate feedback, but servers must independently validate all submitted input.
🧠 Quick Recall: - Fragment link - href="#section" targets an element whose id is "section" on the current page. - Image alternative - alt describes an informative image's meaning or function; alt="" marks a purely decorative image. - List item - <li> represents an item inside <ul> or <ol>; <dt> and <dd> represent terms and descriptions inside <dl>. - Table accessibility - <caption> names a table; scope="col" or scope="row" identifies the direction of a <th> header's association. - Form validation - required demands a value in supported controls; type="email" checks email syntax, not whether the address exists.
More ways to study when you copy this note
Copy this note into your library to unlock focused practice sessions and long-term review.
Answer all questions first, then see feedback at the end — the way real exams work.
Focuses each session on what you got wrong, not what you already know.
Full timed exam with all questions, no pausing, and results at the end. Built for board exam prep.
Part of 🗄️ BS Information Systems — 1st Year
Browse this Review Set →More Computer Science notes
See all →More in Web Development
See all →More from NoteLib
Browse NoteLib's public notes →Copy this note to your library and get the full Study Pack instantly — summary, key concepts, and practice quiz included.