HTML Tags Flashcards

1
Q

Headings

A

Labels content importance

< h1 > to < h6 >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

To organize big blocks of text

A

Paragraph

< p >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

For short text (ex. 1 to 2 words )

A

Span

< span >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

You want to keep white space between your tags

A

Preserves White space

< pre >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

You want to put stress emphasis on a piece of content

A

Stress Emphasis

< em >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

You want to make a piece of content have strong importance

A

< strong >

Strong importance

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

< em > vs < strong >

A

Em will also italicize text

Strong will bold text

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

You want make to a list with numbers/order

A

Ordered list

< ol >
___ < li > item 1 < / li >
___ < li > item 2 < / li >< / ol >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

You want to make a list but don’t care about order

A

Unordered list

< ul >
___ < li > item 1 < / li >
___ < li > item 2 < / li >< / ul >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What are the main, different containing elements?

A

Div, section, article, aside, header, footer, nav (navigation)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Why should you avoid divs if you don’t have to?

A

They don’t have semantic value. Many other more meaningful alternatives.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What are Deprecated Elements?

A

Elements we cant use anymore because they’re outdated.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

You want to link an image

A

< img src = “image location” alt = “name of image” >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

< img src = “image location” alt = “name of image” >

What is the significance of the alt?

A

If the image link breaks, the alt is a backup that will label what image should’ve been there.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

You want to hyperlink a text

A

< a > href = “ url “ > content < / a >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Tag that encompasses EVERYTHING on an HTML document.

A

Root tag

< html >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

You want to set the language of your site to English. How?

A

Put attribute in root tag:

< html lang = “ en “ >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

You want to make section that helps users move around your webpage (ex. Links to different pages)

A

Navigation

< nav >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

You want to make boxes for people to write their information

A

Form

< form >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

You made a form for people. How to include a box for email? Phone?

A

< form >
__ < input type = “ tel “ >
__ < input type = “ email “ >< / form >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

You made an input for emails. How do you label and connect that label to your input?

A

connect w/ an ID.

< label for = “ id name “ > email: < / label >< input id = “ id name “ type = “email “ >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What are the different ways to tag quotes and citations ( three)

A

< cite >

< q >< blockquote >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

< cite > vs < q > vs < blockquote >

A
Cite = reference creative work, author or resource
Q = short inline quotes
Blockquote = longer external quotes
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Your are referencing an author’s name, URL, title of work. What tag?

A

< cite >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

You want to use a dialogue quote from a famous person. What tag?

A

< q >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

You want to reference a big block of text from outside source.

A

< blockquote >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Cite can be an element AND an attribute. What’s the difference?

A

Attribute cite = same as an href

Element cite = wraps name/ source of quote

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

You want to make a list, but where all items have a description (or multiple items have the same description or reverse)

A

< dl >

_ < dt > term < / dt >
_ < dd > description of the term < / dd >

29
Q

How to add audio files.

A

< / audio >

30
Q

What attributes can an audio tag have?

A

Autoplay
Controls
Loop
Preload

31
Q

You want to add audio that plays automatically on a page, but doesn’t show.

A

< audio src = “ # “ Autoplay > < / audio >

32
Q

You want to add audio on a page with controls (play stop volume…)

A

< audio src = “ # “ controls > < / audio >

33
Q

You want to add audio on your page that plays again and again.

A

< audio src = “ # “ loop > < / audio >

34
Q

What does the preload attribute do to audio tags? What values does it have?

A

Preload = what information is loaded from audio.

Values = none, metadata, auto (all)

Set to none/metadata to save bandwidth

35
Q

How do you make sure your audio files are supported by all browsers?

A

Use backups in different formats (mp3, ogg, wav)

36
Q

How to add videos to your page?

A

< video src = “ # “ > < / video >

Attributes = loop, autoplay, controls, preload

37
Q

You want to add a video to your page and control how big it will look like?

A

Add video and change the height / width in CSS

38
Q

You want to add a video to your page and choose a front picture before it plays.

A

< video src = “ # “ poster = “ # “ > < / video >

39
Q

What are inline frames? When and how do you use them?

A

You embed another html page onto your html page.

For medias from external sites ( YouTube, google maps, Vimeo… )

< iframe src = “ # “ > < / iframe >

40
Q

You want a containing element to wrap and semantically label your media tags (ex. Images, audio, videos)

A

< figure >

_ < img >

41
Q

Why do we use figure elements?

A

To wrap/ contain all self- containing elements (mostly media)

42
Q

You want to have a caption or description for your images or other media

A

< figure >
_ < img src = “ # “ alt = “ # “ >
_ < figcaption > description content < / figcaption >< / figure >

43
Q

What section in HTML is specifically for taking information from users?

A

< form >

44
Q

< form action = “ / login “ method = “ post “ >

What do the attributes, “action” and “method” mean?

A

Action = url or location all form information will go to.

Method = how the information will be sent to the server.

45
Q

You want to create a form that accepts people’s usernames. How?

A

< form >

_ < input type = “ text “ name = “username” >< / form >

46
Q

What are common type attributes for an input tag?

A

Date, time, email, tel, number, url

47
Q

You want to create a box where people can add their comments. How?

A

< form >

_ < textarea name = “comment “ > Add your comment here < / textarea >

48
Q

Text area vs input

A

Text area = multiple line box

Input = single lines

49
Q

You want to make a form that lets users make 1 choice from many options.

A

< input type = “ radio “ name = __ value = “choice 1” checked > “choice 1”
< input type = “ radio “ name = __ value = “choice 2” > “choice 2”
< input type = “ radio “ name = __ value = “choice 3” > “choice 3”

50
Q

You want to create a form where users can check multiple choices from multiple options/

A

< input type = “ checkbox “ name = __ value = “choice 1” checked > “choice 1”
< input type = “ checkbox “ name = __ value = “choice 2” > “choice 2”
< input type = “ checkbox “ name = __ value = “choice 3” > “choice 3”

51
Q

How to make a drop down list for users to select an option

A

< select name = “ day “ >
_ < option value = “ option 1 “ selected > option 1 < / option >

_ < option value = “ option 2 “ selected > option 2 < / option >

_ < option value = “ option 3 “ selected > option 3 < / option >

52
Q

How to make a submit button, to submit input data from users?

A

< input type = “ submit “ name = “ submit “ value = “ send “ >

53
Q

You want to allow users to attach and submit files.

A

< input type = “ file “ name = “ file “ >

54
Q

What 3 ways to organize your form elements?

A

Labels
Field sets
Legends

55
Q

How to you label a form input tag?

A

< label for “ ID name “ > label name < / label >

< input type = “ # “ name = “name of input “ id = ___ “ >

56
Q

What’s an easier way to label your inputs than using ID’s?

A

Wrap the input in the label. Ex.

< label >
_ < input type = “radio” name = “day” value = “Friday” checked > LABEL NAME
< / label >

57
Q

What containing element is for all your forms and inputs?

A

< fieldset >

58
Q

You made a fieldset for all your forms and inputs. What element is used to label it?

A

< fieldset >
_ < legend > login < / legend >
_ < label >
_ < form >

59
Q

You want to disable a form or input. How?

A

< input type = “ text “ disabled >

60
Q

You have a form and an input, and you want to put a sample text inside that will disappear when people start typing.

A

< input type = “ email “ name = “ email - address “ placeholder = “name@email.com” >

61
Q

You want to make it required for people to submit a form. How?

A

Use Boolean attribute, “ required “

62
Q

Which is a bigger containing element? Form or fieldset?

A

Form

63
Q

What are the minimum elements you need to make a table?

A

< table >< tr > = table row

< td > = table data

64
Q

Tr vs td vs th

A

Tr = table row

Td ( table data ) is nested inside tr

Th = heading name of each row

65
Q

You want to make a table header and tag that it belongs to a specific column for “dates”

A

< th scope = “ col “ > dates < / th >

66
Q

You want to title your table, “top cool places”

A

< table >

_ < caption > top cool places < / caption >

67
Q

Th vs thead vs tfoot

A

Thead = biggest containing element

Th = headings

Tfoot = opposite of thead

68
Q

Td vs tbody

A

Td = simple data

Tbody = big containing section in a table

69
Q

In a table, how to combine/merge cells in a column? Or a row?

A

Use colspan or rowspan attribute

< td colspan = “ 3 “ > < / td >
< / th >