HTML Flashcards
(170 cards)
1
Q
What does HTML stand for?
A
HyperText Markup Language
2
Q
What is a markup language?
A
a computer language that defines the structure and presentation of raw text
3
Q
What is HyperText?
A
text displayed on a computer or device that provides access to other text through links, also known as hyperlinks
4
Q
What is HTML composed of?
A
Elements
5
Q
What is the HTML element for paragraph?
A
<p> (opening tag)
| </p>
(closing tag)
6
Q
What is an HTML element made of?
A
a tag and content
7
Q
How is HTML organised in relationships?
A
as a collection of family tree relationships
8
Q
What is an element called when it is contained within another element?
A
The child of that element, and the child element is nested inside the parent element
9
Q
The child element is ____ inside the parent element?
A
Nested
10
Q
What is the relationship between elements and their ancestor and descendent elements known as?
A
Hierarchy
11
Q
What are elements at the same level called?
A
Siblings
12
Q
How many headings / heading elements are there in HTML?
A
6
13
Q
What are the 6 headings in HTML?
A
< h1 > — used for main headings. All other smaller headings are used for subheadings
< h2 > < h3 > < h4 >< h5 > < h6 >
13
Q
What are the 6 headings in HTML?
A
<h1> — used for main headings. All other smaller headings are used for subheadings
</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
14
Q
Why is <div> useful?</div>
A
It it useful for grouping elements together
15
Q
What is the < div > element short for, and what does it do?
A
<div> is short for division and a <div> contains or divides the page into sections</div></div>
16
Q
Do <div>s have a visual representation?</div>
A
No
17
Q
How do <div>s help with style?</div>
A
<div>s allow you to group HTML elements to apply the same styles for all HTML elements inside</div>
18
Q
How do you ensure readability with <div>s?</div>
A
Add two spaces of indentation
19
Q
What is an attribute?
A
Attributes are content added to the opening tag of an element
20
Q
What two parts are attributes made up of?
A
the name of the attribute
the value of the attribute
21
Q
What does the id attribute do?
A
specify different content
come back to add more
22
Q
What do attributes do?
A
Attributes can be added to the opening tag of an HTML element to change its default behavior or provide additional data about it
23
Q
What do attributes consist of?
A
Attributes consist of a name and a value in the format name=”value”:
24
How do you display text in HTML?
with a paragraph < p > or a span < span >
25
What is used for?
are used to separate small pieces of content that are on the same line as other content
26
When is it best to use < span > < /span > ?
when you want to target a specific piece of content that is inline, or on the same line as other text
(use < div > when want to divide your content into blocks)
27
What HTML tag emphasises text?
< em >
28
What HTML tag highlights important text?
< strong >
29
How is < em > usually manifested in a browser?
in italics
30
How is < strong > usually manifested in a browser?
in bold
31
Does the spacing between code in an HTML file affect the positioning of elements in the browser?
No
32
How do you modify spacing of your code in the browser?
Use HTML line break element - < br >
33
What is unique about < br >
it is only composed of a starting tag (no closing tag - < /br > does NOT exist)
34
What is the HTML tag for an unordered list?
35
What tag must be used with the unordered list < ul > < /ul> ?
the list item tag < li >
36
What is different about ordered lists
- compared to unordered lists
- ?
Ordered lists are numbered
37
What tag do you use to add images?
< img >
38
What is the closing tag for ![]()
?
Trick question, ![]()
is a self-closing tag - the end of the ![]()
tag has a forward slash ![]()
, but not always
39
What is ![]()
's required attribute?
src
40
What is src, ![]()
's required attribute?
the image source
![]()
41
What does URL stand for?
uniform resource locator (URL)
42
What does the alt attribute mean?
alternative text
43
How do you use the alt attribute with ![]()
the alt attribute can be added to the image tag just like the src attribute, and the value of alt should be a description of the image:
![]()
44
Give 3 purposes of the alt attribute
1. If an image fails to load on a web page, a user can mouse over the area originally intended for the image and read a brief description of the image. This is made possible by the description you provide in the alt attribute.
2. Visually impaired users often browse the web with the aid of screen reading software. When you include the alt attribute, the screen reading software can read the image’s description out loud to the visually impaired user.
3. The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot “see” the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site.
45
When should you not use the alt attribute?
When the image on the web page is not one that conveys any meaningful information to a user
46
What is the element for videos in HTML?
< video >
47
How does the < video > element differ from the < img > element?
The < video > element requires a closing tag - < /video >
48
How do you tell the browser to include basic video controls?
with the controls attribute
49
What is this: < !DOCTYPE html >
document type declaration
50
Why do we need to write a document type declaration with HTML?
to let web browsers know that we are using HTML
51
How do you save HTML code as a file?
with the .html file extension
52
What is the < html > element?
html
53
What does the < head > element contain?
metadata for a web page
54
what is metadata in HTML?
Metadata is information about the page that isn’t displayed directly on the web page
55
What does a browser's tab display?
what's written inside the < title > element
56
Where does the < title > tag go?
always inside the < head >, as metadata
57
How do you link to other web pages?
using the anchor element - < a >
58
What is needed to complete the anchor - < a > - element?
an href attribute
59
what does href stand for?
hyperlink reference
60
What does the target attribute do?
specifies how a link should open
61
what is needed for a link to open in a new window?
the target attribute requires a value of _blank
62
in multi-page static websites, where are HTML files stored?
in the root directory / a main folder where all the html files are stored
63
What is a relative path?
A relative path is a filename that shows the path to a local file - a file on the same website (such as ./index.html) - versus an absolute path (a full URL).
The ./ in ./index.html tells the browser to look for the file in the current folder.
64
How do you turn an image < img > into a link?
by wrapping the < img > element with the anchor < a > element
eg:
![]()
65
what tools are available to visualise relationships between elements?
whitespace and indentation
66
Why is whitespace useful?
because space in the code doesn't translate to space in the body of the web page
67
How does the World Wide Web Consortium suggest creating indentation in your code?
With two spaces
68
How do you code comments into HTML?
< !-- opens comments and is closed by -- >
69
How many < body > elements can there be in an HTML document?
Only 1
70
What should always be your first line of code in an HTML document?
< !DOCTYPE html >
71
How do you create a deadlink?
href = "#"
72
What element do you use to create a table?
< table >
73
How do you create rows in a table in HTML?
using the table rows element - < tr >
74
What is the table data element?
< td >
75
How do you create a table heading?
< th >
76
Where do you put table headers?
within a table row
77
what values can the scope attribute take?
row (row) or column (col)
78
How were table borders made in older versions of HTML?
by using a border attribute and setting it equal to an integer
eg: < table border = "1" >
where the integer is the thickness of the border
79
How can data span columns?
Using the span column attribute - colspan
80
How does the colspan attribute work?
the colspan attribute accepts an integer (≥1) to denote the number of columns it spans across
81
How can table data span multiple rows?
using the rowspan attribute, which accepts an integer (≥1) to denote the number of rows it spans across
82
how do you section off a long table with lots of data
with the table body element < tbody >
83
What should the < tbody > element contain?
all the table's data, excluding the table headings
84
How do you section off table heads?
using the table head < thead > element
85
How do you section off the bottom part of a long table?
with the table footer element - < tfoot>
86
What do table footers usually contain?
sums, differences, and other data results
87
What does CSS stand for?
Cascading Style Sheets
88
with < form > what does the action attribute do?
determines where the < form > information is sent
89
Why are HTTP verbs capitalised
out of convention
| eg. < form action="/example.html" method="POST" > < /form >
90
What does the method attribute do in an HTTP < form >
the method attribute is assigned a verb that is included in the HTTP request
91
What does < input >'s type attribute do?
determines how the input renders on the page, and what kind of data the input can accept
92
what is the default value of the type attribute?
"text"
| type = "text"
93
Why does < input > need a < label >?
So that users can can properly identify an < input >
94
What does an < input > need to be associated with a < label > ?
an id
95
What is the password attribute for < input >?
type="password"
96
What does < input type="password" > do?
replaces input text with another character, like an asterisk * or dot • - so sensitive material like passwords are hidden
97
What does the step attribute do inside < input >
Puts arrows inside the input box so that the user can click the arrows to go up or down
98
What does < input type="range" > (setting type to range) do?
Gives users a slider in the input box
99
How do you set minimum and maximum values for the type="range"
with min and max attributes
100
How do you make a checkbox with < form > ?
With type="checkbox"
101
Where are radio and checkbox buttons' values displayed?
```
in the label part of the code
eg:
< form >
< p>What is sum of 1 + 1?
< input type="radio" id="two" name="answer" value="2" >
< label for="two">2
< br >
< input type="radio" id="eleven" name="answer" value="11" >
< label for="eleven">11
< /form >
```
102
What does a radio button do?
Allows users to choose only one option from given buttons
103
How do you group radio buttons together?
By giving them the same name attribute
104
How do you make a dropdown menu instead of, eg, radio buttons?
```
With < select > and < option >
eg:
< select name="bun" id="bun" >
< option value="sesame">Sesame
< option value="potato">Potato
< option value="cake">Cake
< /select >
```
105
What do you use if you have a really long drop down?
the < datalist > element
106
What element is < datalist > used with?
the < input type="text" > element
107
What is the input < textarea > used for?
to create bigger text fields for users to write into (as opposed to the more simple < input >
108
How do you determine the size of < textarea >
with rows ( rows="x" )and columns ( cols="x" )
109
How do you allow users to submit information with < input >?
make a submit button by coding: < input type="submit" >
110
What happens if you don't assign a value to a submit button?
The default text appears within the submit button, which is Submit
111
What is server-side validation?
when data is sent to another machine (typically a server) for validation
112
What is client-side validation?
validation that occurs before data is sent to the server
113
How do you enforce non-optional fields in a form?
with the attribute 'required' which is written within the < input >
114
How do you set a minimum number of characters for a text field?
with the minlength attribute
115
How do you set a maximum number of characters for a text field?
with the maxlength attribute
116
Where do minlength and maxlength attributes go?
within < input >
eg:
< input minlength="5" maxlength="250" >
117
What does regex stand for?
regular expression
118
What is the pattern= attribute used for?
to assign guidelines such as regex for input fields, ie only using certain characters a-zA-Z
119
What is the benefit of using the < label > element?
clicking on the < label > element on the page will focus on the text field of the associate < input > element
120
How do you associate a < datalist > element with an < input > element?
the < input >'s list attribute value must match the id= of the < datalist > element
121
What happens if < input > is missing the name= attribute?
the information in the input form will not be submitted
122
How do you render a dropdown list in a < form >?
add a < select > element with < option > < /option > elements nested inside
123
Where in a form does the placeholder attribute go?
within < input >
eg:
< input id="name value="name" type="text" placeholder="Adam Smith" >
124
What does semantic mean?
relating to meaning
125
What does semantic HTML do?
provides context about what information is inside of the code, for example, < header > provides more context than < div >
126
Why use semantic HTML?
accessibility, SEO, and easier to understand
127
What does < nav > do?
Defines blocks of navigation links - menus, tables of contents, etc
128
What are some of the semantic structural elements?
< header >< nav >< main >< footer >
129
What does < footer > contain?
```
contact information
copyright information
terms of use
site map
reference to top of page links
```
130
Give two semantic elements that can do into the body section?
< section > and < article >
131
What does < section > do?
defines elements in a document with the same theme
132
What does the < article > element do?
holds content that makes sense on its own, such as articles, blogs, comments, etc
133
What is the < aside > element for?
used to mark additional information that can enhance another element but isn't required in order to understand the main content
134
Give some uses for the < aside > element
bibliographies, endnotes, comments, pull quotes, editorial sidebars, additional information
135
What is < figure > used for?
for encapsulating media such as an image, illustration, diagram, code snippet, which is referenced in the main flow of the document
136
How do you add a caption to a < figure >?
with the element < figcaption >
137
Why is < figcaption > better than using plain text with < p >
because text written in < figcaption > moves with the < figure >
138
How do you embed audio into a document?
With the < audio > element, which uses src= just like < img >, but with a new < source >
139
Where do audio attributes go?
Within the opening tag of < audio autoplay controls >
140
How do you use < source > with < audio >
< audio controls >< source src="" type ="audio/mp3">
141
What attributes can be used with < video >?
< video controls autoplay loop >
controls adds play and pause buttons to the video, as well as volume control and a fullscreen button
autoplay plays the video as soon as the page is loaded
loop loops the video on repeat
142
What does the < address > element do to text?
makes it italic
143
What semantic element can you use to show time in HTML?
< time >
144
What semantic element can you use to show that text is an abbreviation?
< abbr > < /abbr >
145
What element do you use to show that some text is a detailed description?
< details > < / details >
146
What does the < details > element do?
creates a dropdown button which expands to show the details inside the element
147
What can you use to add a descriptive summary to < details >
the < summary > element
eg:
< details > < summary > summary goes here < /summary > < /details >
148
How do you group an image and its caption together?
with < figure >
149
What does the for="" attribute link to?
the id="" attribute
150
What does the id="" attribute in < input > link to in < label >?
the for="" attribute
151
How do you code so that radio or checkbox buttons are ticket by default?
with the checked attribute
< input type="radio" checked >
152
How do you link radio buttons together?
by giving them the same name="" attribute
153
What is a class attribute? ( class="")
a class attribute specifies one or more class names for an HTML element
154
How do you code an element to have two or more classes?
within the same class attribute in separate quotation marks
class = "hello-world" "coding-is-fun"
155
What tag can you use to underline text?
< u >
156
What tag can you use to strike through text?
< s >
157
What is the tag used to create a horizontal line?
< hr >
158
What is the tag for adding JavaScript in HTML?
< script >
159
how do you create linked sections on a webpage?
160
what does the defer attribute do?
it specifies that scripts should be executed after the HTML file is completely parsed
161
what does the async attribute do?
loads and executes JavaScript asynchronously with the rest of the page
162
how is the async attribute different to the defer attribute
with the async attribute, the script does not wait until the entire page has parsed, but executes as soon as it is downloaded
163
when is the async tag useful?
for scripts that are independent of other scripts and don't rely on other scripts to function
164
what is each point on a DOM called?
a node
165
what does DOM stand for
document object model
166
what is a node in a DOM?
an intersecting point in a tree that contains data
167
what is the top most node called in the DOM?
root node
168
what would document.parentNode return?
null - the document element is the root node
169
what is appending?
assigning a new element to be the child of an element that already exists on the DOM
