IES: HTML-recog dk7 Flashcards
1
Q
- Element that allows us to add a machine-readable translation of a given content.
- Two attributes: value and type.
Value attribute specifies the machine-readable value of the content
Type attribute indicates the type of the value, such as a date, a currency, or a rating. - The content of the element is the human-readable value that is displayed in the browser.
- Useful for several reasons:
Promotes accessibility through assistive technologies.
Promotes web page semantic and structure for data processors, such as search engines, web crawlers, or data analysis tools.
Promotes web page consistency and maintenance for web developers, by offering standardized storage and manipulation of data values. - Example:
If you have a product with a price, you can use the element to store the price value.
<body>
<h1>Product Catalog</h1>
<div class="product-container">
<div class="product">
<h2>Smartphone</h2>
<p>Price: <\_\_\_\_ value="799">$799</\_\_\_\_></p>
<button id="showPrice">Show Price in Euro</button>
</div>
<div class="product">
<h2>Tablet</h2>
<p>Price: <\_\_\_\_\_ value="899">$899</\_\_\_\_\_></p>
<button id="showPrice">Show Price in Euro</button>
</div>
</div>
<script src="script.js"></script>
</body>
A
<data>
2
Q
- represents a specific period in time (time on a 24hr clock; a precise Gregorian calendar date; a valid time duration).
- It may include the datetime attribute to translate dates into machine-readable format, (allowing for better search engine results or custom features such as reminders).
- Example coding (parentheses within the coding are flashcard inserts only- should not be there):
~~~
<p>
The concert starts at <\_\_\_\_\_ (datetime="20:00")>8pm</\_\_\_\_\_> and you'll be able to enjoy the band for at least
<\_\_\_\_\_\_ (datetime="PT2H30M")>2h 30m</\_\_\_\_\_\_>.
</p>
~~~
A
<time>
3
Q
- Specifies date and time of inserted and deleted text.
- When used together with the
<time>element, it represents a date and/or time of the<time>element. - Attribute Values:
( YYYY-MM-DDThh:mm:ssTZD (*valid format for _____ value)) :
YYYY = year;
MM = month;
DD = day;
T = required separator;
hh = hour (Zulu time);
mm = minute;
ss = second;
T = required separator;
ZD = Time Zone Designator (Z for Zulu (a.k.a. Greenwich Mean Time; CST=Central Standard Time; etc.)
A
datetime attribute
4
Q
- The abbreviation element is used along with a title attribute to associate a full-text explanation with an abbreviation or acronym.
- Full-text is only seen by website visitor using hovering cursor
- Browsers, search engines, and assistive technologies do see and use full-text.
A
<abbr>
5
Q
- The Citation element is used to reference a cited creative work,
- must include the title of that work.
- May be in an abbreviated form according to context-appropriate conventions
A
<cite>
6
Q
- The “definition element” specifies a term that is going to be defined within the content.
- Nearest parent must contain the definition/explanation for the term.
- The term inside can be any of the following:
1. Just the content: the term and definition alone.<p><\_\_\_\_>HTML</\_\_\_\_> is the standard markup language for creating web pages.</p>
2. Or, with the title attribute added:<p><\_\_\_\_ title="HyperText Markup Language">HTML</dfn> is the standard markup language for creating web pages.</p>
3. Or, with an<abbr>tag inside the <____> element:<p><\_\_\_\_><abbr title="HyperText Markup Language">HTML</abbr></\_\_\_\_> is the standard markup language for creating web pages.</p>
4. Or, with the id attribute added. Then, whenever a term is used, it can refer back to the definition with an<a>tag:<p><\_\_\_\_id="html-def">HTML</\_\_\_\_> is the standard markup language for creating web pages.</p>
A
<dfn>
7
Q
- a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.
- content displayed in the browser’s default monospace font.
- This tag is not deprecated.
A
<kbd>
8
Q
- Defines a scalar measurement within a known range / fractional value. (a.k.a. a gauge).
- Must include a value attribute;
- Should not be used to indicate progress: use
<progress>for this purpose. - Should include alternate text describing the state of the gauge (for accessibility practices, add
<label>). - may include min or max attributes to define the range (default range being 0-1, assumed)
- low or high attributes effectively create a three-level sub-optimal range
A
<meter>
9
Q
- specifies a synopsis, caption, or legend for a
<details>’s disclosure box. - toggles the state of the parent
<details>open and closed.
A
<summary>
10
Q
- used to specify extra information about the element.
- Hovering cursor reveals the information -most often as a tooltip text
A
title attribute
11
Q
- Returns the key that was pressed when the event occured.
- This property is read-only.
- The return value can be:
A single character (“a”, “W”, “4”, “+”, “$”)
Multiple characters (“F1”, “Enter”, “HOME”, “CAPS LOCK”)
A
key
12
Q
- Stands for Bi-Directional Isolation: Tells the browser’s bidirectional algorithm to treat the text it contains in isolation from its surrounding text.
- It’s particularly useful when a website dynamically inserts some text and doesn’t know the directionality of that text (Without, right-to-left languages are read back-to-front).
A
<bdi>
13
Q
- specifies additional information that the user can open and close on demand.
- By default, the widget is closed. When open, it expands, and displays the content within.
A
<details>
14
Q
- Bidirectional Text Override element
- Overrides the current directionality of text, so that the text within is rendered in a different direction (Without the bi-directional override, right-to-left languages are read back-to-front).
A
<bdo>
15
Q
- Attribute that specifies the text direction of the element’s content
- It is essential to support languages that use right-to-left scripts such as Adlam, Arabic, Hebrew, N’Ko, Syriac, and Thaana.
- Possible attribute values:
ltr - (default) Left-to-right text direction;
rtl - Right-to-left text direction;
auto - Let the browser figure out the text direction, based on the content (only recommended if the text direction is unknown)
A
dir
