HTML Flashcards

1
Q

What does HTML stand for?

A

Hyper Text Markup Language

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

What are the four parts of HTML elements?

A
  1. Element Itself
  2. Opening Tag
  3. Content
  4. Closing Tag
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What does the attribute ‘href’ mean?

A

Hyperlink Reference

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

How many heading elements are there in HTML?

A

Six. With 1 being the largest, and 6 being the smallest.

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

What is the ‘< div >’ tag used for?

A

The ‘< div >’ tag is used for grouping HTML elements together. It also allows for a neat, organized look.

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

What is an attribute?

A

Attributes are used to add information or modify the behavior of HTML elements.

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

What do attributes consist of?

A

A name and a value, expressed as: ‘ id=”example” ‘

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

Where are attributes located?

A

In the opening tag of an element.

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

What are two different ways you can display text in HTML?

A

With the ‘< span >’ and ‘< p >’ tags. (p for paragraph) The ‘< span >’ tag serves as a hook for CSS or JavaScript manipulation while the ‘< p >’ tag holds plain text.

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

What do you add to any tag that is the child of a different tag?

A

Two spaces of indentation for readability.

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

Typically, what does the ‘< em >’ and ‘< strong >’ tags do?

A

The ‘< em >’ (emphasize) tag adds italics. And the ‘< strong >’ tag makes the text bold.

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

How do you modify spacing in the browser?

A

Use the ‘ < br >’ (line break) tag.

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

How do you create an unordered list in HTML? (Bullet point list)

A

Use the ‘< ul >’ (unordered list) tag. Within the opening and closing unordered list tags you should have ‘< li >’ (list) tag to hold raw text.

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

How do you create an ordered list in HTML? (Numbered list)

A

Use the ‘< ol >’ (ordered) list tag. Within the opening and closing ordered list tags you should have ‘< li >’ (list) tags to hold raw text.

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

What is a self closing tag in HTML?

A

A tag that does not require a closing tag. They are formatted like so: ‘< img />’ (Self closing tags do not require the forward slash)

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

How do you add an image to your browser using HTML?

A

Use the ‘< img />’ tag. The image tag requires a src (source) attribute and the value is typically the images URL.

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

How do you add a description of an image to the ‘< img />’ tag? (Typically used for screen readers but can also be used in case the image doesn’t load and can also serve to increase your search engine optimization)

A

You add the alt attribute.

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

How do you add a video to your website using HTML?

A

Use the ‘< video (URL) (height=””)(width=””)(controls) >’ tag with the accompanying attributes. Be sure to include a closing tag.

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

What are some benefits of coherent structuring?

A
  1. Readability
  2. Accessibility
  3. Ease of Styling
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

How do you let a web browsers know that you are using HTML?

A

By starting with a Document Type Declaration. This is the declaration: ‘< !DOCTYPE html >’

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

How do you add HTML structure and content?

A

With the ‘< html >’ opening and closing tag.

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

How do you give the browser information about your website?

A

Use the ‘< head >’ tag you can add metadata to the website.

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

What displays on the webpages tab and is always in the ‘< head >’ tag?

A

The ‘< title >’ element and the content it holds.

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

How do you add a link to a webpage?

A

Using the ‘< a >’ (anchor) element with the ‘href’ attribute.

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

How do you specify how a link should open?

A

Use the ‘target’ attribute in the anchor (‘< a >’) tag.

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

How do you make a link open in a new tab?

A

Use the ‘target’ attribute in the anchor tag (‘< a >’) with the value of ‘_blank’.

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

Are attributes order specific?

A

No

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

How do you tell the browser to look for a specific file in the folder when using a hyperlink reference?

A

Using “ ./ “ tells the browser to look for the linked file in the current folder.

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

How do you add a hyperlink to an image?

A

Wrap the ‘< img >’ tag inside of the ‘< a >’ tag.

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

How can you send a user to a specific part of your webpage?

A

Use a hyperlink reference with the value of your corresponding ‘< div >’ id plus a # sign. So if your div id is “Introduction” then your link is formatted:
‘< a href=”#introduction”>Introduction< /a >
That will link you to the ‘< div id=”introduction >’ part of the page.

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

Who is responsible for maintaining the style and standards of HTML?

A

The World Wide Web Consortium or W3C

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

How do you write a comment in HTML?

A

With the <!-- opening and --> closing tags.

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

How do you specify whether a table heading is meant for a row or column?

A

Use the ‘scope’ attribute within the ‘< th >’ tag and set it’s value to ‘row’ for a row or ‘col’ for a column.

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

In a table, how do you make data span multiple columns?

A

Use the attribute ‘colspan’ with an integer value greater or equal to 1.

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

In a table, how do you make data span multiple rows?

A

Use the attribute ‘rowspan’ with an integer value greater or equal to 1.

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

How do you section off a table?

A

Use the ‘tbody’ element (table body).

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

How do you section off the heading of a table?

A

Use the ‘< thead >’ element.

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

What is the ‘< main >’ element separate from?

A

The ‘footer’ and ‘nav’ elements. This is because the ‘main’ element only holds the principle content of a webpage.

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

What does the ‘< section >’ element do?

A

It sections groups of code that have similar information and the same theme

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

What does the ‘< article >’ element do?

A

The article element marks the beginning and end of an article. It holds text, images, etc that should all be together in an article format. It helps people with screen readers understand where it begins and ends

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

What are some common uses for the ‘< aside >’ element?

A

Bibligraphies
Endnotes
Comments
Pull quotes
Editorial sidebars
Additional information

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

What is the element ‘< figure >’ used for?

A

To encapsulate images, illustrations, diagrams etc which is referenced in the main flow of the document

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

How do you group an image with a caption?

A

Use the ‘< figcaption >’ element. This makes it easy to move throughout the code without interrupting the flow of the document

44
Q

What element embedds audio into your webpage?

A

The ‘< audio >’ element with the ‘src’ attribute

45
Q

What attribute helps the browser identify whether or not your audio is supported?

A

The ‘type’ attribute

46
Q

What are some attributes that can alter the ‘< video >’ element?

A
  1. Controls
  2. Autoplay
  3. Loop
47
Q

Where do you add text that you want displayed if a video is not supported by the browser?

A

Between the opening and closing ‘< video >’ tags

48
Q

What element can display videos, audio files, gifs, etc?

A

The ‘< embed >’ element

49
Q

What is semantic HTML?

A

Tags/elements that give more context about their content

50
Q

What four elements create the basic structure of a webpage?

A
  1. < header >
  2. < nav >
  3. < main >
  4. < footer >
51
Q

What tag sections an area of the document you want to have same theme?

A

< section >

52
Q

What tag holds related but non essential information in an article?

A

< aside >

53
Q

What tag encapsulates all types of media?

A

< figure >

54
Q

What describes the media in the ‘< figure >’ element?

A

< figcaption >

55
Q

What is universal between the video, audio, and embed elements?

A

They all use the ‘src’ attribute to link the source of the content.

56
Q

What is different about the ‘< embed >’ element than the
‘< video >’ and ‘< audio >’ elements?

A

’< embed >’ is a self closing tag

57
Q

Where is the ‘< nav >’ element usually located?

A

In the ‘< header >’ or ‘< footer>’ elements

58
Q

What are ‘forms’ in HTML?

A

Forms are used for gathering and sending user input to an external source for processing.

59
Q

What are two things that a form must include?

A

The target location and what HTTP request to make.

60
Q

What does the ‘action’ attribute do in the form element?

A

Determines where the information is sent

61
Q

What does the ‘method’ attribute do in the form element?

A

The method attribute determines how to information is sent and processed.

62
Q

How do you allow input in the ‘< form >’ element?

A

The ‘< input >’ element

63
Q

How do you determine what kind of data the ‘< input >’ element can receive and how it renders on the webpage?

A

The ‘type’ attribute

64
Q

What is the default value of the type attribute?

A

text

65
Q

What does the attribute type’s ‘text’ value do?

A

It renders a text field that users can type into

66
Q

What attribute in the ‘< input >’ element ensures the information is sent when the form is submitted?

A

The ‘name’ attribute

67
Q

Is input a self closing tag?

A

Yes

68
Q

What is the most common HTTP request?

A

A GET request

69
Q

What element do you use to explain what an input element is asking for?

A

A ‘< label >’ element

70
Q

How do you associate a label with an input element?

A

Use the ‘id’ attribute for the input, and the ‘for’ attribute for the label element. ‘For’ should be equivalent to the associated input’s ‘id’.

71
Q

What attribute for the ‘< input >’ element changes the characters to asterisks or dots for privacy?

A

‘type = password’

72
Q

What attribute for ‘< input >’ adds arrows and counts up or down in the form box?

A

The ‘step = 1’ attribute. 1 can be different.

73
Q

What attribute for ‘< input >’ creates a slider?

A

The ‘range’ attribute. Use the ‘min’ and ‘max’ attributes to make the range.

74
Q

What attribute effects the fluidity of the slider in an input element?

A

The ‘step’ attribute.

75
Q

What attribute for ‘< input >’ creates a checkbox?

A

The ‘checkbox’ attribute.

76
Q

What is a radio button and how do you add it?

A

A radio button is a button that switches between two choice depending on which one is selected. To add a radio button use the type = “radio”

77
Q

What attribute for ‘< input >’ creates a checkbox?

A

The ‘checkbox’ attribute.

78
Q

What is a radio button and how do you add it?

A

A radio button is a button that switches between two choice depending on which one is selected. To add a radio button use the type = “radio”

78
Q

How do you create a dropdown list?

A

Use the ‘< select >’ element with nested ‘< option >’ elements.

79
Q

What attribute for ‘< input >’ creates a checkbox?

A

The ‘checkbox’ attribute.

79
Q

How do you create a dropdown list?

A

Use the ‘< select >’ element with nested ‘< option >’ elements. Use the ‘value=’ attribute to populate the choice. Be sure to include the option ‘None’ if it applies.

80
Q

How do you create a dropdown list where the results can be filter by text search?

A

With the ‘< datalist >’ element

81
Q

What attribute for ‘< input >’ creates a checkbox?

A

The ‘checkbox’ attribute.

81
Q

How do you create a dropdown list?

A

Use the ‘< select >’ element with nested ‘< option >’ elements. Use the ‘value=’ attribute to populate the choice. Be sure to include the option ‘None’ if it applies.

82
Q

What element creates an area to type into instead of just one line?

A

The ‘< textarea >’ element

83
Q

What element creates an area to type into instead of just one line?

A

The ‘< textarea >’ element with it’s associated rows and col attributes to determine the size of the area.

84
Q

What attribute for ‘< input >’ creates a checkbox?

A

The ‘checkbox’ attribute.

84
Q

How do you create a dropdown list?

A

Use the ‘< select >’ element with nested ‘< option >’ elements. Use the ‘value=’ attribute to populate the choice. Be sure to include the option ‘None’ if it applies.

85
Q

What attribute for ‘< input >’ creates a checkbox?

A

The ‘checkbox’ attribute.

85
Q

What element creates an area to type into instead of just one line?

A

The ‘< textarea >’ element with its associated rows and col attributes to determine the size of the area.

85
Q

How do you create a dropdown list?

A

Use the ‘< select >’ element with nested ‘< option >’ elements. Use the ‘value=’ attribute to populate the choice. Be sure to include the option ‘None’ if it applies.

86
Q

What attribute for ‘< input >’ creates a checkbox?

A

The ‘checkbox’ attribute.

86
Q

What element creates an area to type into instead of just one line?

A

The ‘< textarea >’ element with its associated rows and col attributes to determine the size of the area.

86
Q

How do you create text in the ‘< textarea >’that disappears once replaced?

A

The ‘placeholder=’ attribute with the accompanying text.

87
Q

How do you create a dropdown list?

A

Use the ‘< select >’ element with nested ‘< option >’ elements. Use the ‘value=’ attribute to populate the choice. Be sure to include the option ‘None’ if it applies.

88
Q

How do you create a submit button?

A

Use the ‘< input >’ element with the type=”submit” attribute and the ‘value’ attribute whose value will be displayed on the button.

89
Q

How do you create a dropdown list?

A

Use the ‘< select >’ element with nested ‘< option >’ elements. Use the ‘value=’ attribute to populate the choice. Be sure to include the option ‘None’ if it applies.

90
Q

What attribute for ‘< input >’ creates a checkbox?

A

The ‘checkbox’ attribute.

90
Q

What element creates an area to type into instead of just one line?

A

The ‘< textarea >’ element with its associated rows and col attributes to determine the size of the area.

91
Q

What attribute for ‘< input >’ creates a checkbox?

A

The ‘checkbox’ attribute.

91
Q

What element creates an area to type into instead of just one line?

A

The ‘< textarea >’ element with its associated rows and col attributes to determine the size of the area.

92
Q

What are two different types of form validation?

A
  1. Sever side
  2. Client side
93
Q

How do you require an input for submission?

A

Use the ‘require’ attribute in the ‘< input >’ element

94
Q

How do you set a specific text length/character amount?

A

Use the minlength and maxlength attributes with their associated amounts in the ‘< input >’ element.

95
Q

When should you use the POST method in HTML form submission?

A

Anytime you are creating a login feild.

96
Q

How do you require an input to follow specific guidelines?

A

Use the ‘pattern’ attribute in the ‘< input >’ element and assign it a regular expression or ‘regex’ (JavaScript).