Web Systems and Technologies: HTML Layouts, Forms, Selectors, Lists, Tables, and Elements

Flashcards covering HTML form elements, semantic layout tags, class and ID attributes, list types, table construction, and block/inline display rules.

What is the primary purpose of HTML layout elements?

HTML layout elements are semantic elements used to define different structural parts of a web page, such as navigation links, headers, footers, and content sections.

Which HTML layout elements are represented in this structural web page diagram?

The diagram illustrates the standard layout structure using the <header>, <nav>, <section>, <article>, <aside>, and <footer> elements.

What are the specific functions of the <header> and <footer> elements?

<header> defines a header for a document or section, while <footer> defines a footer for a document or section.

How do the <section> and <article> HTML layout elements differ?

<section> defines a generic section in a document, whereas <article> defines independent, self-contained content.

What functions do the <details> and <summary> elements perform?

<details> defines additional details that the user can open and close on demand, and <summary> defines a heading for the <details> element.

What is an HTML <form> element used for?

An HTML <form> element is a container for input elements used to collect user input, which is most often sent to a server for processing.

What selection behavior distinguishes <input type="radio"> from <input type="checkbox">?

<input type="radio"> allows a user to select ONE of a limited number of choices, while <input type="checkbox"> lets a user select ZERO or MORE choices.

Why is the <label> element important for web accessibility?

The <label> element is useful for screen-reader users because the screen-reader reads the label out loud when the user focuses on the connected input element.

What is the function of <input type="submit"> and where is form data sent?

It defines a button for submitting form data to a form-handler, which is typically a server file containing a script to process the input data.

How do <select> and <option> elements form a drop-down menu?

The <select> element creates the drop-down list, and each <option> element inside it defines an individual selectable item.

Which attributes control the visible dimensions of an HTML <textarea>?

The rows attribute specifies the visible number of lines, and the cols attribute specifies the visible width.

How are <fieldset> and <legend> used together in forms?

<fieldset> groups related data inside a form, and <legend> defines a caption for that <fieldset>.

How is an <input> element linked to a <datalist> element?

The list attribute of the <input> element must refer directly to the id attribute of the <datalist> element.

What does the action attribute in an HTML form define?

The action attribute specifies the destination file on the server where form data is sent upon submission.

What is the HTML class attribute and how is it formatted in CSS?

The class attribute assigns a class name to HTML elements to group them for CSS styling or JavaScript manipulation. In CSS, a class is selected with a period prefix (e.g., .city).

How can an HTML element be assigned to multiple classes?

Multiple class names are placed inside the class attribute separated by a space (e.g., <div class="city main">).

Which JavaScript method retrieves elements by their class name?

The getElementsByClassName() method.

What are the rules and constraints for setting an HTML id attribute?

The id value must be unique within the document, is case-sensitive, must contain at least one character, cannot start with a number, and must not contain whitespaces.

What is the key structural difference between a class and an id in HTML?

A class name can be shared by multiple HTML elements on a page, whereas an id name must be completely unique to a single element.

How are HTML bookmarks created and linked within a document?

A bookmark is created by assigning an id to an element (e.g., <h2 id="C4">), and linked using an anchor tag targeting that id with a hash prefix (e.g., <a href="#C4">).

Which JavaScript method accesses an HTML element using its id?

The getElementById() method.

What default bullet formatting is used for unordered (<ul>) and ordered (<ol>) lists?

Unordered lists (<ul>) mark items with small black circular bullets by default, while ordered lists (<ol>) mark items with sequential numbers.

Which three tags construct an HTML description list, and what does each mean?

<dl> defines the description list, <dt> defines the term name, and <dd> describes each term.

What tags define rows, data cells, and header cells in an HTML table?

<tr> defines a table row, <td> defines a table data cell, and <th> defines a table header cell.

What tags group table headers, body content, and footers in HTML tables?

<thead> groups header content, <tbody> groups body content, and <tfoot> groups footer content.

Which CSS property merges adjacent table cell borders into a single border?

Setting border-collapse: collapse; on the table selector.

What are the default formatting behaviors of a block-level element?

A block-level element always starts on a new line, automatically receives top and bottom margins from browsers, and stretches to fill the full available width.

What are the default formatting behaviors and restrictions of an inline element?

An inline element does not start on a new line, takes up only as much width as necessary, and cannot contain any block-level elements.

How can a <div> element that is not full width be centered horizontally on a page?

By setting its CSS margin property to auto.

What three CSS approaches allow multiple <div> elements to be positioned side by side?

Using the CSS float property, changing the display property to inline-block, or setting the parent wrapper as a flex container using CSS Flexbox.