HTML Essential Training (pt 1)

What two elements are used to mark-up subscript and superscript text? <sub> and <sup> <subscript> and <superscript> <small> and <sup> <lower> and <raise>

<sub> and <sup> (<sub> is for subscripts, like numbers in chemical formulas, and <sup> is for superscripts, like footnote markers.)

Which format is best suited to handle complex drawings and logos? SVG JPG PNG GIF

SVG

which code produces the output below? <test> a. <test> b. < test > c. "<test>"

b. < test >

How many elements are there in the following HTML code? <h1> The End of the World is Nigh </h1> <article> Musings on our Current Social Predicament, by <em> Trans I. Tory </em> <p> Random content....</p> </article> four eight two three

four (count the number of "/". There is an opening and closing tag, and together they make one pair.

five four six three

four (two elements are displayed as paragraph elements, the others are headlines)

Which HTML elements are commonly used in marking up navigation? <navigation>, <link> <dl>, <dd>, <dt>, <role> <nav>, <ul>, <li>, <a> <menu>, <list>, <url>

<nav>, <ul>, <li>, <a> (there's no single way to mark up navigation, but often developers use these)

Which type of element is typically a block? <i> <q> <p> <b>

<p> (creates an area on a page, rather than a portion of a line)

Which HTML code snippet produces the output shown in this image? This is a demonstration of the paragraph tag <p> This is a </p> demonstration <p> of the paragraph tag </p>. <p> This is a </p> demonstration <p> of the paragraph <p> tag </p> </p>. <p> This is a </p> demonstration <p> of the paragraph <p> tag. </p> </p> <p> This is a demonstration </p> of the paragraph <p> tag </p> .

<p> This is a </p> demonstration <p> of the paragraph <p> tag </p> </p>. (count the lines of output)

Which code should you use to guarantee that the words "Hocus Pocus" are not split by a line break after "Hocus"? Hocus&nbsp;Pocus Hocus&nbspPocus Hocus/nbsp;Pocus Hocus<nbsp>Pocus

Hocus&nbsp;Pocus (the nonbreaking space character ensures that hocus pocus will always display on the same line)

Which is a true statement about HTML lists? Use a list when you want to indent content. Lists can be used to mark up navigation. There are four different kinds of lists.

Lists can be used to mark up navigation. (While lists are normally used to present content, their structured and nestable semantics also make them good for navigation menus. Only use HTML lists when the content should look like a bulleted list, a numbered list, or a checklist)

if you want to create a compant image that can display in large sizes without pixalation, which should you choose? PNG GIF JPG SVG

SVG (scalable vector graphics can be scale to massive sizes and still look neat, like they were build for it)

If you want to keep a caption with an image, which combination of elements lets you identify them as connected? Surround the image and the caption with a div element. Separate the image and the caption with a br element, to create a break but not a new container element. Surround the image with a figure element, and use the figcaption element inside of figure. Use CSS to insert the caption as generated text after the image.

Surround the image with a figure element, and use the figcaption element inside of figure. (<figure> is designed to contain a caption that will stay with your image.)

Which of these attributes is NOT a global attribute? datetime class dir lang

datetime (only used on the time element, as a way to create machine-readable date)

What are the four attributes we want to include on every img element? srcset, alt, ratio, filesize source, height, width, orientation src, alternative, intrinsicsize, orientation src, alt, height, width

src, alt, height, width (src, alt, height, width)

When might we use a relative URL instead of an absolute URL? when we aren't sure what the URL is when a website might be moved from a staging server to a production server when we want to include the slash at the end whenever we want to make sure the URL is pointing to a precise domain name

when a website might be moved from a staging server to a production server

Which address points to a different file than the others? "/people/index.html" "/people/" "/index.html" "/people"

"/index.html"

How do you create a video element that specifies different resolutions of video that browsers can choose from when loading the video? Use the H.264 encoding, and it will bring controls with the data. You can't do this. Instead, the browser adapts to circumstances as needed. By writing custom JavaScript for the circumstances you want to control. Just like the picture element, with sources.

You can't do this. Instead, the browser adapts to circumstances as needed.

Which code produces the output shown in the image below? 2_{<small><small> 5</small> </small>}⁸ 2^{<small><small> 8</small></small>}₅ 2^{<small><small> 5</small></small>}₈ 2⁵_{<small>8</small>}

2^{<small><small> 5</small></small>}₈

Which syntax can we use to add comments to our HTML? //comment <!-- comment --> { comment } /*comment*/

<!-- comment -->

How do we make a basic link in HTML? <link url="https://example.com">text to click</link> <a href="https://example.com">text to click</a> <a url="https://example.com">text to click</a> <link href="https://example.com">text to click</link>

<a href="https://example.com">text to click</a>

What's a true statement about the difference between the <blockquote> element and the <q> element? The <blockquote> element is more popular and taught more often, so it's more correct to use <blockquote>. The <blockquote> element requires being paired with a <cite> element, while the <q> element does not. <blockquote> is a block-level element, while the <q> element is inline, nested inside another block-level element. <blockquote> is for long quotes, while <q> is for short quotes.

<blockquote> is a block-level element, while the <q> element is inline, nested inside another block-level element. (If you want to highlight a short quote, <q> is great to use inside of a paragraph or other block-level element. <blockquote> is for when you want something bigger, to really stand out.)

What is the difference between the usage of <div> and <span>? <div> is used for blocks, and <span> is used for a part of a line. <div> is used for blocks, and <span> is used for an entire document. <span> is used for blocks, and <div> is used for a part of a line. <div> is used for figures, images, and videos, and <span> is used for a part of a line.

<div> is used for blocks, and <span> is used for a part of a line.

Which elements are used to convey meaning, instead of just typesetting convention? <em> and <strong> <b> and <i> <p> and <b> <h1> and <em>

<em> and <strong> (used to convey a sense of importance or stress when spoken)

Which code snippet makes correct use of <figure> and <figcaption>? <figure> <img src="https://figuresource.com/40289/alfonso.jpg" width="720" height="354" alt="The Gracious Host" > <figcaption> Alfonso serving pancakes <figcaption> <figure> <figure> <img src="https://figuresource.com/40289/alfonso.jpg" width="720" height="354" alt="The Gracious Host" > <figcaption> Alfonso serving pancakes </figcaption> </figure> <figure> <img src="https://figuresource.com/40289/alfonso.jpg" width="720" height="354" alt="The Gracious Host" > <figcaption> Alfonso serving pancakes </figure> </figcaption> <figcaption> <img src="https://figuresource.com/40289/alfonso.jpg" width="720" height="354" alt="The Gracious Host" > <figure> Alfonso serving pancakes </figure> </figcaption>

<figure> <img src="https://figuresource.com/40289/alfonso.jpg" width="720" height="354" alt="The Gracious Host" > <figcaption> Alfonso serving pancakes </figcaption> </figure> (second choice. figure element includes or encapsulates the caption element and other graphical elements)

Which HTML element has the correct structure? <h1>The Headline <h1>The Headline<h1> <h1>The Headline</h1> </h1>The Headline</h1>

<h1>The Headline</h1> (elements should have an opening and closing tag, unless they're empty elements which don't need closing tags)

How do we use HTML elements in combination with each other? <p>Here's some text that <em>should be emphasized.</p></em> <p>Here's some text that </em>should be emphasized.</p></em> <p>Here's some text that <em>should</em> be emphasized.</p> <p>Here's some text that</p> <em>should</em> <p>be emphasized.</p>

<p>Here's some text that <em>should</em> be emphasized.</p> (Tags need to nest smoothly. The emphasis is inside the paragraph, so the em tags are inside the p tags.)

Which tag preserves the spaces, tabs, and line breaks within a piece of text so a poem or piece of code can be presented faithfully? <code> <pre> <br> <p>

<pre> (preserves formatting)

Which elements are used to mark-up code on screen? <monospace> and <program> <code> and <program> <pre> and <code> <pre> and <monospace>

<pre> and <code> (The <pre> element is used for listings where line breaks and other white space need to be preserved, while <code> is more for short snippets inside of other content.)

When we want to convey importance, seriousness, or urgency, which element do we use? <strong> <i> <b> <important>

<strong> (meant for importance)

Which markup is correct? <date time="2025-10-08">October 8, 2025</date> <date>October 8, 2025</date> <datetime time="2025-10-08">October 8, 2025</datetime> <time datetime="2025-10-08">October 8, 2025</time>

<time datetime="2025-10-08">October 8, 2025</time>

How can you mark a quotation as being in a different language from its surrounding text? Create a <blockquote> element with a lang attribute indicating the language for its contents. Use the Unicode characters that properly represent the language that you're using, and the browser will detect it. Use an iframe to embed the quote from a separate document with its language indicated there. You can't - documents can only contain one language at a time

Create a <blockquote> element with a lang attribute indicating the language for its contents. (the lang attribute is key and its easy to apply ot a blockquote for quotations)

What is the most effective way to use bandwidth efficiently when sending images? Create a set of options the browser can choose from using the srcset attribute. Refer to images at the end of the page, so they load last. Leave out the alt text, and use captions on every image. Use the smallest possible image.

Create a set of options the browser can choose from using the srcset attribute. (The srcset attribute lets the browser choose from options that fit the specific situation, minimizing bandwidth consumption while producing attractive results.)

Which is the most powerful and fragile of the browser programming languages? HTML CSS PHP JavaScript

JavaScript (can perform complex logic, but this can get a user into trouble)

How do you create an image that changes content depending on the surrounding layout? Combine the img element and the srcset attribute with CSS selectors. Nest img, source, and srcset information inside of a picture element. Use CSS media queries to insert pictures before or after your img element. Add a JavaScript library that interacts with the resources element

Nest img, source, and srcset information inside of a picture element. (The <picture> element gives you the flexibility you need to change content as well as image size)

What happens when HTML is broken because of a bug in the code? The browser replaces the broken HTML with a generic DIV element. The browser stops rendering the HTML and waits until it's fixed. The browser ignores that part of the code and jumps past it to the next thing it recognizes. The browser guesses what you meant, and does its best to fix the bug itself.

The browser guesses what you meant, and does its best to fix the bug itself. (Browsers were built on the understanding that things can go wrong, and are extremely forgiving.)

by using CSS

The navigation items in the image below are elements in an unordered list. How is the appearance of a navigation bar created? by using class="navbar" in the list tag by creating an image with links inside it by using the tag by using CSS

What is wrong with the following code? <a href="Click Me">http://transferfink.com</a> You should use https instead of http. Click Me contains a blank space. The positions of the link text and the link address have been interchanged.

The positions of the link text and the link address have been interchanged.

What are the best uses for HTML's div and span elements? To create user interfaces that replace semantic HTML. To divide and recombine graphical images. To group elements, or mark text within an element. To meet detailed accessibility requirements.

To group elements, or mark text within an element. (make it easy to create containers or labeled content for styling)

how does ID attribute differ from the class attribute? an id attribute name may only be used once in a document The class attribute can only have one of a limited set of values. The id attribute is numeric. The class attribute can only be applied to paragraphs.

an id attribute name may only be used once in a document (id attribute refers to one specific part of a doc)

When deciding which headline level to use (h1, h2, h3, h4, h5, h6) which of these statements is true? We can only use each level of headline exactly one time on each webpage. Every headline for a certain level will look like all the others — for instance, every h3 will look exactly like every other h3. We should use the level of headline that makes sense, based on the semantic meaning of content. We should adjust our headline levels based on how they look to give us the right size

We should use the level of headline that makes sense, based on the semantic meaning of content. (content works best when markup follows meaning)

List Demonstration <dt> object </dt> <dd> an item or actualized concept </dd> <dt> scope </dt> <dd> realm or domain of validity </dd> <dt> tone </dt> <dd> degree of specification adherence </dd> <h1> List Demonstration </h1> <ol> <dt> object </dt> <dd> an item or actualized concept </dd> <dt> scope </dt> <dd> realm or domain of validity </dd> <dt> tone </dt> <dd> degree of specification adherence </dd> </ol> <h1> List Demonstration </h1> <dl> <dt> object </dt> <def> an item or actualized concept </def> <dt> scope </dt> <def> realm or domain of validity </def> <dt> tone </dt> <def> degree of specification adherence </def> </dl> <h1> List Demonstration </h1> <dl> <dt> object </dt> <dd> an item or actualized concept </dd> <dt> scope </dt> <dd> realm or domain of validity </dd> <dt> tone </dt> <dd> degree of specification adherence </dd> </dl>

What code produces the list shown in the image?

When might a good time to use Developer Tools? Something seems wacky and you aren't sure what is causing it. When you need to figure out how to apply CSS or JavaScript to a certain part of the markup. all of these answers When you want to see the DOM the browser has created from your HTML.

all of these answers (Developer Tools give you a powerful close-up behind-the-scenes look at your material.)

In the tag below, what do we call "datetime"? <time datetime="2024-03-07"> March, 7, 2024</time> a block a variable an in-tag specification an attribute

an attribute

when should we use an ARIA attribute? any time the existing markup makes things confusing in the accessibility tree on all navigation and buttons on any interface element that's important to users on every element in the DOM

any time the existing markup makes things confusing in the accessibility tree (ARIA is used to clarify to the accessibility tree what is happening with a particular element, set of elements, or interface. If something is broken, ARIA can be a way to fix it.)

In HTML, when would you use the character &nbsp; ? when you're creating an emoji anytime you have smtg that stands along as its own entity, sepeate from other characters when you want smtg to be secret or hidden until later anytime you want characters to appear as simple text instead of being parsed as code

anytime you want characters to appear as simple text instead of being parsed as code

How does a user gain access to the debugging features of a browser? by starting a troubleshoot window by accessing developer tools by saving the browser window to an HTML file by creating a DOM tree window

by accessing developer tools (several ways to inspect HTML that the browser is interpretting)

Why is web or browser programming broken up into three parts? a. to execute as quickly as possible b. accomodate multiple programming styles c. be resilient to changes in tech d. to be robust with respect to dates and year

c. be resilient to changes in tech

Besides visual appearance, what is most important about headline levels? appropriate indentation choosing a base font for the entire page the use of bold or italic fonts creating an organizational hierarchy

creating an organizational heirarchy

how does the break tag differe from most other inline and block tags? it does not require less than or greater than symbols to enclose it it does not require closing tag it can be used for hypenation it can only be used within a paragraph

it does not require closing tag

why do you need to specify desired language for HTML content? so correct dictionaries and pronounciations are used so that content can be compressed using appropriate algorithm so the UTF-8 character set will be used when appropriate so the direction of text can be specified

so correct dictionaries and pronounciations are used

Why is it important to remember to use closing tags? so it is clear where elements end to mark the end of paragraphs to mark the final element of a page so the next element can be opened

so it is clear where elements end

Which version of the image in the following code would be the slowest to load? <img src="https://storage.net/40785/sunsetA.jpg" alt="Beach at sunset" width = "512" height="128" srcset="https://storage.net/40785/sunsetB.jpg 1.5x, https://storage.net/40785/sunsetC.jpg 3x, https://storage.net/40785/sunsetD.jpg 2x" > sunsetA.jpg sunsetB.jpg sunsetD.jpg sunsetC.jpg

sunsetC.jpg (largest image loads the slowest)

What sort of efforts require the use and understanding of ARIA attributes? those involving interactive drawings those involving audio content those involving accessibility issues those involving graphical characters

those involve accessibility issues (it may be essential to funciontality that all users can access specific content)

why should you spend effort optimizing image sources and corresponding display attributes? to have the best resolution adn contrast possible in teh displayed images to min the amt of code required to display images to reduce the amt of calcs reqiured for determining which image to display to have the best compromise between image quality and download speed

to have the best compromise between image quality and download speed

why should you include height and width specifications for all images? so that the images will be downloaded completely to maintain orig aspect ratio to make page layout more efficient to speed up the image downloads

to make page layout more efficient (the size of an image can be learned before download is complete)