Chapter 5 - Marking Up Text Flashcards
semantically
in a way that most accurately describes the content’s meaning
<p>...</p>
paragraph element
block
displayed on new lines with a bit of space between them by default
phrasing content
text, images, and other inline elements
naked text (anonymous text)
text that is not contained within tags
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
heading elements (limit of six)
heading
browser uses headings to create a document outline for the page
paragraph
may contain text, inline elements, images, but may not contain headings, lists, sectioning elements, or any elements that display as blocks by default
document outline
an outline of your HTML document, used for accessibility features and structure
<hr></hr>
a horizontal rule
unordered list
collection of items that appear in no particular order
ordered list
list in which the sequence of the items is important
description list
list that consists of name and value pairs, including but not limited to term and definitions
<ul>...</ul>
unordered list
<li>...</li>
list item within an list
<ol>...</ol>
ordered list
<dl>...</dl>
description list
<dt>...</dt>
a name, such as a term or label
<dd>...</dd>
a value, such as a description or definition
<blockquote>...</blockquote>
a lengthy, block-level quotation
<pre>...</pre>
preformatted text that displays exactly as typed, including all carriage returns and multiple character spaces
<figure>...</figure>
related image or resource
<figcaption>...</figcaption>
text description of a figure
<main>...</main>
primary content area of a page or app
<header>...</header>
introductory material for page, section, or article
<footer>...</footer>
footer for page, section, or article
<section>...</section>
thematic group of content
<article>...</article>
self-contained, reusable composition
<aside>...</aside>
tangentially related material
<nav>...</nav>
primary navigation links
<address>...</address>
contact information
text-level semantic elements (inline elements)
elements that display in the flow of text by default and do not cause any line breaks
a
<abbr>…</abbr>
abbreviation or acronym
<b>…</b>
keywords or visually emphasized text (bold)
bdi
bdo
<br></br>
line break
<cite>…</cite>
citation
<code>...</code>
code
<data>...</data>
machine-readable data
<del>…</del>
deleted text
<dfn>…</dfn>
defining term
<em>…</em>
stressed emphasis (italics)
<i>…</i>
alternative voice (italic)
<ins>…</ins>
inserted text
<kbd>...</kbd>
user-entered keyboard strokes
<mark>...</mark>
contextually relevant text
<q>…</q>
short inline quotation
ruby, rt, rp
<s>...</s>
incorrect text (strike-through)
<samp>...</samp>
program sample
<small>…</small>
legal text; small print (smaller type size)
<span>…</span>
generic inline element
<strong>…</strong>
strong importance (bold)
…
subscript
…
superscript
<time>...</time>
time data
<u>...</u>
annotated text (underline)
<var>...</var>
variable
<wbr></wbr>
word break
monospace
constant-width rendering of text
<div>...</div>
generic block-level element
global attributes
can be used with all HTML elements
thirteen global attributes
accesskey, class, contenteditable, dir, draggable, hidden, id, lang, spellcheck, style, tabindex, title, translate
structured data
allows content to be machine-readable, helps search engines provide smarter user-friendly results, and can provide a better user experience
vocabulary
a collection of the standardized terms assigned to “things”
microformats
vocabulary for defining people, organizations, events, products, and more
microdata
a WHATWG HTML standard that uses microdata-specific attributes to define objects and their properties (itemscope, itemtype, itemprop, itemid, itemref)
Web Hypertext Application Technology Working Group (WHATWG)
working group
RDFa and RDFa Lite (Resource Description Framework in Attributes)
uses specified attrbutes to enhance HTML content (vocab, typeof, property, resource, prefix)
JavaScript Object Notation to serialize Linked Data (JSON-LD)
puts the object types and their properties in a script removed from the HTML markup
Accessible Rich Internet Applications (ARIA)
a standardized set of attributes for making pages easier to navigate and interactive features easier to use; created and maintained by a Working Group of the Web Accessibility Initiative (WAI); aka WAI-ARIA; defines roles, states, and properties
roles
describe an elements function or purpose in the context of the document (alert, button, dialog, slider, menubar, etc)
property
value of the attribute is more likely to be stable
state
have values that are more likely to be changed as the user interacts with the element
escaped
instead of typing in the character itself, you represent it by its numeric or named character entity reference
character entity reference
begin with an & (ampersand) and end with a ; (semicolon), used in place of a the real character because it is one that is used in HTML markup
named entity
using a predefined abbreviated name for the character
numeric entity
using an assigned numeric value that corresponds to its position in a coded character set
Add the markup to insert a thematic break between these paragraphs:
<p>People who know me know that I love to cook.</p>
<p>I've created this site to share some of my favorite recipes.</p>
<p>People who know me know that I love to cook.</p>
<hr></hr>
<p>I've created this site to share some of my favorite recipes.</p>
What’s the difference between a blockquote and a q element?
A blockquote is a block-level element used for long quotations or quoted material that may consist of other block elements. The q (quote) element is for short quotations that go in the flow of text and do not cause line breaks.
Which element displays whitespace exactly as it is typed into the source document?
The pre element.
What is the difference between a ul and an ol element?
The ul element is an unordered list element. It is used for lists that don’t need to appear in a particular sequence. they display with bullets by default. The ol element is an ordered list in which sequence matters. The browser automatically inserts numbers for ordered lists.
How do you remove the bullets from an unordered list? (Be general, not specific.)
Use a style sheet to remove bullets from an unordered list.
What element would you use to mark up “W3C” and provide its full name (World Wide Web Consortium)? Can you write out the complete markup?
<abbr>W3C</abbr>
What is the difference between dl and dt?
dl is the element used to identify an entire description list. The dt element is used to identify just one term within that list.
What is the difference between id and class?
The id attribute is used to identify a unique element in a document, and the name in its value may appear only once in a document. class is used to classify multiple elements into conceptual groups.
What is the difference between an article and a section?
An article element is intended for a self-contained body of content that would be appropriate for syndication or might appear in a different context. A section element divides content into thematically related chunks.
