HTML - Crash Quiz

Réussis tes devoirs et examens dès maintenant avec Quizwiz!

Setting contenteditable="true" on any element makes it .... ?

- editable - focusable - part of the tab order. The focus behavior is similar to setting tabindex="0", but not the same

The "disabled" attribute does not apply to normally inert elements that are made focusable via __________ or _____________. It also doesn't apply to the <form> element itself. To disable these, the global inert attribute can be used.

- tabindex - contenteditable

Define the <bdi> element nd its purpose?

- tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text - useful when a website dynamically inserts some text and doesn't know the directionality of the text being inserted.

Write an empty comments in HTML

Links are very important! — To add a link, we need to use what element?

<a> anchor element

When documenting code examples, use a nested _________ inside a _________ element.

<code> - the text content is displayed in monospace font. <pre> - represents preformatted text

New image formats like WebP and AVIF can maintain a low file size and high quality at the same time. These formats now have relatively broad browser support but little "historical depth". What element lets us continue catering to older browsers and supply MIME types inside type attributes so the browser can immediately reject unsupported file types

<picture> element Example: <picture> <source type="image/svg+xml" srcset="pyramid.svg" /> <source type="image/webp" srcset="pyramid.webp" /> <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles" /> </picture>

What makes HTML so powerful?

Attributes Attributes define the behavior, linkages, and functionality of elements.

Why are many <meta> features not used anymore?

Bad actors and spammers would exploit the features and bias their results in Search Engines.

In HTML, all attributes except require values except two? What are they?

Boolean Some Enumerated

Over 30 elements don't have an associated DOM interface other than

HTMLElement

Use Superscript + Subscript HTML to write: a. Chemical Formula for Water b. write a random Quadratic Equation

a. <p>H<sub>2</sub>O</p> b. <p>x<sup>2</sup> + x + c</p>

Just about all websites you'll use in the modern day will employ _____ to make them look cool, and _________ to power interactive functionality.

a. CSS b. JS

when making interactive elements inert, there are also HTML attributes that can remove interactive elements from the tabbing sequence. Including? :

a. negative "tabindex" to focusable elements b. the "disabled" attribute to supporting form controls c. adding the global "inert" attribute to a container all makes elements un-tabbable These three attributes are NOT interchangeable.

The script element should go along with 2 attributes concerning JS. What are they?

src = link to JS defer = load JS after HTML

What are Vector Images

- images defined using algorithms - contains shape and path render definitions ex: .svg - SVG

What are the non-semantic wrappers used often?

<div> <span> You should use these preferably with a suitable class attribute, to provide some kind of label for them so they can be easily targeted.

The <link> element should go along with 2 attributes concerning CSS. What are they?

rel = relationship href = link to stylesheet ex: <link rel="stylesheet" href="my-css-file.css" />

Nested contenteditable elements are focusable but not .... ?

- tabbable

Describe <span> in detail.

Inline non-semantic element. you should only use if you can't think of a better semantic text element to wrap your content.

every node in the document tree is an object that can be manipulated with .... ?

JavaScript

What is a Shadow Tree?

The DOM tree inside the shadow DOM

Define and give an example of a pragma directive

The http-equiv attribute has as its value a pragma directive. These directives describe how the page should be parsed. Supported http-equiv values enable setting directives when you are unable to set HTTP headers directly. <meta http-equiv="content-security-policy" content="default-src https:" />

What is the ping attribute?

The ping attribute, if present, includes a space-separated list of secure URLs (which start with https) that should be notified, or pinged, if the user activates the hyperlink. The browser sends POST requests with the body PING to the URLs listed as the value of the ping attribute.

Define the rel attribute in relation to hyperlink element <a>

The rel attribute controls what kinds of links the link creates, defining the relationship between the current document and the resource linked to in the hyperlink. The attribute's value must be a space-separated list of the score of rel attribute values supported by the <a> tag. ex: <a rel="nofollow">

What's the back story for <i>, <b>, <u>? Why should they not be used today?

They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all and only affect presentation and not semantics such as accessibility, SEO, etc.

True of False: HTML is not complied into a different form before the browser parses it and shows the result. It is interpreted.

True

The name along with the value of the selected radio button are submitted with the form. Make sure each radio button has a relevant (and usually unique) what?

Value Note: The values of the non-selected radio buttons are not sent.

What are some modern image formats?

WebP AVIF

A good rule for web security is ...

You can never be too cautious. If you made it, double-check it anyway. If someone else made it, assume it's dangerous until proven otherwise.

What is a tag?

a marker used for creating elements

What is an element?

a set of tags used to define content within your webpage

What are container formats?

a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth. ex: MP4, MP3, WebM, etc.

The naming convention for HTML Element interfaces is: a. HTML b. Element or Group of Elements c. Element Note: - It's CamelCase - No Reason To Memorize - Also some collection interfaces - Just know a few for docs lookup lol Provide the name of: - Button Element Interface - Media Element Interface

a. HTMLButtonElement b. HTMLMediaElement

The style attribute enables ...

applying inline styles, which are styles applied to the single element on which the attribute is set.

Built-in constraint validation is only relevant to constraints set with HTML __________.

attributes

The ____________ attribute set on the close <button> ensures it receives focus when the dialog is opened.

autofocus

Describe <div> in detail.

block level non-semantic element. you should only use if you can't think of a better semantic block element to use.

Why should you always use the sandbox attribute for iframes?

can't cause any harm to the rest of the codebase (either accidental or malicious) Content that's not sandboxed may be able to execute JavaScript, submit forms, trigger popup windows, etc.

The <br>, <hr>, and <wbr> elements are all void elements, meaning they can't have any .... ?

child nodes - neither nested elements nor text.

A custom element's class object is written using the class syntax. Provide an example of a inline custom element class called "WordCount" that extends paragraph element.

class WordCount extends HTMLParagraphElement { constructor() { // Always call super first in constructor super(); // Element functionality written in here } }

There are a few common UI widgets that have no HTML equiv

comboboxes, menubars, tablists, and treegrids

What is Clickjacking?

common iframe attack where hackers embed an invisible iframe into your document and use it to capture users' interactions.

what the point of paragraph elements

containing paragraphs of text; you'll use these frequently when marking up regular text content.

Document Object Model (DOM)

data representation of the structure and content of the HTML document. As the browser parses HTML, it creates a JavaScript object for every element and section of text encountered. These objects are called nodes—element nodes and text nodes, respectively.

Add custom attributes to elements in the form of data-name and access these through the DOM using _______ on the element in question.

dataset[name] or getAttribute()

The content between the opening <a> and closing </a> is the link's .... ?

default accessible name and should inform the user of the link's destination or purpose.

To capture which button was used to submit a form, give the button a name. Buttons with no name or value don't what?

don't get sent with the form data on form submission.

An element with the contenteditable attribute set to true is?

editable, is focusable, and is added to the tab order as if tabindex="0" were set

What are void elements?

elements that have no content and closing tag. ex: <img src="..." alt="Test Img" />

What are attributes?

extra information about the element that you don't want to appear in the actual content. Some attributes have no value while some do Ex: <p class="Eat Shit" ... <p class="Eat Shit" style="color:red" ...

what are frames? where are they embedded?

frames are small parts of a website stored in individual HTML pages embedded in a master document called a frameset

What is the "art direction problem"

general problem whereby you want to serve different cropped images in a certain way, for various layouts

Changing the tabbing order with HTML or visual rendering order with CSS can .... ?

harm the user experience

What does this source element indicate? : <source src="videos/machines.mp4" type="video/mp4"; codecs=avc1.4d002a">

indicates that the MP4 encoding is Advanced Video Coding Main Profile Level 4.2.

With HTML attributes, it is possible to make ____________ elements inert and to make ____________ elements interactive.

interactive inert

define the super() method.

is used to access properties on an object literal or class's [[Prototype]], or invoke a superclass's constructor

Document Fragment

link to a specific part of an HTML document

what is a Shadow root

root node of the shadow tree

what does the <meta> attribute "content" do?

specifics the actual meta content

To make a nested "contenteditable" element tabbable, add "tabindex=0", which will add it to the .... ?

tabbable sequence focus order

What is a Shadow boundary?

the place where the shadow DOM ends, and the regular DOM begins

Always consider the user experience when writing HTML. Links should provide enough information about the linked resource so .... ?

the user knows what they are clicking on.

What's the purpose of aria-* states?

there are over 50 aria-* states and properties that can be used to ensure Accessibility.

Within the _______ attribute, you can include a _______ parameter, which specifies exactly how the resource is encoded.

type codec

What character encoding set enables you to use 2-4 byte encoding of all characters.

utf-8

Information Architecture

what pages you need, and how they should be arranged and link to one another for the best possible user experience.

what is "infrastructure TLD"?

.arpa a top-level domain used for Internet infrastructure purposes, especially reverse DNS lookup (i.e., find the domain name for a given IP address).

Because the open attribute is added and removed automatically as the user interacts with the control, it can be used in ___________ to style the element differently based on its state.

CSS

HTML stands for

Hypertext Markup Language

define the <legend> element

The <legend> HTML element represents a caption for the content of its parent <fieldset>.

URL Scheme

The scheme of a URL specifies the type of resource to be accessed, such as a Web page, an email server, a file server, etc. ex: <a href="mailto:[email protected]">Send email to nowhere</a>

True of False: HTML itself doesn't suffer from syntax errors because browsers parse it permissively, meaning that the page still displays even if there are syntax errors.

True

What is HTML used for?

a markup language that defines the structure of your webpage and content inside it.

What is a "video codec"

program used to process and compress video data into smaller sizes (encode/decode)

What is a shadow host?

regular DOM node that the shadow DOM is attached too

Why is HTML parsed permissively?

when the web was first created, it was decided that allowing people to get their content published was more important than making sure the syntax was absolutely correct.

You can attach a shadow root to any element using the Element.attachShadow() method. This takes as its parameter an options object that contains one option — mode — with a value of "open" or "closed" What do these values mean and do.

"open" — means that you can access the shadow DOM using JavaScript written in the main page context "closed" — means you won't be able to access the shadow DOM from the outside

what the purpose of the "subtitles" value for the kind attribute for <track> elements

"subtitles" along with the srclang attribute for dialogue transcription and translations <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />

How does the <Winodw> interface work?

- "document" property points to the DOM document loaded in that window - global variable "window", representing the window in which the script is running, is exposed to JavaScript code. - In a tabbed browser, each tab is represented by its own Window object; the global window seen by JavaScript code running within a given tab always represents the tab in which the code is running.

the boolean "disabled" attribute applies to:

- <button> - <input> - <optgroup> - <option> - <select> - <textarea> - <fieldset> - form-associated custom elements Note: When set on <optgroup> or <fieldset>, all the child form controls are disabled, except for the contents of the <fieldset>'s first <legend>.

Define the <Node> interface and it's purpose.

- Abstract Base Class - Many other DOM API objects inherit - there is no such thing as a plain Node object. - All objects that implement Node functionality are based on one of its subclasses. Most notable are: - Document - Element - DocumentFragment

Embedding technologies like <object>, and <embed>, were very useful at one time. Why did they fall out of fashion?

- Accessibility Issues - Security Issues - File Size Issues - etc.

What are some link Best Practices

- Accessibility to All Readers - Use CLEAR + SHORT link wording and signpost for non-html resources - Minimize same link text Good Examples: a. <p><a href="https://www.mozilla.org/firefox/"> Download Firefox </a></p> b. <p> <a href="https://www.example.com/large-report.pdf"> Download the sales report (PDF, 10MB) </a> </p> c. <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US" download="firefox-latest-64bit-installer.exe"> Download Latest Firefox for Windows (64-bit) (English, US) </a>

Why should you never point the "src" attribute of <img> to image hosted on someone else's website without permission? aka "hotlinking"

- Considered unethical - Image can change or leave at any point - Someone else is paying for bandwidth costs - Security Issues - Copyright Issues

The href attribute is used to create hyperlinks to locations such as?

- Current Page - Other Pages - Other Sites - Send an E-mail - Downloading Files - etc.

As the browser parses the content received, it builds multiple object models. Name the 3 important ones.

- DOM ( Documnet Object Model ) - CSSOM ( CSS Object Model ) - AOM ( Accessibility Object Model )

There are two main types of meta tags. What are they?

- Pragma directives - Named Meta types Both the "name" and "http-equiv" meta types must include the "content" attribute, which defines the content for the type of metadata listed.

Raster graphics are arguably better for complex precision images such as photos because?

- SVG can get complicated very quickly, meaning that file sizes can grow; complex SVGs can also take significant processing time in the browser. - SVG can be harder to create than raster images, depending on what kind of image you are trying to create.

SVG has some additional advantages, what are they?

- Text in vector images remains accessible (which also benefits your SEO). - SVGs lend themselves well to styling/scripting, because each component of the image is an element that can be styled via CSS or scripted via JavaScript.

what is MathML

- an XML-based language for describing mathematical notation

If a boolean attribute is present, it is always true. Boolean attributes include ...

- autofocus - inert - checked - disabled - required - reversed - allowfullscreen - default - loop - autoplay - controls - muted - readonly - multiple - selected

Focusable elements can also be focused with a mouse or pointer, by having the _____________ attribute set, or by script, such as with ________________ .

- autofocus - element.focus()

The ______________and __________ attributes, being global attributes, can be added to any element, making them focusable in the process

- contentedible - tabindex

Define the <details> element and its purpose.

- creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state - summary or label must be provided using the <summary> element

What is does the sizes attribute do? What is its purpose?

- defines a set of media conditions and indicates what image size would be the best to choose, when certain media conditions are true. Formatting: 1. A media condition = a possible state that the screen can be in. 2. A Space 3. Width of the slot the image will fill when the media condition is true 3a. For the slot width, rather than providing an absolute width (for example, 480px), you can alternatively provide a width relative to the viewport (for example, 50vw) Example: sizes="(max-width: 600px) 480px, 800px"

What is does the srcset attribute do? What is its purpose?

- defines the set of images we will allow the browser to choose between, and what size each image is. - Each set of image information is separated from the previous one by a comma. Formatting: 1. An image filename 2. A Space 3. Image's intrinsic width in pixels — is img real size Example: srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"

Define the <dfn> element and its purpose

- element is used to indicate the term being defined within the context of a definition phrase or sentence. - identify the term being defined within its surrounding content. - When defining a term that is not an abbreviation or acronym, use the definition - The ancestor <p>, the <dt>/<dd> pairing, or the nearest <section> ancestor of the <dfn> element, is considered to be the definition of the term.

What is a "tabindex"

- global attribute - allows developers to make HTML elements focusable - allow or prevent them from being sequentially focusable - determine their relative ordering for sequential focus navigation

What are Raster Images

- images defined using a grid of pixels - contains info showing exactly where + color each pixel is. ex: .bmp - Bitmap .png - PNG .jpeg - jpg .gif - GIF

Define the <EventTarget> interface and it's purpose.

- implemented by objects that can receive events and may have listeners for them. - any target of events implements the three methods associated with this interface: a. Element b. Document c. Window etc. Note: - Many event targets also support setting event handlers via onevent properties and attributes. - Other objects can be targets too: a. XMLHttpRequest b. AudioNode c. AudioContext

Define <del> element and its purpose.

- indicate text that has been removed, or "deleted" - Optionally, include the <cite> set to the resource that explains the change and the datetime attribute with the date or date and time in machine-readable date and time format.

Define the <samp> element and its purpose.

- is used to enclose inline text which represents sample (or quoted) output from a computer program - Its contents are typically rendered using the browser's default monospaced font

Define the <data> element and it's purpose.

- links a given piece of content with a machine-readable translation - the element's value attribute provides the machine-readable translation of the content of the element - If the <data> content is time- or date-related, the <time> element, which represents a specific period in time must be used instead

The browser provides numerous APIs providing natively supported .... ?

- methods - events - property querying - updating

Define <bdo> element and its purpose.

- overrides the current directionality of text, rendering text in a different direction.

Define <s> element and its purpose.

- renders text with a strikethrough, or a line through it - Use the <s> element to represent things that are no longer relevant or no longer accurate. - However, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate.

Define <ins> element and its purpose.

- represents a range of text that has been added to a document. - You can use the <del> element to similarly represent a range of text that has been deleted from the document.

Define the <kbd> element and its purpose.

- represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device - By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard. - <samp> and <kbd> may be used to represent various forms of input or output based on visual cues

Define the <time> element and its purpose.

- represents a specific period in time. - 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.

Define the <Window> interface and it's purpose.

- represents a window containing a DOM document - Home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window. - The Window interface is a suitable place to include these items that need to be globally available.

Define <abbr> element and its purpose.

- represents an abbreviation or acronym. - Only on this first occurrence, when the abbreviation or acronym is being defined, is <abbr> needed

Define the <Document> interface and it's purpose.

- represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree. - DOM tree includes elements such as <body> and <table>, among many others. It provides functionality globally to the document via properties, methods, etc. - Depending on the document's type (e.g. HTML, XML, SVG, ...), a larger API is available: a. HTML Docs w/ "text/html" == "HTMLDocument" interface b. XML Doc == "XMLDocument" interface c. SVG Doc == "XMLDocument" interface

Define the <var> element and its purpose.

- represents the name of a variable in a mathematical expression or a programming context. - It's typically presented using an italicized version of the current typeface, although that behavior is browser-dependent.

There are some CSS selectors that match form controls based on the presence of HTML attributes including: - required = ________ - checked = ________ - disabled = ________ - contenteditable = ________ - readonly = ________

- required = :required, :optional - checked = :default - disabled = :enabled, :disabled - contenteditable = :read-write - readonly = :read-only :valid, :invalid, :in-range, :out-of-range, etc.

What are some of the benefits from vector graphics

- small file sizes - highly scalable - don't pixelate when zoomed in or blown up to a large size.

Define the <summary> element and its purpose.

- specifies a summary, caption, or legend for a <details> element's disclosure box. - Clicking the <summary> element toggles the state of the parent <details> element open and closed.

In some <head> elements, you'll find the line <meta name="viewport" content="width=device-width" >. Whats the purpose of this?

- this forces mobile browsers to adopt their real viewport width for loading web pages - some mobile browsers lie about their viewport width, and instead load pages at a larger viewport width then shrink the loaded page down, which is not very helpful for responsive images or design

The boolean "disabled" attribute makes the form controls on which it is applied and their descendants .... ?

- unfocusable - No click events - No submission Note: disabled is not a global attribute

Define <cite> element and its purpose

- used to mark the titles of books, articles, or other creative work, or an abbreviated reference or citation metadata for such, like a book's ISBN number

Define the <ruby>, <rp>, and <rt> elements and their purpose.

- usually used for showing the pronunciation of East Asian characters. - <ruby> = represents small annotations that are rendered above, below, or next to base text - <rp> = used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the <ruby> element - One <rp> element should enclose each of the opening and closing parentheses that wrap the <rt> element that contains the annotation's text. - <rt> = specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. - must always be contained within a <ruby> element.

The apperance of subtitles can be targeted with _________/___________().

::cue / ::cue()

The same elements that support "disabled" are also targetable with these psuedoclasses:

:disabled :enabled Elements that are disabled with the disabled attribute are generally styled as light gray via the user-agent stylesheet

Applied CSS is updated continuously based on the current state of the UI. For example, when you include input types with constraints, such as email, number, url and date types, if the value is non-null (not empty) and the current value is not a valid email, number, url, date or time, the _______ CSS pseudo-class will be a match.

:invalid This constant updating is different from built-in HTML constraint validation, which only occurs when the user attempts to submit the form.

There are several features that should be considered essential for any and every web page. What are they?

<!DOCTYPE html> <html> + lang <head> + charset + title + viewport settings More Head Meta ( Optional ) : CSS Links Scripts Canonical URL Alternative Site Versions

Link to this specific id in the current document <h2 id="Mailing_address">Mailing address</h2>

<a href="#Mailing_address">mailing address</a>

Write out an anchor element with a hypertext reference to google.com using the "https" protocol Inner Content is "Gewgle"

<a href="https://google.com" >Gewgle</a>

Give some examples of anchor links: - Absolute URL - Link Fragment Identifier to current page "teacher" - Absolute URL to Section with id "teacher" - E-mail to "[email protected]" - Call "+1 800.555.1212"

HTML has an element for making up contact details - What is it?

<address> <address> element should only be used to provide contact information for the document contained with the nearest <article> or <body> element.

While <video> can be used to embed an audio file, the _______ element is preferable for embedding sound files.

<audio>

When you want lined breaks, such as when writing poetry or a physical address, Use the self-closing line break element .... ?

<br>

HTML has a element to create a line break in a paragraph. What is it? Why is it useful?

<br> HTML ignores most whitespace, with <br> it we render said spaces

what's the ranking of table children in order

<caption> element <colgroup> elements <thead> elements <tbody> elements <tfoot> elements

Name some elements for creating simple shapes and animations in SVG.

<circle>: SVG basic shape, used to draw circles based on a center point and a radius <rect>: basic SVG shape that draws rectangles, defined by their position, width, and height. <feColorMatrix>: transform colors using a transformation matrix <animate>: animate parts of your vector graphic <mask>: apply a mask over the top of your image

There are a number of elements available for marking up computer code using HTML, name some and their purpose.

<code>: For marking up generic pieces of computer code. <pre>: For retaining whitespace (generally code blocks) <var>: For specifically marking up variable names. <kdb>: For marking up keyboard (and other types of) input entered into the computer. <samp>: For marking up the output of a computer program.

In HTML forms, lists of <option> elements make up the content of .... ?

<datalist>, <select>, and <optgroup> within a <select>

You can now create functioning, albeit less than attractive, disclosure widgets using only semantic HTML. The ___________and _____________ elements are all you need

The exception to the "don't use autofocus" recommendation is including the autofocus attribute within .... ?

<dialog> elements. When a dialog is opened, the browser will automatically focus on the first focusable interactive element within the <dialog>, meaning "autofocus" is not necessary.

Nesting <fieldset> inside another <fieldset> is standard practice. For example, if a form is a survey of many questions divided into groups of related questions, the "favorite student" <fieldset> may be nested in another <fieldset> labeled as "Your favorites" Provide a code example without the content, only labeling one field inside another each with their own legend + unordered list.

<fieldset> <legend>Your favorites:</legend> <ul start="6"> <li> <fieldset> <legend>Who is your favorite student?</legend> <ul> <li>

Name some navigation semantics and their functionality for accessibility

HTML has a element to create a horizontal rule in a document. What is it? Why is it useful?

<hr> denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line.

You can set the language of your page. This can be done by adding the lang attribute to the opening HTML tag Provide an example and set the language to English-US.

Finally other ways of embedding content such as <iframe>, <canvas>, <video>, etc. Give a brief synopsis of: <iframe> <canvas> <video>

Boolean values can either be omitted, set to an empty string, or be the name of the attribute; but the value doesn't have to actually be set to the string true. All values, including true, false, and 😀, while invalid, will resolve to true. Provide 3 examples of an input element with the required attribute.

write an input element with type text and input disabled. a. example without quotes b. example with quotes

There are ____ different types of input. Also provide an example of text input.

<label for="name">Name (4 to 8 characters):</label> <input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">

Labels provide form controls with accessible names. Buttons get their accessible name from their content or value. All the other form controls require an associated _______.

<label> If there is no associated label, the browser will still render your form controls, but users will not know what information is expected.

To provide implicit labels, include the form control between the opening and closing ______tags

<label> This is equally accessible from both a screen reader and pointer device perspective, but doesn't provide the styling hook like the explicit label. <label>Your name <input type="text" name="name"></label>

Generally, the ______ comes before the form control except in the case of radio buttons and checkboxes. This isn't required. It's just the common UX pattern.

Write an example of you specifying an HTML document's character encoding to utf-8.

If you don't want your site to be indexed by search engines, you can let them know. Provide an example using meta tags

Using the role attribute, you can give any element a role, including a different role than the tag implies. Give a paragraph element the role of a button semantically.

<p role="button">Click Me</p> While adding role="button" to an element will inform screen readers that the element is a button, it doesn't change the appearance or functionality of the element.

the use of ID and accessibility and usability is not limited to labels. provided provide an example of converting a section element into a region landmark by referencing the ID of an H2 element as the value of the sections Aria label

<section Id="about" aria-labelledbey="about_heading"> <H2 id="about-heading"> What you'll learn </H2>

write a <source> element which holds a WebM video file that contains VP8 video and vorbis audio.

To define a slot's content we include an HTML structure inside the element with a slot attribute whose value is equal to the name of the slot we want it to fill. Assign the span to the slot in this example: <slot name="my-text">My default text</slot>  <p> <span ... >Lets Go!</span> </p>

<span slot="my-text">Let's have some different text!</span>

The "open" attribute is a boolean attribute. If present, no matter the value or lack thereof, it indicates that all the <details> contents are shown to the user. If the open attribute is not present, only the contents of the ___________ are shown

Just name table elements + children, Go!

<table> - wraps table content <thead> - table headers <tbody> - table bodies <tfoot> - table footers <tr> - table rows <th> - table header <td> - table data <caption> - table caption <colgroup> - column groups <col> - col elements

The content of tables is made up of up to three sections, what are they?

<thead> - table headers <tbofy> - table bodies <tfoot> - table footers All are optional, with zero or more of each being supported. These elements don't help or hinder the accessibility of the table, but they are useful in terms of usability.

HTML also provides an element for marking up times and dates in a machine-readable format, what is it?

<time> ex: <time datetime="2016-01-20">20 January 2016</time>

What makes <title> different <h1>

<title> element is metadata that represents the title of the overall HTML doc <title> contents are also used in search results and bookmarks

Provide an example of <track> elements, a. one for eng subs b. one for fr subs

Between the opening and required closing tags of both audio and video, include one or more _________ elements to specify timed text tracks.

<track>

Provide a code example of a parent <video> element with: - 3 media file options ( mp4 + ogg + webm ) - 2 subs ( eng + fr ) - Link to video via Youtube w/ <p> element src for videos: "videos/machines.ext" src for subtitles: "vtt/subtitles-langabbv-ext"

<video controls poster="images/machine.jpg"> <source src="videos/machines.webm" type="video/webm"> <source src="videos/machines.mp4" type="video/mp4"> <source src="videos/machines.ogv" type="video/ogg"> <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default /> <track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" /> <p>Watch <a href="https://youtube.com/link">video on Youtube</a> </video>

The _______ and _______ elements can be used to embed media players directly with the src attribute or can be used as the container element for a series of <source> elements, each providing a src file suggestion

HTML also has an element that allows for breaking words. It provides a suggestion to the browser that if a word might overflow its container, this is a spot where the browser may optionally break the line. What is it?

<wbr>

What is a top level domain? What is the TLD of: "dev.mozilla.org"

A TLD (top-level domain) is the most generic domain in the Internet's hierarchical DNS (domain name system). A TLD is the final component of a domain name "org" in dev.mozilla.org

What is a MIME type? What's it's purpose? How is it structured?

A media type (also known as a Multipurpose Internet Mail Extensions or MIME type) indicates the nature and format of a document, file, or assortment of bytes. Browsers use the MIME type, not the file extension, to determine how to process a URL, so it's important that web servers send the correct MIME type in the response's Content-Type header. Structure: type/subtype;parameter=value

what is a Shadow DOM?

API that provides encapsulation for web components. Being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element.

Define Absolute URLs vs Relative URLs

Absolute URLs include a protocol, in this case https://, and a domain name. When the protocol is written simply as //, it is an implicit protocol and means "use the same protocol as is currently being used." Relative URLs do not include a protocol or domain name. They are "relative" to the current file. In order to link from this page to the attributes lesson, a relative URL is used <a href="../attributes/">Attributes</a>.

What is the use of the <head> tag?

Acts as a container for data you want to include on the HTML that isn't content you show on user page. ex: CSS, Metadata, Description, Keywords, etc.

There are two types of custom elements; What are they?

Autonomous custom elements — standalone, they don't inherit from standard HTML elements. You use these on a page by literally writing them out as an HTML element. Example: <popup-info> document.createElement("popup-info") Customized built-in elements — inherit from basic HTML elements. To create one of these, you have to specify which element they extend and they are used by writing out the basic element but specifying the name of the custom element in the is attribute (or property). Example: <p is="word-count"> document.createElement("p", { is: "word-count" })

If list numbering is purely presentational, use ____ , If the numbering is important semantically, use ________

CSS attributes ( reverse, start, etc. )

Whats the accessibility between a "caption" and "alt" text.

Captions benefit even people who can't read the image alt text provides the same functionality as an absent image. Therefore, captions and alt text shouldn't just say the same thing, because they both appear when the image is gone.

What HTML Entities?

Character entities are used to display reserved characters in HTML. &entity_name or &#entity_number To display a less than sign (<) we must write: < or < Browsers may not support all entity names, but the support for entity numbers is good.

How do you write a custom protocol handler?

Chrome 13 includes "navigator.registerProtocolHandler". This API allows web apps to register themselves as possible handlers for particular protocols Register a protocol scheme like: navigator.registerProtocolHandler( 'web+mystuff', 'http://example.com/rph?q=%s', 'My App'); The first parameter is the protocol The second is the URL pattern of the application that should handle this scheme. The pattern should include a '%s' as a placeholder for data and it must must be on the same origin as the app attempting to register the protocol. <a href="web+mystuff:some+data">Open in "My App"</a> Clicking that link makes a GET request to http://example.com/rph?q=web%2Bmystuff%3A:some%20data. Thus, you have to parse q parameter and manually strip out data from the protocol.

The controller of custom elements on a web document is the?

CustomElementRegistry Object this object allows you to register a custom element on the page, return information on what custom elements are registered, etc.

To register a custom element on the page, you use the?

CustomElementRegistry.define() method

Describe Data URLs, and how to write them with this string "Hello World!"

Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. The mediatype is a MIME type string, such as 'image/jpeg' for a JPEG image file. If the data contains characters defined in RFC 3986 as reserved characters, or contains space characters, newline characters, or other non-printing characters, those characters must be percent-encoded data:[<mediatype>][;base64],<data> data:,Hello%2C%20World%21 or data:text/plain;base64,SGVsbG8sIFdvcmxkIQ== which is Hello, World!

what is metadata? what is the official way of adding metadata?

Data that describes data in the document that's not displayed <meta />

What's the benefit of including data values in the HTML rather than a manifest file?

Defining it in the HTML, ensures that the data will be found immediately before rendering, which may be faster on first load than waiting for the manifest.

What are the 2 MIME types:

Discrete Types - types which represent a single file or medium, such as a single text or music file, or a single video. Discrete Types: - Application: Any kind of binary data that doesn't fall explicitly into one of the other types application/pdf application/octet-stream - Audio: Audio or music data audio/mpeg audio/vorbis - Example: Reserved for use in examples audio/example - Font: Font/typeface data font/woff font/ttf font/otf - Image image/jpeg image/png image/svg+xml - Model model/3mf model/vrml - Text text/plain text/csv text/html - Video video/mp4 Multipart Types - represents a document that's comprised of multiple component parts, each of which may have its own individual MIME type multipart/form-data multipart/byteranges message/rfc822 message/partial

What are the dangers of <div>?

Divs are so convenient to use that it's easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Try to reduce their usage to the minimum otherwise you'll have a hard time updating and maintaining your documents.

Hidden content in the collapsed state is searchable in some browsers but not others, even though the collapsed content is not part of the DOM. If you search in ________ or _______, the details containing a search term will expand to display the occurrence. This behavior is not replicated in Firefox or Safari.

Edge Chrome

The base interface for all elements is aptly named

Element

The __________ interface provides us with EventListeners and is inherited by Node and Window interfaces.

EventTarget

Define an elements anatomy

Ex: - Opening Tag + Attributes - Content - Closing Tag <p class="Eat Shit">Hello World</p>

_____________ is included between the opening and closing tags If the user agent doesn't support <video> or <audio>

Fallback content

The first influx of online videos and audio were made possible by proprietary plugin-based technologies like?

Flash and Sliverlight Both of these had security and accessibility issues, and are now obsolete. In favor of HTML <video> and <audio> elements and the availability of JavaScript APIs

What is the <footer> element?

Footers are often where you will find contact information, wrapped in <address>, the contact address element. <footer> <p>©2022 Machine Learning Workshop, LLC. All rights reserved.</p> <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address></footer>

What is the "skip to content" link

For improved usability and accessibility, it's important to let users bypass the blocks of content that are repeated on every page. The skip link is included so when a keyboard user hits tab on load, they can quickly skip to the main content of the site—avoiding having to tab through extensive linkages

The method attribute defines the HTTP protocol of the request, define the possible protocols along with

GET - the form data is sent as a parameter string of name=value pairs, appended to the action's URL. POST - data is appended to the body of the HTTP request. When sending secure data, such as passwords and credit card information, always use POST. DIALOG - If a <form method="dialog"> is within a <dialog>, submitting the form will close the dialog; there is a submit event though the data is neither cleared nor submitted without JavaScript

There is an interface to define the functionality of every HTML element. What is it?

HTML DOM API

The Web Component standard is made up of three parts

HTML templates Custom Elements Shadow DOM Combined, they enable building customized, self-contained (encapsulated), reusable elements that can be seamlessly integrated into existing applications,

what inherits from Element and all HTML element-specific interfaces inherit from it

HTMLElement

The attributes of the <form> element set the .... ?

HTTP method by which the form is submitted and the URL that processes the form submission. Yes, forms can be submitted, processed, and a new page can be loaded without any JavaScript. The <form> element is that powerful.

What are all the basic sections of a document

Header - Usually a big strip across Nav - Links to the site's main sections Main - A big area in the center that contains most of the unique content of a given webpage Sidebar - Some peripheral info, links, quotes, ads, etc. Footer - A strip across the bottom of the page that generally contains fine print, copyright notices, or contact info

what purpose does the global attribute "ID" have in HTML?

ID is used to define a unique identifier for an element. it serves many purposes, including: - Target of a link fragment identifier - identify an element for scripting - associate of form element with this label - providing a label or description for assistive technologies - targeting styles within CSS

The <nav> element has different semantics depending on where it is nested. What does it become when section nested? What about site heading nested?

If it was section nested, it would be internal navigation for that section only when nested in site heading, it is the main navigation for the site.

What happens if nested elements are overlapped?

If they overlap, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. So don't do it! Ex: <p>My cat is <strong>very grumpy.</p></strong>

Describe <img> in detail. What is it? Why is it useful?

In order to put a simple image on a web page, we use the <img> element. It is a void element (meaning, it cannot have any child content and cannot have an end tag) that requires two attributes to be useful: src and alt. src = attribute containing a URL to image to embed alt = attribute containing text description of the image Search engines read image filenames and count them towards SEO.

Define and give an example of named meta tags

Include the name attribute, with the attribute value being the name of the metadata. As with pragma directives, the content attribute is required. ex: name description theme-color etc. <meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />

what are inline elements and how do they work?

Inline elements are contained within block-level elements, and surround only small parts of the document's content. An inline element will not cause a new line to appear in the document ex: text, link, etc.

Who is IANA

Internet Assigned Numbers Authority subsidiary of ICANN charged with recording and/or assigning domain names, IP addresses, and other names and numbers used by Internet protocols.

Who is ICANN

Internet Corporation for Assigned Names and Numbers designates organizations to manage each TLD. Depending on how strict an administrating organization might be, TLD often serves as a clue to the purpose, ownership, or nationality of a website.

Describe the attribute alt in detail. What is it? Why is it useful?

Its value is supposed to be a textual description of the image, for use in situations where the image cannot be seen/displayed. It can come in handy for a number of reasons: - takes a long time to render because of a slow internet connection. - The user is visually impaired, and is using a screen reader - The browser doesn't support the image type - You may want to provide text for search engines to utilize - Users have turned off images to reduce data transfer volume and distractions

Associating labels with form controls has several benefits, name some.

Labels make form controls accessible to screen reader users by providing the control with an accessible name. Labels are also "hit areas"; they make the site more usable for users with dexterity issues by increasing the area.

In legacy code, <tfoot> came after the <thead> in table layouts. What would the modern layout be vs legacy?

Legacy: <table> <caption> <thead> <tfoot> <tbody> etc. Modern: <table> <caption> <thead> <tbody> <tfoot> etc.

Links can be created via what elements?

Links can be created by <a>, <area>, <form>, and <link>. <a>: anchor element with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. <area>: HTML element defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with hypertext links. <form>: HTML element represents a document section containing interactive controls for submitting information <link>: HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons among other things.

Each item in a list needs to be put into what type of element?

List Item <li>

There are several types of navigation and several ways to display them. Name some examples

Local Navigation - Named anchors within text linking to other pages within the same website Breadcrumbs - Local navigation that consists of a series of links displaying the hierarchy of the current page in relation to the site's structure, or the pages the user followed to get to the current page Table of Contents - a table of contents lol Sitemap - A page containing hierarchical links to every single page on a site Global Navigation - navigation section leading to the top-level pages of the website which is found on every page P.S. Global navigation can be displayed in several different ways, including navigation bars, drop-down menus, and flyout menus.

global attributes are attributes that can be set on any HTML element. some global attributes have no effect when set on some elements does this have an effect? <meta ... hidden>

No, because meta content is already not displayed

Every type of DOM node is represented by an interface based on _________ , which provides information and methods as elements relate to the DOM tree.

Node

The _________ interface enables querying and adding nodes to the node tree.

Node

the Element, Document, and DocumentFragment interfaces inherit from _________ .

Node

What are Slottable nodes?

Nodes that can be inserted into slots. When a node has been inserted in a slot, it is said to be "Slotted"

Absolute URL

Points to a location defined by its absolute location on the web, including protocol and domain name

Relative URL

Points to a location that is relative to the file you are linking from, more like what we looked at in the previous section.

What are nested elements?

Putting Elements inside other elements. Elements must be closed in the order reverse order they were opened. Ex: <p> My cat is <strong>very</strong> grumpy </p>

Similar to <link rel="alternative">, the meaning of <a rel="alternative"> depends on other attributes. Give some examples.

RSS feed alternatives will also include type="application/rss+xml" or type="application/atom+xml Alternative formats will include the type attribute, and translations will include the hreflang attribute. If the content between the opening and closing tags is in a language other than the main document language, include the lang attribute. If the language of the hyperlinked document is in a different language, include the hreflang attribute.

When providing an accessible name on an element, don't include the name of the element. Why is it?

Screen readers provide that information to the user. For example, when using the <nav> element, don't include "navigation"; that information is included when using semantic elements.

Why should you use the semantic elements over non-semantic elements?

Semantic Elements come with defined methods, properties, aria roles, etc, from their defined interface. If you don't use the semantic button for your button, you have to program all those features back in. Example: <button> vs <div> <button>: - Properties - Methods - Aria Roles - Sequencing - Appearance - etc. <div> - Nothing lol

What are some of the semantics of HTML?

Sematic elements clearly state intent to devs and browsers Headings - Provide an indication of importance from search engines, screen readers, etc. Main - Defines the main content of a document Section - Defines a section in a document

Why does semantics play an important role concerning HTML?

Semitics determine how elements, etc, are interpreted. Incorrect Semitics can lead some detrimental results. Correct Examples: - Headings - Indication Importance and is used by Search Engines, Screen Readers, etc.

Define the <slot> element and it's purpose.

Slots are identified by their name attribute, and allow you to define placeholders in your template that can be filled with any markup fragment you want when the element is used in the markup. <p><slot name="my-text">My default text</slot></p>

what are the benefits of specifying a description and author via metadata

Specifying an author is beneficial in many ways: it is useful to be able to understand who wrote the page Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines

Give a quick overview of character encoding implementation in HTML. Where do you start? Why did you do what you did? etc.

Start with the <head> element. The first element in the <head> should be the charset character encoding declaration. It comes before the title to ensure the browser can render the characters in that title and all the characters in the rest of the document. The default encoding in most browsers is windows-1252, depending on the locale. However, you should use UTF-8, as it enables the two- to four-byte encoding of all characters, even ones you didn't even know existed. Also, it's the encoding type required by HTML5. The character encoding is inherited into everything in the document, even <style> and script. ex: <head> <meta charset="utf-8" />

When including links that are likely to open other installed applications, it's good to let the user know ... ?

That its opening an installed application by making sure the text between the tag tells the user what type of link they are about to activate.

How does merging table cells work in HTML?

The "colspan" attribute is used to merge two or more adjacent cells within a single row. The "rowspan" attribute is used to merge cells across rows, being placed on the cell in the top row

define the <fieldset> element

The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form.

Define and explain the purpose of the table element

The <table> tag wraps the table content, including all the table elements. The implicit ARIA role of a <table> is table; assistive technologies know this element is a table structure containing data arranged in rows and columns. If the table maintains a selection state, has two-dimensional navigation, or allows the user to rearrange cell order, set role="grid". If the rows of the grid can be expanded and collapsed, use role="treegrid" instead.

Describe <video> in detail. What is it? Why is it useful?

The <video> element allows you to embed a video very easily. ex: <video src="rabbit320.webm" controls> <p> Your browser doesn't support HTML video. Here is a <a href="rabbit320.webm">link to the video</a> instead. </p> </video>

How does the HTML DOM API work?

The HTMLElement interface represents the HTML element and all of its descendant nodes. Every other element implements it via an interface that inherits from it. Each inheriting interface has a constructor, methods, and properties Via the inherited HTMLElement properties, you can access every global attribute, as well as input, pointer, transition, and animation events

HTML tables are used for displaying tabular data with rows and columns. When is time to use a table vs when not too?

The decision to use a <table> should be based on the content you are presenting and your users' needs in relation to that content. If data is being presented, compared, sorted, calculated, or cross-referenced, then <table> is probably the right choice. If you simply want to lay out non-tabular content neatly, such as a large group of thumbnail images, tables are not appropriate: instead, create a list of images and style the grid with CSS.

What are some href attributes protocols and how to use them.

The href attribute can begin with mailto: or tel: to email or make calls, with the handling of the link depending on the device, operating system, and installed applications. The mailto link doesn't need to include an email address, but it can, along with cc, bcc, subject, and body text to prepopulate the email. The question mark (?) separates the mailto: and the email address, if any, from the query term. Within the query, ampersands (&) separate the fields, and equal signs (=) equate each field name with its value. The entire string is percent-encoded, which is definitely necessary if the href value isn't quoted or if the values include quotes. When including links that are likely to open other installed applications, it's good to let the user know. Make sure the text between the opening and closing tags tells the user what type of link they're about to activate

When the user submits a completed online form, the names and values of the relevant form controls get submitted

The name is the value of the name attribute. The values come from the contents of the value attribute or the value entered or picked by the user. The value of a <textarea> is its inner text. The value of a <select> is the selected <option>'s value or, if the <option> doesn't include a value attribute, the value is the selected option's inner text.

Why are role names important when building the AOM

The semantics of an element, or 'role', are important to assistive technologies and, in some cases, search engines. Assistive technology users rely on semantics to navigate through and understand the meaning of content. The element's role enables a user to access the content they seek quickly and, possibly, more importantly, the role informs the screen reader user how to interact with an interactive element once it has focus.

What is the target attribute?

The target attribute enables the defining of the browsing context for link navigation Every browsing context—basically, every browser tab—has a browsing context name. Links can open links in the current tab, a new unnamed tab, or a new or existing named tab. Common ones are: _self: current window (default) _blank: opens a new tab _parent: parent link if nested _top: top-most link target attribute is not limited to these four key terms: any term can be used. <a href="registration.html" target="_blank">Register Now</a>

what is an anti-pattern?

The use of a pattern when it is not needed. Forcing a pattern into your code.

what the purpose of the "caption" value for the kind attribute for <track> elements

The value kind="caption" should be reserved for transcription and translations that include sound effects and other relevant audio information. This isn't just for deaf viewers. Maybe a user can't find their headphones so they turned on the captions. Or maybe they didn't quite catch the last few talking points from a favorite podcast, so they want to read the transcript to confirm their understanding. Having alternative ways to access audio and video content is both important and convenient.

Whats the purpose of label attribute for <track> elements

The value of each label attribute is displayed as an option to the user. The content of the selected VTT option is displayed over the video

The download attribute should be included when the href points to a downloadable resource. Elaborate on the download attribute and how to optimize for user experience.

The value of the download attribute is the suggested filename for the resource to be saved in the user's local file system. SVGOMG, the SVG Optimizer, uses the download attribute to suggest a file name for the downloadable blob that the optimizer creates. When hal.svg is optimized, SVGOMG's download link opening tag is similar to: <a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

Where do the values come from in this form layout? <form method="GET"> <label for="student">Pick a student:</label> <select name="student" id="student"> <option value="hoover">Hoover Sukhdeep</option> <option>Blendan Smooth</option> <option value="toasty">Toasty McToastface</option> </select> <input type="submit" value="Submit Form"> </form>

The values come from the contents of the value attribute or the value entered or picked by the user. The value of a <textarea> is its inner text. The value of a <select> is the selected <option>'s value or, if the <option> doesn't include a value attribute, the value is the selected option's inner text.

Why are some elements considered "replaced elements" ? Name some replaced elements.

This is because the element's content and size are defined by an external resource (like an image or video file), not by the contents of the element itself. Ex: <img> <video>

How would you go about getting a <template> element to appear in main content. <template id="my-paragraph">

This won't appear in your page until you grab a reference to it with JavaScript and then append it to the DOM, using something like the following: let template = document.getElementById("my-paragraph"); let templateContent = template.content; document.body.appendChild(templateContent);

True or False: The way that browsers parse HTML is a lot more permissive than how programming languages are run

True

What is a URL

Uniform Resource Locator string of text that defines where something located on the web.

What are the two types of lists

Unordered List Ordered List

Why do we need heading structure

Users looking at a web page tend to just reading the headings Search engines indexing your page consider the contents of headings as important keywords Severely visually impaired people often don't read web pages; they listen to them instead To style content with CSS, or JavaScript, you need to have elements wrapping the relevant content

While HTML is not case-sensitive, some attribute values are. How does this work?

Values that are part of the HTML specification are case-insensitive. Values that are defined are case-sensitive ex: - class - id names If an attribute value is case-sensitive in HTML, it is case-sensitive when used in CSS + JS

The <footer> element isn't always a landmark. It has different semantics depending on where it is nested. What does it become when nested? What about Top-Level?

When it is the top-level, it is a landmark, and should contain the site footer information you want on every page. The implicit role for the site footer is "contentinfo". When nested, the footer has no implicit role and is not a landmark

The <header> element isn't always a landmark. It has different semantics depending on where it is nested. What does it become when nested? What about Top-Level?

When the <header> is top level, it is the site banner, a landmark role, which you may have noted in the role code block. When a <header> is nested in <main>, <article>, or <section>, it just identifies it as the header for that section and isn't a landmark.

Why can't you just use CSS or JS to edit the responsiveness of image issues? ( art direction, resolution switching, etc. )

When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. That mechanism is useful in general for reducing page load times, but it is not helpful for responsive images — hence the need to implement solutions like srcset

Don't include interactive content, such as a <button> or <input> or nest a link within a <button> or <label> because .... ?

While the HTML page will still render, nesting focusable and clickable elements inside interactive elements creates a bad user experience.

The inert attribute provides no visual indicators and has no matching pseudoclass (though the ___________ attribute selector matches). Using inert on visible content without styles indicating the inertness can lead to poor user experience.

[inert]

What is a "tab context name" regarding the target attribute in anchor links?

a "tab context name" aka a "browsing context name" is a name set to a browser tab through the target attribute of an anchor link. For example lets say you have an anchor link that opens a new tab every time it is clicked. <a href="registration.html" target="_blank">Register Now</a> If clicked 15 times, that's 14 extra tabs. This problem can be fixed by providing a tab context name to the target attribute. <a href="registration.html" target="reg">Register Now</a> The tab context name is "reg" —the first click on this link will open the registration form in a new reg tab. Clicking on this link 15 more times will reload the registration in the reg browsing context, without opening any additional tabs.

Define the <output> element

a container element into which a site or app can inject the results of a calculation or the outcome of a user action.

What is a blob?

a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a ReadableStream so its methods can be used for processing the data. Blobs can represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

Links are not limited to HTML. The a element can also be used within an SVG, forming .... ?

a link with either the 'href' or 'xlink:href' attributes.

Define the <template> element and it's purpose.

a mechanism for holding HTML that is to be instantiated subsequently during runtime using JavaScript. While the parser does process the contents of the <template> element while loading the page, it does so only to ensure that those contents are valid;

What are some various ways of adding SVGs to you webpage? Pros + Cons of each

a. <img> element b. Inline SVG c. <iframe> element a. Pros: - Familiar syntax with semantics - Easy hyperlinks - Cached by browser Cons: - Cannot edit with JS - Inline CSS only - No pseudo-classes b. Pros: - Saves a request - CSS classes, pseudo-classes, etc. - Easy hyperlinks Cons: - Only suitable if used in one place. Dup eats resources - Extra SVG code increases size of HTML file - Cannot Cache similar to regular images. - Can include fallback in a SVG <foreignObject> elements. c. Cons: - Has fallback that only works if lack of support for <iframe> - Unless SVG and Web Page have same origin, you cannot use JS to edit SVG.

What the old two categories of elements?

a. Block-level elements b. Inline Elements

Walk thru the steps to creating a custom element ( standalone ) a. ... b ... etc.

a. Define a custom class that extends the generic "HTMLElement" class b. Define constructor then element functionality c. Define lifestye + functionality methods ( connectedCallback, Shadow DOM setup, etc. ) d. Register element on the CustomElementRegistry using the define() method e. It is now available to use on HTML page

Many elements that don't support any non-deprecated, non-global attributes have element specific interfaces: a. ______ for <p> b. ______ for non-defined elements. Note: these interfaces don't implement any additional properties or methods on top of the properties and methods inherited from HTMLElement

a. HTMLPElement b. HTMLUnknownElement

HTTPS is the encrypted version of HTTP. You should serve your websites using HTTPS whenever possible because?

a. HTTPS reduces the chance that remote content has been tampered with in transit, b. HTTPS prevents embedded content from accessing content in your parent document, and vice versa.

Whenever HTML errors, its usually between these 2 errors

a. Syntax: These are spelling or punctuation errors in your code that actually cause the program not to run b. Logic: These are errors where the syntax is actually correct, but the code is not what you intended it to be, meaning that the program runs incorrectly.

It is possible to define specific lifecycle callbacks inside a custom element class, which run at specific points in the element's lifecycle. You can define several different callbacks inside a custom element's class definition, which fire at different points in the element's lifecycle What do you think these callback names stand for? a. connectedCallback: b. disconnectedCallback: c. adoptedCallback: d. attributeChangedCallback:

a. connectedCallback: Invoked each time the custom element is appended into a document-connected element. This will happen each time the node is moved, and may happen before the element's contents have been fully parsed. b. disconnectedCallback: Invoked each time the custom element is disconnected from the document's DOM. c. adoptedCallback: Invoked each time the custom element is moved to a new document. d. attributeChangedCallback: Invoked each time one of the custom element's attributes is added, removed, or changed. Which attributes to notice change for is specified in a static get observedAttributes method

The tabindex attribute takes as its value an integer, what do these values do?: a. value of 0: b. value of 1+: c. value of -1+:

a. makes the element focusable and tabbable, adding tab order b. makes the element focusable and tabbable, adding priority tab order c. makes an element focusable but not tabbable

What are the arguments for the CustomElementRegistry.define() method

a. string name for the element (kebab-case) b. class object that defines the behavior of the element c. An options object containing an extends property, which specifies the built-in element your element inherits from, if any (optional)

Files can be of any type, defined and limited by the _______ attribute. The list of acceptable file types can be a comma-separated list of file extensions, a global type, or a combination of global types and extensions.

accept For example, accept="video/*, .gif" accepts any video files or animated gifs. Use "audio/*" for sound files, "video/*" for video files, and "image/*" for image files.

As inert content is not available to screen reader users, it can lead to confusion when sighted screen reader users see content on screen that is not available to the ..... ?

accessibility tools. Make inertness very apparent via CSS.

For groups of radio buttons and checkboxes, the label provides the _________ name for the form control it is associated with, but the group of controls and their labels also need a ______. How do you label the group?

accessible label To label the group, group all of the elements into a <fieldset>, with the <legend> providing the label for the group.

What form element attributes define the URL that processes the form data and the HTTP method used to submit the data

action method

If the href attribute is present, pressing the Enter key while focused on the <a> element will .... ?

activate it

Sitelinks

additional links that appear just under the text of your search ads, directing users to specific pages of your website

An unnamed <slot> will be filled with?

all of the custom element's top-level child nodes that do not have the slot attribute. This includes text nodes.

When the user tries to submit the form .... ?

all the form control values go through client-side constraint validation and can prevent submission until the data matches the required criteria; all without JavaScript.

What's the point of headings elements

allow you to specify that certain parts of your content are headings and help with SEO and accessibility.

Define the "is" global attribute.

allows you to specify that a standard HTML element should behave like a defined custom built-in element

The <caption> element should be the first element nested in the <table> element. Including it lets all users know the purpose of the table immediately without having to read the surrounding text. Alternatively, you can use ____ or ______ on the table to provide an accessible name as the caption.

aria-label aria-labelledby

Define the "pattern" attribute for the <input> element.

attribute specifies a regular expression the form control's value should match. an attribute of the text, tel, email, url, password, and search input types. If a non-null value doesn't conform to the constraints set by the pattern value, the ValidityState object's read-only patternMismatch property will be true.

You can use HTML interfaces to access information about an element's .... ?

attributes For example, we can use HTMLImageElement.alt get the alt attributes of all the images

If the user changes their device orientation or otherwise changes the width of the viewport, the height will change and the DOM properties will .... ?

auto update with it.

The <details> element is the disclosure widget container. The <summary> is the summary or legend for its parent <details>. The summary acts as a ________ that toggles the display of the rest of the parent's contents

button

The caption appears outside the table. The location of the caption can be set with the CSS ______ property

caption-side which is a better practice than using the deprecated align attribute This can set the caption to the top and bottom. The left and right side positioning, with inline-start and inline-end, are not yet fully supported. Top is the default browser presentation.

The enumerated _______ attribute can be used if a new media file is to be created using the user's camera or microphone.

capture You can set the value to user for the user-facing input devices or environment for the phone's back camera or microphone. Generally, using capture, without a value, works because the user is going to pick which input device they want to use <label for="avatar">A recent photo of yourself:</label> <input type="file" capture="user" accept="image/*" name="avatar" id="avatar">

User-agent stylesheets generally display the content in a <th> table header cell as .... ?

centered and bold These default styles, and all styling, are best controlled with CSS instead of the deprecated attributes that used to be available on individual cells, rows, and even the <table>.

When you've attached a shadow DOM to an element, manipulating it is a matter of just using the same DOM APIs as you use for the regular DOM manipulation Provide an example of appending a <p> to the shadow root variable named "shadow"

const para = document.createElement("p"); shadow.appendChild(para); // etc.

If you are attaching a shadow DOM to a custom element as part of its constructor (by far the most useful application of the shadow DOM), Provide an example:

const shadow = this.attachShadow({ mode: "open" });

Define the <picture> element

contains 0+ <source> elements and 1 <img> element to offer alternative versions of an image for different display/device scenarios. The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn't support the <picture> element—the URL of the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element.

What is the use of the <body> tag?

contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

Describe <aside> in detail.

contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.).

Describe <nav> in detail.

contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation.

What is fallback content?

content that will be displayed if the browser accessing the page doesn't support the <video> element

Describe <main> in detail.

content unique to this page. Use <main> only once per page, and put it directly inside <body>. Ideally this shouldn't be nested within other elements.

Name the TLDs that IANA categorizes

country-code top-level domains (ccTLD): domains for countries or territories; (.us, .eu) internationalized country code TLD (IDN ccTLD): Non-Latin character domains; (.cn, .中国) generic top-level domains (gTLD): TLDs with 3+ characters; (.com, .xyz) sponsored top-level domains (sTLD): domains proposed and sponsored by private orgs; (.edu, .gov)

<track> files should be in the same domain as the HTML document unless _________ attribute in on.

cross origin

Create a custom built-in word count element based on the paragraph element. Just Provide example with JS code: The element = word-count, class object = WordCount extends = <p> element

customElements.define("word-count", WordCount, { extends: "p" });

You can create any custom attribute you want by adding the _____ prefix

data You can name your attribute anything that starts with data- followed by any lowercase series of characters that don't start with xml and don't contain a colon (:). While browsers won't implement default behaviors for any specific data- prefixed attribute, there is a built-in dataset API to iterate through your custom attributes

Describe the global role attribute for elements.

describes the role an element has in the context of the document. Semantic elements each have an implicit role, some depending on the context defined by the ARIA specification rather than the WHATWG HTML specification

A name should be unique to the group: if you accidentally use the same name for two separate groups, selecting a radio button in the second group will?

deselect any selection made in the first group with the same name.?

What is the "resolution switching problem"?

determining the optimal img resolution to load based on the screen size of the user's device

Avoid modifying the DOM order with tabindex. Not only can altered tabbing orders create bad user experiences, they are ..... ?

difficult for developers to manage and maintain.

Element nodes contain information about all the attributes set on the .... ?

element

Note that the browsers scroll focused elements into view. For this reason, avoid the use of .... ? As focusing on a non-visible element will give a bad user experience

element.focus({preventScroll:true})

what are block-level elements and how do they work?

elements that form a visible block on a page. Block-level elements are usually structural elements on the page A block-level element appears on a new line following the content that precedes it. Any content that follows a block-level element also appears on a new line ex: headings, paragraphs, lists, footers, etc.

What is the best way to put emphasis on text that would also work with accessibility options

emphasis element <em> <strong> <mark>

Twitter Cards

enable users to attach rich photos, videos and media experiences to tweets and drive traffic to websites

Always include focus styles because .... ?

enables keyboard navigators to know where they are when tabbing through your content.

Note that the shadow DOM is not a new thing by any means — browsers have used it for a long time to .... ?

encapsulate the inner structure of an element.

Describe <article> in detail.

encloses a block of related content that makes sense on its own without the rest of the page

explain enumerated attributes in detail

enumerated attributes are sometimes confused with boolean attributes. they are HTML attributes that have unlimited set of predefined valid values. Like boolean attributes, they have a default value if the attribute is present but the value is missing. unlike Boolean attributes, omitting the attribute doesn't mean it's false. ex: contenteditable defaults to inherit if missing or invalid, and can be explicitly set to false

When toggling attributes between true or false, it's better to remove them altogether with JavaScript because?

enumerator attributes in Boolean attributes have different behavior when toggling states. while omitting a boolean attribute will make it false, omitting an enumerated attribute may set the value to "inherit" and vice versa. note that in XML languages like SVG, all attributes need to be include a value including Boolean attributes.

If the slot's content isn't defined when the element is included in the markup, or if the browser doesn't support slots, the element just contains the ____________ ?

fallback content

The file input type <input type="______"> enables uploading files via forms.

file Files can be of any type, defined and limited by the "accept" attribute. The list of acceptable file types can be a comma-separated list of file extensions, a global type, or a combination of global types and extensions.

Douglas Crockford's famous "walk the DOM" function, makes use of Node's ____________ and the ______________ properties.

firstChild nextSibling

To explicitly associate a form control with a <label>, include the _____ attribute on the <label>

for the value being the id of the form control it is associated with. <label for="full_name">Your name</label><input type="text" id="full_name" name="name">

what the purpose of the "description" value for the kind attribute for <track> elements

for text descriptions of the visual content in the video for users who can't see the video, whether they are using a system without a screen such as Google Home or Alexa, or are blind.

Form buttons can have more than the attributes described at the start of this section, who takes higher priority? form attributes on button form attributes on form

form attributes on button If the button includes a formaction, formenctype, formmethod, formnovalidate, or formtarget attribute, the values set on the button activating the form submission take precedence over the action, enctype, method, and target set on the <form>.

While you can style an element based on the :required and :valid/:invalid pseudoclasses. The browser supplied error messages stemming from errors based on the required, pattern, min, max, and even type attributes, come at form submission.

form submission

You can use CSS to provide cues about whether form controls are required and valid as the user interacts with the form. You can even use CSS to prevent users from being able to click the submit button until the form is valid: Provide a form invalid attribute CSS example where the opacity is 50% and pointer events are none.

form:invalid [type="submit"] { opacity: 50%; pointer-events: none;} This CSS snippet is an anti-pattern. While your UI may feel intuitive and clear, many users attempt to submit a form to enable error messaging. Making a submit button appear disabled in this way doesn't allow for constraint validation, a feature many users rely on.

<input> elements where the user can't edit the value, you should always include a value, including for input elements with a type of?

hidden, radio, checkbox, submit, button, and reset. Using unique names for form controls makes server-side data processing simpler and is recommended, with checkboxes and radio buttons being exceptions to this rule.

Define the <form> element

identifies a document landmark containing interactive controls for submitting information. Nested in a <form> you'll find all the interactive (and non-interactive) form controls that make up that form.

To make things complicated, some devices have high resolution screens that need larger images than you might except to display nicely. This is essentially the "resolution switching problem", but in a slightly different context. You might think that vector images would solve this problem, and they do to a certain degree. However vector images aren't suitable for all .... ?

image types. Vector images are great for simple graphics, patterns, interface elements, etc., but it starts to get very complex to create a vector-based image with the kind of detail that you'd find in say, a photo. Raster image formats such as JPEGs are more suited to the kind of images we see in the above example

Block Quote

indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. <p>Here is a blockquote:</p> <blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> <p> The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quotation. </p> </blockquote>

If content is hidden, but comes into view when focused, like the skip to content link, it does not need to be made ____________ .

inert

Make sure that the focus never moves to non-visible content. Anything rendered off-screen that does not automatically come into view when focused should be made ..... ?

inert

When the ___________ global boolean attribute is added to an element, that element and all nested content become disabled—neither clickable nor tabbable—and removed from the accessibility tree.

inert

While _________ can be applied to any element, it is generally used for sections of content, such as offscreen or otherwise hidden content.

inert

With forms, you can enable users to .... ?

interact with your website or application, validate the information entered, and submit the data to a server. HTML attributes can enable requiring the user to select form controls or enter a value.

While the boolean autofocus is a global attribute that can be set on any element, it doesn't make an inert element ..... ?

interactive

As labels are "hit areas", don't include _______ elements within an explicit label, or any other ________ components other than the labeled form control in an implicit label

interactive For example, if you include a link in a label, while the browser will render the HTML, your users will be confused if they click on the label to enter a form control but are redirected to a new page.

Always make sure users can navigate to any page on your site with the fewest number of clicks, while making sure the navigation is .... ?

intuitive & not over whelming

define the constructor() method.

is a special method of a class for creating and initializing an object instance of that class.

The <nav> is the best element to use for sections of navigation, Why?

it automatically informs the screen reader and search engine that a section has a role of navigation, a landmark role

Note that if you add "tabindex=-1" to an interactive element

it is no longer tabbable

In order for users to know how to fill out a form, the form has to be accessible. Every form control must have a _____. You also want to _____ groups of form controls. While individual input, select, and text areas are _____ with ________, groups of form controls are labeled by the contents of the ________ of the ________ that groups them.

label label labeled <lablel> <legend> <fieldset>

If the term being defined is not in the same language as the surrounding text, make sure to include the ____________ attribute to identify the language.

lang

what is a link fragment identifier

links to sections of the current page

What's the point of ordered lists

lists where the order of the items does matter, wrapped in a <ol> element.

What's the point of unordered lists

lists where the order of the items doesn't matter, wrapped in a <ul> element.

CSS features can alter the visual order of content. Always ensure your content maintains a ________ tabbing order on all viewport sizes.

logical and consistent

<track> files should be in WebVTT(.vtt) format because?

makes the video accessible to people with impaired hearing Remember, disability is a mismatch between a person and their current environment.

Description Lists

mark up a set of items and their associated descriptions, such as terms and definitions, or questions and answers. wrapper: <dl> Description Title: <dt> Description Definition: <dd>

List items can contain all flow content, What does this mean?

meaning any element found in the body that can be nested as a direct child of the <body>, including headings, thereby sectioning content.

Open Graph Protocol

metadata protocol that Facebook invented to provide richer metadata for websites

The only-one-can-be-selected radio button effect is created by giving each radio button in a group the same what?

name

You can have as many radio groups on a page as you like, with each group working independently, as long as each has a unique-to-the-group what?

name

t's valid for all checkboxes within a group to have the same name. Only selected checkboxes have their ____ and _____ submitted with the form.

name value

<legend> and <fieldset> can be styled with CSS. In addition to all the global attributes, <fieldset> also supports the name, disabled, and form attributes. Neither the name nor the form attributes or controls have much use on the disabled <fieldset>. The ______ can be used to access the fieldset with JavaScript, but the fieldset itself is not included in submitted data

name attribute

Being a native, semantic element, <caption> is the preferred method of giving a ... ?

name to a table The <caption> provides a descriptive, programmatically associated table title. It is visible and available to all users by default.

When a form is submitted, the information sent includes?

names and values of all named form controls that have a name except non-selected checkboxes, non-selected radio buttons, and the names and values of any buttons other than the one that submitted the form. For all other form controls, if the form control has a name, but no value was entered or defaulted, the form control's name gets submitted with an empty value.

Breadcrumbs help users what?

navigate and understand the organization of your site, allowing them to quickly navigate anywhere up to any ancestor sections without having to step back through each prior page visited to get to the current page using back functionality

Assistive technology users rely on semantics to

navigate through and understand the meaning of content

Whether the accessible name comes from the img alt attribute or a subset of words within a block of text, make sure it provides .... ?

nformation about the link's destination. Link text should be more descriptive than "click here" or "more information"; this is important for your screen reader users and your search engine results!

What are some rel attribute values supported by the <a> tag

nofollow - don't want spiders to follow the link. external - indicate that the link directs to an external URL and is not a page within the current domain. help - indicates the hyperlink will provide context-sensitive help. ** use the CSS cursor property instead prev + next - links pointing to the previous and next document in a series.

You can affect the nodes in the shadow DOM in exactly the same way as non-shadow nodes — The difference is that .... ?

none of the code inside a shadow DOM can affect anything outside it, allowing for handy encapsulation.

Preferably, data tables should have clear headers and a caption, and be simple enough to be almost self-explanatory. Bear in mind .... ?

not all users have the same cognitive abilities. When the table is "making a point", or otherwise needs interpretation, provide a brief summary of the main point or function of the table.

Test your content by tabbing through it with a keyboard with shift + tab to move backwards through the content. Always ensure it's apparent which element currently has focus with CSS, and avoid accessibility problems by .... ?

not reordering focusable elements with CSS

Consider an example Internet address: "" https://developer.mozilla.org "" Here __________ is the TLD; __________ is the second-level domain name; __________ is a subdomain name; Addition of __________ makes this a complete URL All together, these constitute a fully-qualified domain name.

org mozilla.org developer https://

If an interface has the same method or property name as and interface it inherits, the inheriting method or property .... ?

overwrites the inherited one.

Setting autofocus on a form control means that the form control will scroll into view on ..... ? Note: - All your users, including screen reader users and users with small viewports, may not "see" the instructions for the form, possibly even scrolling past the form control's normally visible label.

page load

Building a sound semantic structure enables the targeting of elements based on their

placement and function Sound structure enables the use of descendant element selectors, relational selectors, and attribute selectors.

Why did frames and frameset become obsolete

plugin technologies became very popular, such as Java Applets and Flash — these allowed web developers to embed rich content into webpages such as videos and animations, which just weren't available through HTML alone.

What is a "audio codec"

program used to process and compress audio data into smaller sizes (encode/decode)

What's the purpose of <figure> and <figcaption> elements? Provide an Example

provide semantics for containers figure = content figcaption = Description of parent figure content <figure> <img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" height="341" /> <figcaption> A T-Rex on display in the Manchester University Museum. </figcaption> </figure>

The benefit of web components is their?

re-usability you can create a UI widget once, and reuse it multiple times.

The tabindex attribute can be added to any element to enable it to ...

receive focus The tabindex value defines whether it gets added to the tab order, and, optionally, into a non-default tabbing order.

When the page loads, the first focusable element with the autofocus attribute set will ..... ?

recieve focus as long as that element is displayed and not nested in a <dialog>.

Make sure to define the aspect ratio of your video, because when the video loads, a size difference between the poster and the video will cause a?

reflow and repaint

Being a boolean attribute, the presence of the attribute disables the otherwise enabled element; you can't set it to false. To re-enable a disabled element, the attribute has to be .... ?

removed via Element.removeAttribute('disabled').

Describe <footer> in detail.

represents a group of end content for a page.

Describe <header> in detail.

represents a group of introductory content. If it is a child of <body> it defines the global header of a webpage, but if it's a child of an <article> or <section> it defines a specific header for that section (try not to confuse this with titles and headings).

If the user is required to pick a radio control from a group of radio buttons, add the ________ attribute to at least one of the controls.

required Including required on a radio button in a group makes a selection required for form submission, but it doesn't have to be the radio with the attribute that gets selected to be valid. Also, indicate clearly in the <legend> that the form control is required. The labeling of groups of radio buttons along with each individual button is described later on.

Responsive image technologies were implemented recently to solve which two main problems? What are they?

resolution switching - number of pixels art direction - image space allocation srcset + sizes / img attributes <picture> element Note: Older browsers that don't support these features will just ignore them. Instead, those browsers will go ahead and load the image referenced in the src attribute as normal.

The autofocus attribute doesn't alter the document's .... ?

sequential focus navigation order. The elements in the sequence coming before the autofocused element are simply skipped. For these reasons, it is not advised to include the autofocus attribute.

Content Security Policy

set of directives that is used to control what displays in a client's browser by informing the browser of locations that it can use to obtain content. Each directive governs a specific resource type.

What is the use of the <title> tag?

sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.

Favicon

short for "favorites icon", referring to its use in the "favorites" or "bookmarks" lists in browsers

Describe <section> in detail.

similar to <article>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries), or a theme. It's considered best practice to begin each section with a heading; also note that you can break <article>s up into different <section>s, or <section>s up into different <article>s, depending on the context.

Explain <source> in detail? What is it? What's the purpose?

specifies multiple media resources for the <picture>, the <audio> element, or the <video> element. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.

Define the <source> element

whats the point of the "headers" attribute for <td>,<th>?

specifies one or more header cells a table cell is related to.

whats the point of the "scope" attribute for <th>?

specifies whether a header cell is a header for a column, row, or group of columns or rows. Has mostly semantic effect. Values: - col - row - rowgroup - col group etc.

what does the <meta> attribute "name" do?

specify the type of meta element it is and type of info it contains

The opening <video> and <audio> tags can contain several other attributes including?

src controls autoplay loop mute preload height width poster global attribute

If no ________ attribute is included on the opening <video> or <audio> tags, include one or more ________ elements, each with a src attribute to a media file.

src <source>

If you're supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using .... ?

srcset — with x-descriptors and without sizes Example: <img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x" src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy" />

What does semantics mean?

study of relationships between signs and symbols and what they represent and how they are interpreted.

If you have multiple form controls with the same name, even if they are not all checkboxes, they will all get _______, separated by ampersands.

submitted

<track> element has 5 values for the attribute "kind", what are they?

subtitles captions descriptions chapters metadata.

Where that data table summary is placed depends on its length and complexity. If longer .... ?

summarize it in the caption, and provide the summary in the paragraph preceding the table, associating the two with the aria-describedby attribute. Putting the table in a <figure> and putting the summary in the <figcaption> is another option

The global _____________ attribute, introduced in attributes, enables elements that otherwise would not be able to receive focus to get focus, usually with the Tab key,

tabindex

Tables can be divided into table headers, bodies, and footers, but none of these really does anything if the tables do not contain .... ?

table rows table cells table content. Each table row, <tr> contains one or more cells. If a cell is a header cell, use <th>. Otherwise, use <td>.

Within a block of text, ensure the appearance of your links differs enough from the surrounding text so .... ?

that users can easily identify links from the rest of the content

If the content of a link is an image, the alt description is .... ?

the accessible name

explain the class attribute

the class attribute provides an additional way of targeting elements with CSS but serves on purpose in HTML. The class attribute takes as it's value a space-seperated list of case-sensitive classes for the element.

Why should you never add both allow-scripts and allow-same-origin to your sandbox attribute?

the embedded content could bypass the Same-origin policy that stops sites from executing scripts, and use JavaScript to turn off sandboxing altogether

table elements provide styling hooks, provide some examples.

the header contents can be made sticky, while the <tbody> contents can be made to scroll. Rows not nested in one of these three containing elements are implicitly wrapped in a <tbody>. All three share the same implicit role rowgroup. None of these three elements has any element-specific attributes.

what's the purpose of HTML label element and it's for attribute

the labels "for" attribute takes an ID of a form to be associated with. creating an explicit label by using IDs on every four control impairing them with the labels for attribute insurers that every form control has an associated label. while each label can be associated with exactly one form control, a form control may have more than one associated label. if the form control is nested between the label opening and closing tags the four and ID attributes aren't required they are implicitly applied. that's overall makes information available to users of assistive technologies, people with dexterity issues, and even mobile users. in addition, clicking anywhere on the label gives focus to the associated element, extending the click area.

Interactive elements, such as buttons, links, ranges, and checkboxes, all have implicit roles. Where do they get them from?

these roles may depend on the context, but most are from a list of aria roles assigned when from their interface and when interpreted. <button> example: - Role: Button - Supplied From: HTMLButtonElement interface

What is the purpose of meta data protocols such as open graph, Twitter cards, etc?

to provide control to how social media sites display links to your content Facebook Example: <meta property="og:title" content="Machine Learning Workshop" /> Twitter Example: <meta name="twitter:title" content="Machine Learning Workshop" />

Provide an example of linking a translated page using the anchor link. languages: French + Portuguese

translations will include the hreflang attribute. If the content between the opening and closing tags is in a language other than the main document language, include the lang attribute. If the language of the hyperlinked document is in a different language, include the hreflang attribute <a href="/fr/" hreflang="fr-FR" rel="alternate" lang="fr-FR"> <a href="/pt/" hreflang="pt-BR" rel="alternate" lang="pt-BR"> href - URL of the translated page hreflang - provides the language of the translations rel - indicate that it's an alternative version of a site *** NOTE: If the French translation is a PDF for example, you can provide the type attribute with the PDF MIME type of the linked resource. While the MIME type is purely advisory, informing the user that a link will open a document of a different format is always a good idea. ex: <a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">

The <ol> has three element-specific attributes: .... ?

type, reversed, and start type - attribute sets the numbering type ( 1, a, A, i, I ) *** NOTE: "list-style-type" property provides many more values reversed - will reverse the order of the numbers, going from largest number to the lowest. start - attribute sets the starting value. The default is 1 There is only one element-specific <li> attribute: value, an integer. It overrides the value of the <ol>'s start if there is a conflict.

To display custom video or audio controls, rather than the browser built-in controls, include the controls attribute, Then?

use JavaScript to add custom media controls and remove the controls attribute. NOTE: ** By including the controls attribute, the user has a way to control the audio (or video) even if JavaScript fails.

Where that data table summary is placed depends on its length and complexity. If brief .... ?

use it as the inner text of the caption

What is the point of abbreviations in HTML

used to wrap around an abbreviation or acronym. When including either, provide a full expansion of the term in plain text on first use, along with the <abbr> to mark up the abbreviation. ex: <p> I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw. </p

Page layouts should be responsive, accessible, predictable, and consistent across a site. Why is it extremely bad if there is inconsistentancy?

users are accustomed to content being responsive and changing location when they change devices or increase their font size, they do not expect the tab order to change, content to change, etc.

what are some Breadcrumbs best practices?

uses the <nav> element, a landmark role, so assistive technology presents the breadcrumbs as a navigational element on the page. The accessible name of "breadcrumbs", provided with the aria-label, differentiates it from the other navigation landmarks in the current document <nav aria-label="breadcrumbs"> separators between breadcrumb links should be hidden from screen readers. Screen readers will not "see" them, which is best practice Generally, the link to the home page in a breadcrumb should read "home" rather than be the site logo with the name of the site as the label. Breadcrumbs are not for linear steps. For example, a list of the path the user followed to get to the current page or the list of steps followed up to this point in a recipe can be nested within a <nav>, but should not be labeled as a breadcrumb.

The <th> cell has semantic meaning, what is it's implicit aria roles.

with implicit ARIA roles of "columnheader" or "rowheader". It defines the cell as the header for the column or row of table cells, depending on the value of the enumerated scope attribute. The browser will default to col or row if scope is not explicitly set.

Inline Quotations

work in exactly the same way as Block Quote, except that they use the <q> element.

What is the use of the <html> tag?

wraps all the content on the entire page and is sometimes known as the root element

What is SVG?

• SVG stands for Scalable Vector Graphics • SVG is used to define vector-based graphics for the Web • SVG defines the graphics in XML format • Every element and every attribute in SVG files can be animated • SVG is a W3C recommendation

Voir tous les ensembles d'études

Ensembles d'études connexes

All season driving school final test 2

Cicatrizacion

PSY 200 Study Guide- Mr Nichols, NWSCC

Chapter 8 History Layup Questions

Seeley's Anatomy & Physiology 11th ed Chapter 15

McFarland USA Important Vocab Words

US HISTORY-UNIT 3

Exercise Coach

PHYS

questions

MIS 322 Chapter 4

AP2 Ch. 18 - Endocrine System Review

Damaged Brain Areas

Exel lesson 3

MedSurgII-Exam1

OB FINAL STACK 14

Assignments

MEDsurge FINaL

Module 3 (Selection Structures)

aaaaaa nsg 102 important, #2. Pulmonary Embolism, Anticoagulation (Lilley Ch.26) - Textbook, MODS/ARDS/DIC (Infection/SIRS&Sepsis/Severe Sepsis&Septic Shock/MODS) - IGGY Ch 32: Respiratory Problems, Day 8 of the New Year: All about the Heart, #2. Pul...