Chapter 3

Common HTML containers.

<header>-Container for introductory content <footer>-Container for content descriptive information about the web page like author, copyright, or date modified <section>-Container for distinct parts of a document, such as a chapter <article>-Container for self-contained content that can be reused independently, such as a news article <nav>-Container for content relating to website navigation <aside>-Container for content not directly related to the main topic of a document <div>-Generic tag for creating block containers <span>-Generic tag for creating inline containers

<div>

A <div> tag is a generic tag for creating block containers to facilitate managing page content, and is the only block tag with no semantic meaning, unlike other block tags such as <p> and <table>.

block

A block tag's content tries to fill the width of the tag's parent container and can contain other block tags, inline tags, and text. Block tags include headings, tables, and paragraphs.

boolean attribute

A boolean attribute is an attribute that is true when present false when absent. Ex: The checked attribute for a checkbox widget is a boolean attribute. If the checked attribute is set, the checkbox will start in the selected state; otherwise, the checkbox will start in the unselected state. <input type="checkbox" name="foodPreference" value="vegetarian" checked> is the preferred way to use the checked boolean attribute.

button

A button widget can be created using the <button> opening and closing tags or with <input type="button">. The <button> element allows text and images to be displayed in a button, but an <input> button only allows text.

checkbox

A checkbox is a widget for input elements with the type attribute of "checkbox", which allows users to check, or select, a value.

fallback

A fallback is a mechanism that allows a web page element to function correctly even if the browser does not support a particular element. Good practice is to implement a fallback mechanism if a particular HTML5 widget is not widely supported by browsers at the time.

list box

A list box widget is created by specifying a size with the select element's size attribute. Ex: <select size="4"> creates a list box that shows four options at a time. If the list box contains more than size options, the browser adds a vertical scrollbar so the user can scroll through the list of options.

polyfill

A polyfill is a fallback using JavaScript code that makes certain features of HTML5 (Ex: the date picker) work on browsers that do not natively support those HTML5 features. Developers often use a JavaScript library such as Modernizr to detect which features the browser does not support, and then load one or more polyfills to provide fallback mechanisms for the non-supported HTML5 features.

text box widget

A text box widget is an input element with the type attribute of "text" that allows users to enter a single line of text.

widget

A widget is an interactive component (usually graphical) that the browser uses to interact with a user. Ex: Buttons, drop-down menus, and data entry fields.

inline

An inline tag's content tries to fill the minimum space possible in the tag's parent container and can only contain text or other inline tags. For example, the <a> tag is an inline tag that creates a hyperlink container as big as the link's internal content; a hyperlink does not fill the width or height of the link's parent paragraph.

Input pickers

An input picker is a widget that allows the user to interactively pick a choice using a popup or other guided selection method.

The color input picker

Clicking on the color input picker creates a color selector pop up that helps the user explore and choose a color. Requiring the user to enter a hex string such as #4268D3 into a text input field is confusing for most users, so the color picker introduces a large improvement. The basic syntax for the color input is <input type="color">.

pattern

Provides a pattern (called a regular expression) that input must match. E.g. pattern="[ABC][0-9]" only permits entering a two-character value that first has A, B, or C, and is then followed by a single digit. <input type="text" pattern="[ABC][0-9]">

step

Sets amount by which the value can change. E.g., step="5" means that the value can only change by multiples of 5. <input type="range" step="5">

max

Sets the maximum value that the input can have. E.g. max="212" limits the input value to a maximum of 212. <input type="number" max="212">

min

Sets the minimum value that the input can have. E.g. min="1976-07-04" limits the date input value to no earlier than the U.S. bicentennial date, July 4, 1976. <input type="date" min="1976-07-04">

required

States that input is required and the field must not be left empty. E.g. required <input type="password" required>

<form>

The <form> tag allows the web browser to send information from the user to the server. The <form> tag has two primary attributes: 1) action 2)method

<iframe>

The <iframe> element allows a web page to be embedded in a rectangular area of the current web page. The <iframe> element uses the src attribute to specify the URL of the web page to display and the width and height attributes to define the width and height in pixels of the rectangular iframe.

<label>

The <label> tag displays descriptive text associated with a specific widget. A label has a for attribute whose value should match the id attribute for the widget being labeled.

<option>

The <option> opening and closing tags create a value, or option, the user can select within a drop-down menu. When the user is not interacting with the menu, the drop-down menu usually displays the selected option.

<select>

The <select> opening and closing tags create a drop-down menu (or drop-down list), which allows users to select one of several predefined values.

<span>

The <span> tag is the generic tag for creating inline containers to facilitate managing content on the page. Unlike other inline tags, such as <a> and <em>, the <span> tag has no semantic meaning.

<style>

The <style> tag allows the web page to introduce presentational directives, usually CSS. A <style> tag is placed in an HTML document prior to the <body> tag, because the style section is designed to describe the presentation of the entire document. Although only needed for non-CSS content and rarely used, the <style> tag has an optional type attribute that describes the content inside the tag.

<video>

The <video> element displays a video in a web page. The <source> element is used in a <video> tag to specify the name of the video file to play.

<audio>

The HTML5 <audio> element plays an audio file in a web page. The <source> element is used inside the <audio> tag to specify an audio file to play.

The date input picker

The date input box displays a date input template and lets the user specify the date in one or more ways, including a popup date selector. The basic syntax for the date input is <input type="date">. Two attributes for the date input are min (the earliest date permitted) and max (the latest date permitted).

The number input

The number input ensures user input is a valid number. The basic syntax for the number input is <input type="number">.

The range input

The range input control allows the user to select a value by dragging a sliding control along the length of a line. The basic syntax for the range input is <input type="range">. Three commonly used attributes for the range input are the min, max and currently selected values.

submit button

The web browser displays a submit button widget for an <input> tag with the type attribute of "submit", which sends the associated form's data to the server when clicked.

radio button

is a widget for input elements with the type attribute of "radio", which allows users to select exactly one value from possibly many values. The web browser groups radio buttons together with the same name attribute, where each possible value in a group has an associated input. When submitting a form, the browser sends the selected radio button's name and value attribute. Ex: If the radio button <input type="radio" name="movie" value="ET"> is selected, "movie=ET" will be sent in the HTTP request.

parent container

is any container within which other containers are located.

container

is any part of a web document body that has opening and closing tags.

browser plug-in

is software that can properly read and interpret a file format that the browser cannot. Ex: The Flash Player plug-in allows a browser to play Flash files. Plug-ins have traditionally been a source of security risks for web browsers, and some browsers have stopped supporting some types of plug-ins.

query string

s a set of name=value pairs separated by the ampersand character (&).

password field

s a widget for input elements with the type attribute of "password", which allows users to enter a password without the password contents being displayed on-screen. Web browsers usually provide facilities to remember passwords at various websites to help users.

<input>

tag allows the user to enter information into a web page

enctype

tribute of "multipart/form-data" indicates the web browser should split a POST request into multiple parts, where each input field is sent as a separate part of the HTTP request message.

text area

widget is an input element specified by <textarea> opening and closing tags that allows users to enter multiple lines of text. A <textarea> tag has optional rows and cols attributes to specify the initial size of the text area.