HTML Basics
Expert-defined terms from the Front-End Web Development Fundamentals course at HealthCareCourses (An LSIB brand). Free to read, free to share, paired with a professional course.
Attribute #
Attribute
Concept #
An attribute supplies additional information about an HTML element.
Explanation #
Attributes are placed inside the opening tag and follow a name‑value syntax, for example 
where src and alt are attributes.
Practical application #
Use the href attribute on an a tag to create a hyperlink to another page or resource.
Challenge #
Given a snippet of markup, add the appropriate required attributes to make the element valid according to the HTML specification.
Block‑level element #
Block‑level element
Concept #
An element that starts on a new line and stretches to fill the width of its container.
Explanation #
Block‑level elements such as div, p, h1‑h6, and section generate a rectangular box that can contain other block‑ or inline‑level elements.
Practical application #
Wrap a series of paragraphs inside a section to create a distinct thematic group on a page.
Challenge #
Convert a layout that uses only div elements into a more semantic structure using appropriate block‑level tags.
Browser compatibility #
Browser compatibility
Concept #
The degree to which a web page renders consistently across different web browsers.
Explanation #
Because browsers implement standards at slightly different times, developers must test pages in Chrome, Firefox, Safari, Edge, and others to ensure uniform appearance and behavior.
Practical application #
Use the meta tag with http‑equiv="X-UA-Compatible" to control rendering mode in older versions of Internet Explorer.
Challenge #
Identify a CSS property that works in Chrome but fails in Safari, then apply a vendor prefix or fallback to achieve cross‑browser support.
CDATA section #
CDATA section
Concept #
A block of text that the parser treats as character data, not markup.
Explanation #
In HTML, CDATA is rarely needed, but within script or style elements, browsers ignore markup, allowing characters like < and > without escaping.
Practical application #
Embed JavaScript code that contains HTML‑like strings without triggering parsing errors.
Challenge #
Rewrite a script that uses CDATA delimiters for older browsers so that it works in modern HTML5 documents.
Canvas element #
Canvas element
Concept #
A container for graphics that are drawn via JavaScript.
Explanation #
The canvas tag defines a rectangular area on the page; its drawing surface is accessed through methods such as getContext('2d').
Practical application #
Create a dynamic chart that updates in real time based on user input.
Challenge #
Implement a simple game loop that clears and redraws the canvas at 60 frames per second.
DOCTYPE declaration #
DOCTYPE declaration
Concept #
The instruction that tells the browser which version of HTML the page uses.
Explanation #
The declaration appears at the very top of an HTML5 document and triggers standards‑compliant rendering.
Practical application #
Ensure that all new pages start with the HTML5 doctype to avoid quirks mode.
Challenge #
Convert an older HTML 4.01 page to HTML5 by updating its doctype and fixing any deprecated elements.
Document Object Model (DOM) #
Document Object Model (DOM)
Concept #
A programming interface that represents the page structure as a tree of objects.
Explanation #
Each HTML tag becomes a node in the DOM, which can be accessed and altered using JavaScript methods like document.getElementById.
Practical application #
Dynamically add a new li item to an existing ul when a user clicks a button.
Challenge #
Write a script that traverses the DOM to count how many section elements contain at least one article child.
Entity reference #
Entity reference
Concept #
A textual representation of a character that might otherwise be interpreted as markup.
Explanation #
Common entities include & for &, < for <, and > for >. They are useful when the literal character would break the markup.
Practical application #
Display the mathematical expression “x < y” inside a paragraph without causing a tag error.
Challenge #
Replace all instances of the copyright symbol (©) in a document with the correct entity reference.
Figure element #
Figure element
Concept #
A self‑contained piece of media with an optional caption.
Explanation #
The figure tag groups an image, diagram, or code snippet, while figcaption provides a description that is associated with the media.
Practical application #
Use figure to embed a photo with a caption that will be read by assistive technologies as part of the same logical unit.
Challenge #
Refactor a series of div elements that contain images and captions into proper figure/figcaption structures.
Form element #
Form element
Concept #
A container for interactive controls that submit user data to a server.
Explanation #
The form tag defines the submission endpoint via the action attribute and the HTTP verb via method (GET or POST). Inside, various controls collect data.
Practical application #
Build a contact form that validates email addresses on the client side before sending the data to a back‑end script.
Challenge #
Create an accessible form that includes proper label associations, keyboard navigation, and ARIA roles for screen readers.
Heading elements #
Heading elements
Concept #
Six levels of titles that outline the document hierarchy.
Explanation #
h1 represents the main heading, while h2‑h6 denote subheadings of decreasing importance. Search engines use them to understand content structure.
Practical application #
Use a single h1 per page for the primary topic, then nest h2–h3 for sections and subsections.
Challenge #
Audit a page that incorrectly uses multiple h1 tags and reorganize the headings to follow a logical hierarchy.
HTML comment #
HTML comment
Concept #
A piece of text that the browser ignores during rendering.
Explanation #
Comments are enclosed within , allowing developers to leave notes or temporarily disable code.
Practical application #
Comment out a block of script while testing a new feature.
Challenge #
Identify and remove all leftover comments from a production HTML file to reduce file size.
HTML entity #
HTML entity
Concept #
A named or numeric reference that represents a special character.
Explanation #
Named entities like produce a non‑breaking space, while numeric entities such as © represent the same character using its code point.
Practical application #
Insert a trademark symbol (™) in a paragraph without risking encoding issues.
Challenge #
Convert a document that uses raw Unicode characters into one that consistently uses named entities for all special symbols.
HTML5 #
HTML5
Concept #
The current version of the HyperText Markup Language, introducing new elements and APIs.
Explanation #
HTML5 standardizes features like video, audio, section, and nav, and provides native support for drag‑and‑drop, offline storage, and more.
Practical application #
Replace a Flash‑based video player with the native video element and associated controls.
Challenge #
Audit an older website and replace all deprecated tags (e.g., font, center) with semantic HTML5 equivalents.
Image element #
Image element
Concept #
Embeds a raster graphic into the page.
Explanation #
The img tag requires a source URL via src and an alternative text description via alt for accessibility.
Practical application #
Use srcset and sizes to deliver different image resolutions based on the viewport width.
Challenge #
Create a picture element that serves a WebP version to browsers that support it while falling back to JPEG for others.
Inline element #
Inline element
Concept #
An element that does not start a new line and only occupies the space bounded by its content.
Explanation #
Elements like span, a, strong, and em are inline; they can be nested inside block‑level containers without disrupting the document flow.
Practical application #
Highlight a word within a paragraph using strong to convey importance.
Challenge #
Convert a layout that uses div elements for every piece of text into a structure that uses appropriate inline tags.
Input element #
Input element
Concept #
A form control that allows users to enter data.
Explanation #
The input tag’s behavior is determined by its type attribute, which can be text, password, email, number, checkbox, radio, file, and many others.
Practical application #
Use type="email" to trigger built‑in validation for a correctly formatted email address.
Challenge #
Build a custom range slider using type="range" and JavaScript to display the selected value in real time.
Label element #
Label element
Concept #
Associates descriptive text with a form control for accessibility.
Explanation #
The label tag either wraps an input element or uses the for attribute to reference the control’s id. When clicked, the label focuses the associated input.
Practical application #
Create a group of radio buttons where each option has a clear, clickable label.
Challenge #
Refactor a form that lacks proper labels, ensuring each interactive element has an explicit association.
Link element #
Link element
Concept #
Connects an external resource, such as a stylesheet or favicon, to the document.
Explanation #
Placed inside the head, the link tag with rel="stylesheet" loads CSS files, while rel="icon" defines the page’s favicon.
Practical application #
Use rel="preload" with as="style" to hint the browser to fetch a critical CSS file early.
Challenge #
Optimize a page by consolidating multiple link tags into a single stylesheet without losing modularity.
Meta element #
Meta element
Concept #
Provides metadata about the document, such as character set, viewport, and search‑engine directives.
Explanation #
Common uses include meta charset="UTF-8" to define encoding, and meta name="viewport" content="width=device-width, initial-scale=1.0" to ensure responsive scaling on mobile devices.
Practical application #
Add a meta name="description" tag to improve click‑through rates from search results.
Challenge #
Identify missing or mis‑configured meta tags on a page and correct them to meet best‑practice guidelines.
Concept #
Represents a section of the page that contains navigation links.
Explanation #
The nav tag signals to browsers and assistive technologies that the enclosed links form a major navigation block, such as a primary menu or table of contents.
Practical application #
Wrap the main site menu inside a nav element and use aria‑label to describe its purpose.
Challenge #
Convert a generic div‑based menu into a semantic nav structure while preserving existing CSS styles.
Non‑semantic element #
Non‑semantic element
Concept #
An HTML tag that does not convey meaning about its content.
Explanation #
Elements like div and span are used purely for layout or styling; they provide no inherent meaning for search engines or assistive technologies.
Practical application #
Use div only when no suitable semantic tag exists, and pair it with appropriate ARIA roles if needed.
Challenge #
Refactor a page heavy with div containers by replacing them with semantic tags such as header, article, and footer.
Ordered list #
Ordered list
Concept #
A list where items are automatically numbered.
Explanation #
The ol tag creates a sequential list; each li inside receives a numeric marker. The start attribute can begin counting from a specific number.
Practical application #
Display a step‑by‑step tutorial where each instruction is clearly ordered.
Challenge #
Modify an existing unordered list to become ordered, ensuring the CSS that previously styled bullet points is updated accordingly.
Paragraph element #
Paragraph element
Concept #
Represents a block of text.
Explanation #
The p tag automatically adds vertical spacing before and after the block, making it suitable for body copy and content paragraphs.
Practical application #
Structure article content by wrapping each paragraph in a p tag rather than using line‑break tags.
Challenge #
Convert a page that uses br tags to separate sentences into proper p elements, then adjust the CSS to preserve visual spacing.
Picture element #
Picture element
Concept #
Provides multiple image sources for responsive design and format selection.
Explanation #
Inside a picture container, one or more source tags specify media queries and image types; the final img acts as a default if none of the conditions match.
Practical application #
Serve a high‑resolution WebP image to browsers that support it, and a JPEG alternative to older browsers.
Challenge #
Create a picture element that changes the displayed image based on viewport width, using media attributes.
Preformatted text element #
Preformatted text element
Concept #
Displays text exactly as written, preserving whitespace and line breaks.
Explanation #
The pre tag renders its content in a fixed‑width font and does not collapse spaces, making it ideal for showing snippets of code or formatted data.
Practical application #
Show a block of sample HTML code inside a tutorial without the browser interpreting it as markup.
Challenge #
Combine pre with code to create a stylized code block that also supports syntax highlighting via CSS.
Responsive design #
Responsive design
Concept #
An approach that makes web pages adapt to different screen sizes and orientations.
Explanation #
By using CSS rules that trigger at defined min‑width or max‑width values, designers can rearrange, resize, or hide elements to provide optimal usability on mobile, tablet, and desktop devices.
Practical application #
Implement a navigation menu that collapses into a “hamburger” icon on screens narrower than 768 px.
Challenge #
Refactor a fixed‑width layout into a fully responsive one, ensuring images, text, and interactive components scale appropriately.
Script element #
Script element
Concept #
Embeds executable code, typically JavaScript, into an HTML document.
Explanation #
The script tag can contain inline code or reference an external file via the src attribute. The async and defer attributes control when the script is fetched and executed relative to page parsing.
Practical application #
Load a third‑party analytics library asynchronously to avoid blocking page rendering.
Challenge #
Convert a page that places all scripts at the top of the head into a version that loads them at the end of the body with defer to improve perceived performance.
Section element #
Section element
Concept #
Defines a thematic grouping of content, typically with a heading.
Explanation #
The section tag is used for distinct parts of a page, such as chapters, tab panels, or feature blocks, and works well with headings to create a logical hierarchy.
Practical application #
Organize a long article into multiple section elements, each beginning with an h2 heading.
Challenge #
Identify a page that misuses div for major content areas and replace those with appropriate section tags.
Semantic HTML #
Semantic HTML
Concept #
Using element names that describe their purpose rather than merely their appearance.
Explanation #
Semantic tags convey meaning to browsers, search engines, and assistive technologies, improving discoverability and usability. For example, header denotes introductory content, while footer marks concluding information.
Practical application #
Replace a decorative div that contains a site logo with a header element and include a nav for the main menu.
Challenge #
Audit a legacy site and rewrite its markup to use only semantic elements, documenting the rationale for each change.
Source element #
Source element
Concept #
Provides alternative media resources for audio, video, or picture.
Explanation #
Within a video block, multiple source tags can specify different formats (e.g., MP4, WebM) so the browser selects the first compatible one.
Practical application #
Offer both audio formats to maximize playback support across browsers.
Challenge #
Write markup that supplies three video sources—MP4, WebM, and Ogg—while ensuring the page remains functional if none are supported.
Span element #
Span element
Concept #
An inline container used to apply styling or group text without adding meaning.
Explanation #
The span tag does not affect layout by itself; it is commonly paired with CSS classes or inline styles to target specific words or phrases.
Practical application #
Highlight a keyword in a paragraph by wrapping it in span and applying a background color via CSS.
Challenge #
Replace excessive span usage with more appropriate semantic tags like strong or em where the intent is emphasis.
Table element #
Table element
Concept #
Displays tabular data in rows and columns.
Explanation #
A table is composed of table rows (tr), header cells (th), and data cells (td). The optional caption provides a description, while thead, tbody, and tfoot segment the content for styling and accessibility.
Practical application #
Create a price comparison chart that includes a caption and uses th for column headings.
Challenge #
Convert a layout that uses nested div elements to mimic a grid into a proper table, ensuring screen readers can navigate the data correctly.
Template element #
Template element
Concept #
Holds inert markup that is not rendered until activated by script.
Explanation #
The template tag stores HTML fragments; JavaScript can retrieve its content and insert it into the document, allowing for dynamic UI generation without initial parsing overhead.
Practical application #
Build a client‑side component that clones a template row to add new entries to a table when the user clicks “Add”.
Challenge #
Implement a modal dialog that pulls its structure from a template element, ensuring the dialog is removed from the DOM when closed.
Text #
level semantics
Concept #
Inline tags that convey meaning about the text they enclose.
Explanation #
Tags such as strong (strong importance) and em (emphasis) inform assistive technologies and search engines about the intended emphasis, while code denotes a fragment of computer code.
Practical application #
Mark up a sentence that contains a product name with strong to highlight it for both visual users and screen readers.
Challenge #
Review a document that uses only span for emphasis and replace those instances with appropriate text‑level semantic tags.
Title element #
Title element
Concept #
Specifies the title of the document, shown in the browser tab and search results.
Explanation #
The title tag must be placed inside the head and contains concise, descriptive text that accurately reflects the page’s content.
Practical application #
Write a title that includes the primary keyword and the brand name, separated by a hyphen.
Challenge #
Audit a site for duplicate or missing titles and generate unique, optimized titles for each page.
Unordered list #
Unordered list
Concept #
A list where items are marked with bullets or other markers, not numbers.
Explanation #
The ul element groups li items without implying order; CSS can customize the marker style.
Practical application #
Create a navigation menu using a ul where each li contains a link.
Challenge #
Transform a series of br-separated links into a semantic ul structure while preserving the visual layout.
Video element #
Video element
Concept #
Embeds a video file with native playback controls.
Explanation #
The video tag can contain multiple source elements for format fallback, and attributes like controls display browser‑provided playback UI. The poster attribute shows a placeholder image before playback starts.
Practical application #
Provide a short promotional clip that plays automatically on mute when the page loads, using autoplay and muted.
Challenge #
Ensure that the video is accessible by adding track elements for captions and providing a text transcript.
Viewport meta tag #
Viewport meta tag
Concept #
Controls the layout viewport size and scaling on mobile devices.
Explanation #
The declaration meta name="viewport" content="width=device-width, initial-scale=1.0" tells browsers to match the screen’s width and render the page at 100 % scale, preventing horizontal scrolling.
Practical application #
Add the viewport meta tag to a mobile‑first site to enable proper scaling on smartphones.
Challenge #
Diagnose a page that appears zoomed out on iOS devices despite having a viewport tag, and adjust the content to fix the issue.
Web storage API #
Web storage API
Concept #
Provides client‑side storage mechanisms (localStorage and sessionStorage) for persisting data.
Explanation #
localStorage stores data with no expiration date, while sessionStorage clears when the browser tab is closed. Both are accessed via JavaScript using simple get/set methods.
Practical application #
Save a user’s theme preference (dark or light) in localStorage so it persists across visits.
Challenge #
Implement a fallback to cookies for browsers that do not support the Web Storage API.
Whitespace handling #
Whitespace handling
Concept #
The way browsers treat spaces, tabs, and line breaks in HTML.
Explanation #
By default, HTML collapses consecutive whitespace characters into a single space. To preserve formatting, developers can use pre or explicit br tags.
Practical application #
Display a code snippet with indentation using pre and code.
Challenge #
Convert a paragraph that relies on multiple spaces for alignment into a table or flexbox layout to avoid reliance on whitespace.
XML namespace #
XML namespace
Concept #
A method to avoid element name collisions by qualifying names with a URI.
Explanation #
When embedding SVG inside HTML, the svg element includes an xmlns attribute (e.g., xmlns="http://www.w3.org/2000/svg") to indicate that its child elements belong to the SVG namespace.
Practical application #
Insert a vector graphic directly in HTML without using an img tag.
Challenge #
Diagnose a page where SVG elements are not rendered because the namespace declaration is missing or incorrect.
Yielding (in CSS) #
Yielding (in CSS)
Concept #
Not an HTML term but often encountered when discussing layout interactions with HTML.
Explanation #
When a browser recalculates layout after DOM changes, it “yields” control back to the rendering engine, potentially causing performance bottlenecks if excessive.
Practical application #
Batch DOM updates using requestAnimationFrame to minimize layout thrashing.
Challenge #
Refactor a script that updates the width of dozens of elements in a loop to use a single class change instead.
Zero‑width space (ZWSP) #
Zero‑width space (ZWSP)
Concept #
An invisible character used to control line breaking without adding visible space.
Explanation #
The character U+200B can be inserted in long strings (e.g., URLs) to allow browsers to wrap them at appropriate points without altering the displayed text.
Practical application #
Prevent horizontal scrolling on a page with a long, unbreakable URL by inserting ZWSPs.
Challenge #
Write a function that automatically injects ZWSPs into any string longer than 30 characters to improve mobile readability.
Accessibility (a11y) #
Accessibility (a11y)
Concept #
Designing web content so that people with disabilities can perceive, understand, navigate, and interact with it.
Explanation #
Semantic HTML, proper labeling, sufficient color contrast, and descriptive alt text all contribute to accessibility. The abbreviation “a11y” counts the 11 letters between “a” and “y”.
Practical application #
Add aria‑label to a button that only contains an icon, ensuring screen readers convey its purpose.
Challenge #
Run an automated accessibility audit on a page, then manually fix at least five issues that the tool flags as “critical”.
Box model #
Box model
Concept #
The layout model that describes how the size of an element is calculated.
Explanation #
An element’s total width equals content width + left/right padding + left/right border + left/right margin. The same applies to height. CSS properties like box-sizing can alter this calculation.
Practical application #
Set box-sizing: border-box globally to make width calculations more intuitive for designers.
Challenge #
Identify a layout bug caused by padding adding unexpected width, then resolve it by applying the appropriate box‑model property.
Character encoding #
Character encoding
Concept #
Defines how characters are represented as bytes in a document.
Explanation #
Declaring meta charset="UTF-8" ensures that characters from virtually all languages render correctly, preventing mojibake (garbled text).
Practical application #
Serve all HTML files with UTF‑8 encoding and include the charset meta tag to guarantee consistency.
Challenge #
Debug a page where accented characters appear as � symbols, tracing the issue back to an incorrect file encoding.
Data attribute #
Data attribute
Concept #
Custom attributes that store extra information on an element, prefixed with data-.
Explanation #
For example, div data-user-id="42" embeds a user identifier that can be accessed via element.dataset.userId in script.
Practical application #
Attach a product ID to a “Buy” button without affecting the visual markup.
Challenge #
Refactor