More HTML Flashcards
A blank is any part of a web document body that has opening and closing tags.
container
A blank is the container in which another element resides.
parent container
Container for introductory content
<header>
</header>
Generic tag for creating inline containers
<span></span>
Generic tag for creating block containers
<div>
</div>
Container for content not directly related to the main topic of a document
<aside>
</aside>
Container for content relating to website navigation
<nav>
</nav>
Container for self-contained content that can be reused independently, such as a news article
<article>
</article>
Container for distinct parts of a document, such as a chapter
<section>
</section>
Container for the document’s primary content
<main>
</main>
Container for person’s or organization’s contact information
<address>
</address>
Container for content descriptive information about the web page like author, copyright, or date modified
<footer>
</footer>
HTML elements can be categorized as either blank or blank
block or inline
A blank (sometimes called a block-level element) fills the width of the element’s parent container and can contain other block elements, inline elements, and text.
block element
Block elements include blank, blank and blank.
<h1>, <table>, and <p>
</p></table></h1>
Some block elements cannot be contained within certain blank when the semantics are unclear. Ex: The <p> element cannot contain another <p> element.
other block elements
A blank element is a generic element for creating block containers to facilitate managing page content and is the only block element with no semantic meaning, unlike other block elements such as <p> and <table>.
<div>
</div>
An blank fills the minimum space possible in the element’s parent container and can only contain text or other inline elements.
inline element
The blank element is an inline element 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.
<a></a>
The blank element is the generic element for creating inline containers to facilitate managing content on the page. Unlike other inline elements, such as <a> and <em>, the blank element has no semantic meaning.</em></a>
<span></span>
The blank tag allows the web browser to submit information from the user to the server.
<form>
</form>
The <form> tag has what two primary attributes:
The action attribute
The method attribute
The blank indicates the URL where the form data should be sent. Typically the URL uses HTTPS so the form data is encrypted.
action attribute
The blank indicates the HTTP request type the browser will use to communicate with the server.
method attribute
The method is either blank or blank. Blank is the default method if no method is specified.
GET or POST
GET
The blank is a technique used by a web browser to submit information to a web server by altering the URL of the HTTP request.
GET method
When a user clicks the submit button in a form that uses the GET method, the browser performs what 4 following steps:
Collect all data from the form fields into a query string.
Create a URL with the server page and name=value pairs.
Use the newly created URL to create and send an HTTP GET request.
Display or update the web page using the HTTP response received from the server.
The blank is a set of name=value pairs separated by the ampersand character (&). Each name is specified as an attribute of the HTML field, and the value is the user-entered data. Ex: The first and last field names and values in the animation below become the string: first=Rick&last=Deckard
query string
The URL is composed of the blank
action attribute specified in the form, the question mark character (?), and the query string. Ex: http://example.com/apply?first=Rick&last=Deckard
The GET method should not be used to submit blank like phone numbers, credit card information, etc.
private information
The blank is a technique used by a web browser to submit information to a web server by sending the information in the HTTP request body.
POST method
When the user clicks the submit button in a form that uses the POST method, the browser performs what four steps
Create an HTTP POST request using the URL from the form’s action attribute.
Create a query string from the form data. Ex: first=Sarah&last=Connor
Place the the query string in the HTTP request message body and send the request.
Display or update the web page using the HTTP response received from the server.
To accommodate binary data, a blank can be split into multiple parts.
a POST request
The <form> tag’s blank “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.
enctype attribute value
The &, ?, and = characters have special meaning in a query string. If a user enters characters like &, ?, =, or white space characters like space, newline, or tab, the characters must be blank, meaning the characters must be transformed into other representations.
escaped
The browser rules for escaping form data are what?
Space → +
All other reserved characters, newline, and tab → %XX where XX is the ASCII hex value of the character
The web server blank the form data to determine what the original values are.
unescapes
A blank is an interactive component (usually graphical) that the browser uses to interact with a user. Ex: Buttons, drop-down menus, and data entry fields.
widget
The blank allows the user to enter information into a web page.
<input></input> tag
The <input></input> tag has what five primary attributes:
The type attribute
The name attribute
The id attribute
The placeholder attribute
The value attribute
The blank specifies a default value for a widget.
value attribute
The blank specifies text that first appears in a text widget, typically for giving the user a hint as to the expected value.
placeholder attribute
The blank is used to give a widget a unique identifier.
id attribute
The blank names the widget and sends the widget’s value when the widget’s form is submitted.
name attribute
The blank indicates the widget type. Common types include text, password, submit, and button.
type attribute
A blank widget is an input element with the type attribute of “text” that allows users to enter a single line of text.
text box
The web browser displays a blank widget for an <input></input> tag with the type attribute of “submit”, which sends the associated form’s data to the server when clicked.
submit button
The blank 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.
<label></label>
A blank widget is an input element specified by <textarea> opening and closing tags that allows users to enter multiple lines of text.</textarea>
text area
A <textarea> tag has optional blank and blank attributes to specify the initial size of the text area.</textarea>
rows and cols
An blank is a widget that allows the user to interactively pick a choice using a popup or other guided selection method.
input picker
The blank is an input picker that allows the user to enter a date or choose a date from a calendar popup.
date picker
The basic syntax for the date picker is blank.
<input></input>
Two common attributes for the date input are blank and blank.
min (the earliest date permitted)
max (the latest date permitted)
Clicking on the blank creates a color selector popup that helps the user explore and choose a color.
color picker
The basic syntax for the color picker is blank.
<input></input>
The blank ensures user input is a valid number.
number input
The basic syntax for the number input is blank
<input></input>
The blank and blank attributes are commonly used with the number input.
min
max
The blank widget allows the user to select a value by dragging a sliding control along the length of a line.
range input
The basic syntax for the range input is blank
<input></input>
Three commonly used attributes for the range input are blank, blank and blank
min, max, and value.
A blank is the combination of a text box and drop-down menu into a single widget.
combo box
A combo box is created with an blank element, which creates the text box, and a blank element, which provides the drop-down list options.
<input></input>
<datalist>
</datalist>
Four input types exist for entering specific types of text. Name them
url
tel
email
search
For typing a URL
url
For typing a telephone number
tel
For typing an email address
For typing search terms
search
Sets the maximum number of input characters.
maxlength
Sets the maximum value that the input can have.
max
Sets the minimum value that the input can have.
<!-- Date may not be earlier than July 4, 1976 -->
min
Provides a regular expression that the input must match.
pattern
States that the input is required and must not be left empty.
required
Sets the amount by which the value can change.
step
A blank 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 blank mechanism if a particular widget is not widely supported by browsers at the time.
fallback
A blank is a fallback using JavaScript code that makes certain HTML features (Ex: the date picker) work on browsers that do not natively support those 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 blank to provide fallback mechanisms for the non-supported features.
polyfill
The blank element plays an audio file in a web page.
<audio>
</audio>
The blank element is used inside the <audio> tag to specify an audio file to play.</audio>
<source></source>
Boolean attribute that makes the audio begin playing automatically.
autoplay
Boolean attribute that displays audio controls for the user to play, pause, and control the volume.
controls
Boolean attribute that replays the audio upon reaching the end of the audio.
loop
Boolean attribute that initially mutes the audio.
muted
A browser blank is software that can properly read and interpret a file format that the browser cannot.
plug-in
Different web browsers support different audio formats, so multiple <source></source> tags can be used to supply alternate file formats. The blank and blank formats have wide browser support.
MP3
AAC
Blank is designed to be the successor of the MP3 format with better sound quality.
AAC (Advanced Audio Coding) .aac
The sound portion of an MPEG file. Most popular format for music players.
MP3 .mp3
Open-source audio coding format developed by Xiph.Org Foundation.
Ogg Vorbis .ogg
Developed by Microsoft and IBM, mainly for storing uncompressed audio on Windows.
Wave (Waveform Audio File Format) .wav
The blank element displays a video in a web page.
<video>
</video>
The blank element is used in a <video> tag to specify the name of the video file to play.</video>
<source></source>
Boolean attribute that makes the video begin playing automatically.
autoplay
Boolean attribute that displays video controls for the user to play, pause, and control the volume.
controls
Boolean attribute that replays upon reaching the end of the video.
loop
Boolean attribute that initially mutes the video.
muted
Specifies the pixel width of the video’s display area.
width
Some browsers will not autoplay a video unless the video is blank.
muted
blank, blank, and blank are ideal video formats for playing video on the web.
MP4, WebM, and Ogg
Developed by the Moving Pictures Expert Group. m4a is audio only, but mp4 may contain video.
MPEG-4 or MP4 .m4a
.mp4
Open video compression format developed by Xiph.Org Foundation.
Ogg Theora
.ogg
.ogv
.ogm
Open media format developed by Mozilla, Opera, Adobe, and Google for the web.
WebM .webm
The audio and video elements can be controlled with blank. Ex: Blank can start and stop audio, change the volume, and jump to a specific location in a video.
JavaScript
A YouTube video may be embedded in a web page with the blank element.
<iframe>
</iframe>
The blank element allows a web page to be embedded in a rectangular area of the current web page.
<iframe>
</iframe>
The <iframe> element uses the blank to specify the URL of the web page to display and the blank and blank attributes to define the width and height in pixels of the rectangular iframe.
src attribute
width and height
The blank tag allows a web page to include executable code, which the browser assumes to be JavaScript unless indicated otherwise.
<script> </script>
The optional blank is used to indicate the content type when the content is not JavaScript.
type attribute
The blank provides the URL of an external file containing JavaScript code.
src attribute
If a
tag does not have the src attribute, then the blank is contained directly within the tag.
JavaScript code
A common error is to forget the blank tag when using the src attribute. Even when the JavaScript code is located in a separate external file, the blank tag must be included.
closing </script>
Good practice is to use the src attribute to separate content and functionality and promote modularity. An blank file can be edited separately from an HTML file, which allows a web page’s interactive content to be updated even if the content is unchanged. A separate JavaScript file can also be reused on many web pages to provide the same functionality for different pieces of content. Additionally, when the JavaScript file is separate, a browser that doesn’t understand JavaScript, such as a screenreader for blind users, can avoid downloading the JavaScript file that will not be used.
external JavaScript
The blank tag allows the web page to introduce presentational directives, usually CSS.
<style>
</style>A <style> tag is placed in an HTML document prior to the blank, because the style section is designed to describe the presentation of the entire document.</style>
<body> tag
</body>
Although only needed for non-CSS content and rarely used, the <style> tag has an optional blank that describes the content inside the tag.</style>
type attribute
For tags that have a closing tag, always use the blankl to mark the end of the tag content. Ex: Standard HTML does not require closing </p> tags because the web browser can infer the ending of a paragraph, but always including the </p> closing tag to end the paragraph explicitly is safer. A common error is to expect all web browsers to add a missing closing tag at the same location in the HTML.
closing tag
A blank is an open tag that also closes by putting a forward slash at the end of the tag. Ex: <br></br>. Standard HTML does not require or promote using self-closing tags for void elements.
self-closing tag
Always use blank around attribute values. Ex: Use value=”Start” instead of value=Start. While HTML does not require quotes around an attribute value that does not contain a space, a common error is forgetting the quotes for attribute values that contain spaces. Ex: value=Start animation is illegal and results in an error.
quotes
Although either double or single quotes are acceptable around HTML attribute values, good practice is to use blank, which in general results in more readable HTML. Ex: Use value=”Start” instead of value=’Start’. Inconsistent use of quotes can also lead to problems when using some web development frameworks, which assume the developer uses double quotes.
double quotes
If a double quote (“) needs to be placed within an attribute value, the internal double quote must be escaped. A special character such as the double quote can be escaped within an attribute value by placing the blank before the special character, causing that character to lose any special meaning. Ex: alt=”Dwight D. "Ike" Eisenhower”.
backslash character ()
A blank is an attribute that is true when present and false when absent. Ex: The checked attribute for a checkbox widget is a boolean attribute. If the checked attribute is set, the checkbox is initially selected.
boolean attribute
Older versions of HTML required all attributes to have values, so developers would use checked=”checked” to indicate the checked attribute was true. Browsers continue to support the older syntax, but good practice is to only use the attribute name for a boolean attribute without specifying a blank
value
Good practice is to use blank for all tags and attributes. Ex: Use <p> and value=”Start” instead of <P> and VALUE=”Start”.
lowercase
Each blank should start on a new line. Ex: A <p>, <table>, or <ol> element should always begin on a new line. To highlight the nature of block elements, inline elements should only start on a new line for readability purposes. Ex: A <a>, <span>, or <q> element may start anywhere on a line.</q></span></a>
block element
Nested elements should be indented at least blank. Indentation should be consistent throughout a file.
two spaces
Always provide blank and/or blank for widgets.
labels
placeholders
Good practice is to not use blank or blank CSS and JavaScript.
embedded or inline
CSS is designed for blank; blank are designed for holding tabular data. Good practice is to avoid using tables to manage page layout and to avoid using CSS to manage tabular data.
layout
tables
Good practice is to validate HTML using an blank and revise the HTML to eliminate any errors or warnings. One of the big challenges in web development is to make sure that the web pages are processed correctly by as many browsers as possible.
HTML validator
blank are elements that have meaning to both the developer as well as the web browser.
Semantic elements
Examples of non-semantic elements:
blank and blank
<div> and <span>
</span></div>
Examples of semantic elements: blank, blank and blank - Clearly defines its content.
<form>, <table>, and <article>
</article></table></form>
The blank element defines a section in a document.
<section>
</section>
Examples of where a blank element can be used:
Chapters
Introduction
News items
Contact information
<section>
</section>
A web page could normally be split into sections for blank, blank, and blank.
introduction, content, and contact information
The blank element specifies independent, self-contained content.
<article>
</article>
An blank should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.
article
Examples of where the blank element can be used:
Forum posts
Blog posts
User comments
Product cards
Newspaper articles
<article>
</article>
you will find HTML pages with blank elements containing blank elements, and blank elements containing blank elements.
<section>
<article>
<article>
<section>
</section></article></article></section>
The blank element represents a container for introductory content or a set of navigational links.
<header>
</header>
A blank element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship information
<header>
</header>
You can have several <header> elements in one HTML document. However, <header> cannot be placed within a blank, blank or another blank element.
<footer>, <address> or <header>
</header></address></footer>
The blank element defines a footer for a document or section.
<footer>
</footer>
A blank element typically contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents
<footer>
</footer>
You can have several <footer> elements in blank.
one document
The blank element defines a set of navigation links.
<nav>
</nav>
The blank element is intended only for major blocks of navigation links.
<nav>
</nav>
The blank element defines some content aside from the content it is placed in (like a sidebar).
<aside>
</aside>
The <aside> content should be blank related to the surrounding content.
indirectly
The blank tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figure>
</figure>
The blank tag defines a caption for a <figure> element.</figure>
<figcaption>
</figcaption>
The <figcaption> element can be placed as the first or as the last child of a blank element.
<figure>
</figure>
The blank element defines the actual image/illustration.
<img></img>
According to the W3C: “A blank allows data to be shared and reused across applications, enterprises, and communities.”
semantic Web
Defines independent, self-contained content
<article>
</article>
Defines content aside from the page content
<aside>
</aside>
Defines additional details that the user can view or hide
<details>
</details>
Defines a caption for a <figure> element</figure>
<figcaption>
</figcaption>
Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figure>
</figure>
Defines a footer for a document or section
<footer>
</footer>
Specifies a header for a document or section
<header>
</header>
Specifies the main content of a document
<main>
</main>
Defines marked/highlighted text
<mark></mark>
Defines navigation links
<nav>
</nav>
Defines a section in a document
<section>
</section>
Defines a visible heading for a <details> element</details>
<summary>
</summary>
Defines a date/time
<time>
</time>
