Web Layout

Question 1

When to use ?

Answer 1

The main element is used to wrap (you guessed it) the main content, and there should be only one per page. It’s meant to surround the information related to your page’s central topic. It’s not meant to include items that repeat across pages, like navigation links or banners.

Question 2

Main tag’s embedded assistive technology feature…

Answer 2

The main tag has an embedded feature assistive technology can use to navigate to the main content quickly.

If you’ve ever seen a “Jump to Main Content” link at the top of a page, using the main tag automatically gives assistive devices that functionality.

Question 3

article

Answer 3

article is a sectioning element and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles.

Question 4

Can this content stand alone as an article?

Answer 4

A judgment call, but ask yourself if you removed all surrounding context, would that content still make sense?

Similarly, for text, would the content hold up if it were in an RSS feed?

Question 5

section

Answer 5

a section is for grouping thematically related content.

Question 6

can use sections inside articles

Answer 6

They can be used within each other, as needed. For example, if a book is the article, then each chapter is a section. When there’s no relationship between groups of content, then use a div.

Question 7

nav

Answer 7

This tag is meant to wrap around the main navigation links in your page. Element has embedded landmark feature for easy screen reader navigation.

Question 8

what if you want a nav menu at bottom of page?

Answer 8

If there are repeated site links at the bottom of the page, it isn’t necessary to markup those with a nav tag as well. Using a footer (covered in the next challenge) is sufficient.

Question 9

footer

Answer 9

It’s primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page. Similar to header and nav, the footer element has a built-in landmark feature that allows assistive devices to quickly navigate to it.

Question 10

&copy

Answer 10

how to write the copyright symbol

i.e. © 2018 Camper Cat

Question 11

audio

Answer 11

The audio tag supports the controls attribute.

This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn’t need a value, its presence on the tag turns the setting on.

Here’s an example:

Question 12

does audio content need alt text?

Answer 12

HTML5’s audio element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript.

Question 13

figure

and

figcaption

Answer 13

Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. Wrapping these elements together gives a two-fold accessibility boost by semantically grouping related content and providing a text alternative explaining the figure.

Question 14

label

Answer 14

The label tag wraps the text for a specific form control item, usually the name or label for a choice. It ties meaning to the item to make it more readable.

Question 15

for

Answer 15

for attribute on a label tag explicitly associates that label with the form control and is used by screen readers.
The value of the for attribute must be the same as the value of the id attribute of the form control. Here’s an example:

Name:

Question 16

viewport units

Answer 16

Instead of using em or px to size text, you can use viewport units for responsive typography. Viewport units, like percentages, are relative units, but they are based off different items. Viewport units are relative to the viewport dimensions (width or height) of a device, and percentages are relative to the size of the parent container element.

Question 17

The four different viewport units

Answer 17

vw (viewport width): 10vw would be 10% of the viewport’s width.
vh (viewport height): 3vh would be 3% of the viewport’s height.
vmin (viewport minimum): 70vmin would be 70% of the viewport’s smaller dimension (height or width).
vmax (viewport maximum): 100vmax would be 100% of the viewport’s bigger dimension (height or width).