html basics

Question 1

what are and when should elements be used?

Answer 1

represents an independent article in a web page. It should only wrap content that can be plucked out of your page and distributed in a completely different context

Question 2

what are and when should elements be used?

Answer 2

keeps our document outline the exact same while lending it some extra semantic structure.

like an , except it doesn’t need to make sense outside the context of the document. Though heading elements split the document into sections sometimes we need wrappers around the content.

Question 3

what is a side effect of using

Answer 3

By adding those elements, we’re telling the document outline that it should be defined by the nesting structure of the elements instead of the heading levels. This basically means that each can have its own set of <h1> through <h6> headings that are independent of the rest of the page.

BUT due to screen readers and such it is better to use heading levels dispite using sections</h6></h1>

Question 4

what should sections contain?

Answer 4

at least one heading element, otherwise it will add an untitled section to you document

Answer 5

lets you mark up the various navigation sections of your website. This goes for the main site navigation, links to related pages in a sidebar, tables of content, and pretty much any group of links.

Answer 6

denotes introductory content for a section, article, or entire web page.

Headers are only associated with the nearest sectioning element. This means that you can use multiple elements to add introductory content to different parts of a document

Answer 7

like headers, but come at the bottom. They are associated with the nearest section element

Answer 8

for tangentially related content

appropriate for highlighting definitions, stats, sidebars, advertisements, or quotations

Answer 9

represents either a time of day or a calendar date. Providing a machine-readable date makes it possible for browsers to automatically link it to users’ calendars and helps search engines

Question 10

<address></address>

Answer 10

It defines contact information for the author of the article or web page in question. <address> should not be used for arbitrary physical addresses.</address>

Answer 11

represents a self-contained “figure”, like a diagram, illustration, or even a code snippet

Question 12

what is the difference between and alt=””

Answer 12

alt should serve as a text replacement for the image, while is a supporting description displayed with either the image or its text-based equivalent.

Question 13

how do you define a root-relative link?

Answer 13

they start with a forward slash ‘/search’

Question 14

when should we use png?

Answer 14

use for anything that’s not a photo or animated

Question 15

when should we use gifs?

Answer 15

when we need animation

Question 16

when should we use jpg?

Answer 16

for photos, they do not support transparancy but are a smaller size with a large color range

Question 17

when should we use svg?

Answer 17

not great for images with lots of text but should be used as much as possible otherwise

Question 18

how do you write a media query?

Answer 18

@media screen only and (min-width: 500px) {}

Question 19

what does “screen only” mean in a media query?

Answer 19

The only screen “media type” means that the contained styles should only be applied to devices with screens (ie not on print)

Question 20

what does

do?

Answer 20

allows mobile devices to use mobile layouts (ie use @media queries)

Question 21

what does srcset do?

Answer 21

lets us present our high-resolution image only to retina devices, falling back to the low-resolution version for standard screens.

Question 22

how do we use srcset?

Answer 22

<img></img>

OR

<img></img>

Question 23

where does x1, x2 in srcsets fall short?

Answer 23

if the user has a retina smartphone, it’ll download the high-resolution image even when the standard version would suffice.

Question 24

when do we need to include the sizes attribute?

Answer 24

when using dimension bases srcsets

Question 25

when might we use a tag?

Answer 25

when we want to send in different images for different screen sizes. When we want to use webp or other image types with little support

Question 26

tag example

Answer 26

<img></img>

Question 27

responsive image recommendation

Answer 27

stick to the 1x and 2x version of srcset for images less than 600 pixels wide, use the srcset plus sizes method from the previous section for bigger photos, and reserve for when you’re trying to do something real fancy

Question 28

how can you target a text input in CSS?

Answer 28

input[type=”text”]