Full Stack Web Development Web Fundamentals & HTML5 Syllabus

What does <meta charset="UTF-8"> do and why is it important?

It declares the document's character encoding as UTF-8 so the browser correctly interprets text/special characters; it should appear early in the <head>.

What is the purpose of the viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1">?

It controls layout on mobile browsers, setting the viewport width to the device width and the initial zoom to 1, enabling responsive design.

What are the six HTML heading levels and what determines their use?

<h1> through <h6>, representing decreasing levels of importance/hierarchy. Use should follow logical document structure, not visual size; ideally one <h1> per page.

Compare the semantic meaning of <strong>/<em> versus <b>/<i>.

<strong> and <em> convey importance and emphasis (semantic meaning, affects assistive tech); <b> and <i> apply bold/italic styling without semantic importance.

What is the difference between an ordered list (<ol>) and an unordered list (<ul>), and what element holds each item?

<ol> displays numbered/sequenced items; <ul> displays bulleted unordered items. Both use <li> for each list item.

How do you create a hyperlink in HTML, and what attribute opens it in a new tab?

Use <a href="url">text</a>. Add target="_blank" (ideally with rel="noopener noreferrer") to open in a new tab.

What is the difference between <br> and <p> for line breaks?

<br> inserts a single line break within content; <p> defines a separate paragraph block with surrounding margin. Use <p> for paragraphs, <br> only for meaningful breaks like addresses/poems.

Name the core HTML table elements and their roles: table, tr, th, td.

<table> = the table container; <tr> = a table row; <th> = a header cell (bold/centered, semantic header); <td> = a standard data cell.

What are <thead>, <tbody>, and <tfoot> used for in a table?

They group table rows semantically: <thead> for header rows, <tbody> for the main data rows, <tfoot> for footer/summary rows, improving structure and accessibility.

What do the colspan and rowspan attributes do in a table cell?

colspan makes a cell span multiple columns; rowspan makes a cell span multiple rows, merging cells visually.

What is the purpose of the <caption> element in a table, and where must it appear?

It provides a title/description for the table for users and assistive tech. It must be the first child element inside <table>.

Define block-level versus inline elements in terms of layout behavior.

Block-level elements start on a new line and take full available width (e.g., <div>, <p>, <h1>); inline elements flow within a line and take only their content's width (e.g., <span>, <a>, <strong>).

Can width and height be applied to a pure inline element, and how does inline-block differ?

Width/height are ignored on pure inline elements. display:inline-block flows inline like text but accepts width, height, and vertical margins/padding like a block.

Give three examples each of block-level and inline elements.

Block: <div>, <p>, <section>, <ul>, <h1>. Inline: <span>, <a>, <img>, <strong>, <em>.

What attributes on a <form> element control where and how data is sent?

action specifies the URL that receives the data; method specifies the HTTP method (GET or POST).

What is the difference between submitting a form with method="GET" versus method="POST"?

GET appends form data to the URL as a query string (visible, length-limited, cacheable/bookmarkable); POST sends data in the request body (not in URL, suited for sensitive or large data).

Why must a form control have a 'name' attribute to be submitted?

The name attribute is the key under which the field's value is sent to the server. Controls without a name are not included in the submitted data.

How does a <label> get associated with an input, and why does it matter?

Via the label's for attribute matching the input's id (or by wrapping the input). It improves accessibility and lets clicking the label focus/activate the control.

List five distinct input types available via the <input> element.

Examples: text, password, email, number, checkbox, radio, date, file, range, color, submit. (Any five valid types.)

What is the difference between radio buttons and checkboxes?

Radio buttons (same name) allow only one selection within a group; checkboxes allow zero or more independent selections.

When should you use <textarea> instead of <input type="text">?

Use <textarea> for multi-line free-form text input; <input type="text"> is for single-line text.

How do you create a dropdown selection list, including a default-selected option?

Use <select> containing <option> elements; mark the default with the 'selected' attribute, e.g., <option selected>...</option>.

Name three HTML5 attributes used for built-in client-side validation.

required (field must be filled), pattern (regex match), min/max/maxlength (value or length limits), and type-based validation like type="email" or type="url".

What is the benefit and the critical limitation of client-side validation?

Benefit: instant feedback and fewer server round-trips. Limitation: it can be bypassed, so server-side validation is still mandatory for security and data integrity.

What does the 'placeholder' attribute do, and why is it not a substitute for a label?

It shows hint text inside an empty field that disappears on input. It is not a label substitute because it vanishes when typing and is poorly handled by assistive tech.

List the main HTML5 semantic structural elements and their intended purpose.

<header> (intro/nav), <nav> (navigation links), <main> (primary unique content), <section> (thematic grouping), <article> (self-contained content), <aside> (tangential content), <footer> (footer info).

What is the difference between <article> and <section>?

<article> is self-contained, independently distributable content (e.g., a blog post); <section> is a thematic grouping of related content within a document, usually with a heading.

Why use semantic elements like <nav> and <main> instead of generic <div>s?

They convey meaning to browsers, assistive technologies, and search engines, improving accessibility and SEO, and make markup more readable/maintainable.

What attributes make the <img> element complete and accessible?

src (image source URL) and alt (alternative text describing the image for screen readers and when the image fails to load); width/height help reserve layout space.

What HTML5 elements embed audio and video natively, and what attribute provides fallback formats?

<audio> and <video> embed media; nested <source> elements provide multiple formats so the browser picks a supported one. Content between the tags acts as fallback text.

In the context of web accessibility (a11y), what do alt text and ARIA roles contribute, and what does 'semantic HTML' do for screen readers?

Alt text describes images for screen readers; ARIA roles/attributes add semantics to elements that lack them; semantic HTML (headings, landmarks, labels) gives screen readers an inherent, navigable structure, reducing the need for ARIA.