HTML ESSENTIAL TRAINING Flashcards
1
Q
What is HTML?
A
HyperText Markup Language - the standard markup language for documents designed to be displayed in a web browser. It is a skeleton of a web. It can be assisted by technologies such as CSS and JS.
2
Q
What is HTML?
A
HyperText Markup Language - the standard markup language for documents designed to be displayed in a web browser. It is a skeleton of a web. It can be assisted by technologies such as CSS and JS.
3
Q
What is the role of HTML?
A
HTML marks up the content of a site. It tells the user’s computer what thins are. It provides access to the functionality built into the browser.
4
Q
From which programming languages the web is made of?
A
HTML, CSS, and JavaScript.
5
Q
Why does the Web use multiple programming languages?
A
The web is different than other types of software. You can code the website today and expect that it will still work in five years or 10 years, without any updates. Your code can easily work on an old computer or an old browser from 10 years ago. The web can run on Mac, Android, iOS, Linux, game consoles, watches, televisions, Ebook readers, etc. The web was invented to provide the way to share the content, even when our computers are different from each other.
6
Q
What is a functionality of HTML?
A
There is no programming logic, loops, functions. HTML Is a declarative language. It’s all vocabulary.
7
Q
Why is web or browser programming broken up into three parts?
A
to be resident to changes in technology
8
Q
Which is the most powerful and fragile of the browser programming languages?
A
JavaScript
9
Q
What happens when HTML is broken because of a bug in the code?
A
The browser guesses what you meant, and does its best to fix the bug itself.
10
Q
What is a tag in HTML? Give an example
A
HTML tags are the keywords which define how web browser will format and display the content. The example:
stands for paragraph.
11
Q
Give an example of opening and closing tags in HTML.
A
- opening tag
- closing tag
Hello, I am a paragraph
12
Q
What is HTML element?
A
An HTML element is an individual component of an HTM document. It represents semantics, or meaning. For example, the title element represents the title of the document. Most HTML elements are written with s tart tag (or opening tag) and an end tag (or closing tag), with content in between.
13
Q
Why is it important to use a closing tag and make sure all the content we want is written before it, and not after it?
A
Anything that comes after the closing tag will be displayed on the same HTML page, but it will be understood by the browser to be outside of this article. It’s after the article. It matters where we open and we close out HTML tags, and how we nest elements inside of each other. We use this to convey meaning about content and interfaces. One of the easiest mistakes in HTML you can make is to forget to include the closing tag.
This is a headline
This is paragraph
This is second paragraph
This is third…
14
Q
What is the opening and closing tag for a paragraph?
A
15
Q
What are the six headlines?
A
,
,
,
,
,
######
16
Q
What is the hierarchy of headlines starting from the biggest to the smallest?
A
,
,
,
,
,
######
17
Q
Which tag is used to apply visual-only italics?
A
18
Q
Which tag is used to apply emphasis italics?
A
19
Q
Which tag conveys importance, seriousness, urgency?
A
20
Q
What tag conveys bold?
A
21
Q
What are the four elements that we have to mark up text to be italicized or bolded, and which of them convey a certain meaning, and which - a human language reason for the bold or italic?
A
22
Q
What are the types of lists in HTML?
A
Unordered list Ordered list Definition lists
23
Q
Give me the example of the unordered list.
A
- Dogs
- Cats
- Parrots
- Hamsters
24
Q
Give me the example of the ordered list.
A
- Dogs
- Cats
- Parrots
- Hamsters
25
Give me the example of key value pair list.
- term
- definition
- additional definition
- second term
- definition of second term
- third term
- definition of third term
26
What tag represents a block quotation?
>
27
What tag represents inline quotation?
28
What tag represents a reference to a name, work, standard, URL, etc.?
29
What HTML elements are inline? Give me a few examples. What they are meant for?
Inline Elements: ***They are meant for wrapping around phrases of content that are inline with some other content.***
30
What are block-level elements? Name a few examples.
> These elements start a new block. They are a thing on the page. A block that can be followed by another block.
31
What is the HTML tag to display the date and time?
May 9, 2025 7:00 am half past noon 3:45pm in NYC Wednesday, nov 4th at 7pm
32
What tag will you use when you want to show the code in the content?
``
33
What are the HTML entities? Name them
\< \< - less than sign \> \> - greater than sign
34
What is a space tag?
- it has no closing tag.
35
What type of spacing tag we use for the poem or irregular text in HTML?
```
hello... my world... what ever
```
36
What are subscripts in HTML?
Subscripts are characters that are set below the text baseline, and it is sometimes rendered in a smaller font. H20
37
What are the superscripts in HTML?
Superscripts are characters that are set half a character above the normal line, and it is sometimes rendered in a smaller font. footnote 2
38
What language will you use if you want to put complex equations on a website?
MathML - Markup language for math. It is more powerful than HTML.
39
What tag will you use to mark text that has a little meaning?
- to convey something that has very little prominence. 2019 Copyrights
40
How many elements are there in the following HTML code?
The End of the World is Nigh
Musings on our Current Social Predicament, by *Trans I. Tory*
Random content….
4
41
How do we use HTML elements in combination with each other?
Here's some text that *should* be emphasized.
42
Which two elements are used to mark-up subscript and superscript text?
and
43
When deciding which headline level to use (h1, h2, h3, h4, h5, h6) which of these statements is true?
We should use the level of headline that makes sense, based on the semantic meaning of content.
44
Which markup is correct for displaying date and time?
October 8, 2025
45
Which tag preserves the spaces, tabs, and line breaks within a piece of text so a poem or piece of code can be presented faithfully?
```
```
46
What is the correct structure of the HTML? Give an example.
The Headline
47
How does the break tag differ from most other inline and block tags?
It does not require a closing tag.
48
Why is it important to remember to use closing tags?
so it is clear where elements end
49
Which elements are used to mark-up code on screen?
```
and
```
50
What is the role of HTML?
HTML marks up the content of a site. It tells the user's computer what thins are. It provides access to the functionality built into the browser.
51
From which programming languages the web is made of?
HTML, CSS, and JavaScript.
52
Why does the Web use multiple programming languages?
The web is different than other types of software. You can code the website today and expect that it will still work in five years or 10 years, without any updates. Your code can easily work on an old computer or an old browser from 10 years ago. The web can run on Mac, Android, iOS, Linux, game consoles, watches, televisions, Ebook readers, etc. The web was invented to provide the way to share the content, even when our computers are different from each other.
53
What is a functionality of HTML?
There is no programming logic, loops, functions. HTML Is a declarative language. It's all vocabulary.
54
Why is web or browser programming broken up into three parts?
to be resident to changes in technology
55
Which is the most powerful and fragile of the browser programming languages?
JavaScript
56
What happens when HTML is broken because of a bug in the code?
The browser guesses what you meant, and does its best to fix the bug itself.
57
What is a tag in HTML? Give an example
HTML tags are the keywords which define how web browser will format and display the content. The example:
stands for paragraph.
58
Give an example of opening and closing tags in HTML.
- opening tag
- closing tag
Hello, I am a paragraph
59
What is HTML element?
An HTML element is an individual component of an HTM document. It represents semantics, or meaning. For example, the title element represents the title of the document. Most HTML elements are written with s tart tag (or opening tag) and an end tag (or closing tag), with content in between.
60
Why is it important to use a closing tag and make sure all the content we want is written before it, and not after it?
Anything that comes after the closing tag will be displayed on the same HTML page, but it will be understood by the browser to be outside of this article. It's after the article. It matters where we open and we close out HTML tags, and how we nest elements inside of each other. We use this to convey meaning about content and interfaces. One of the easiest mistakes in HTML you can make is to forget to include the closing tag.
This is a headline
This is paragraph
This is second paragraph
This is third...
61
What is the opening and closing tag for a paragraph?
62
What are the six headlines?
```
,
## ,
### ,
#### ,
##### ,
######
```
63
What is the hierarchy of headlines starting from the biggest to the smallest?
```
,
## ,
### ,
#### ,
##### ,
######
```
64
Which tag is used to apply visual-only italics?
65
Which tag is used to apply emphasis italics?
66
Which tag conveys importance, seriousness, urgency?
67
What tag conveys bold?
68
What are the four elements that we have to mark up text to be italicized or bolded, and which of them convey a certain meaning, and which - a human language reason for the bold or italic?
69
What are the types of lists in HTML?
Unordered list Ordered list Definition lists
70
Give me the example of the unordered list.
* Dogs
* Cats
* Parrots
* Hamsters
71
Give me the example of the ordered list.
1. Dogs
2. Cats
3. Parrots
4. Hamsters
72
Give me the example of key value pair list.
- term
- definition
- additional definition
- second term
- definition of second term
- third term
- definition of third term
73
What tag represents a block quotation?
>
74
What tag represents a reference to a name, work, standard, URL, etc.?
75
What HTML elements are inline? Give me a few examples. What they are meant for?
Inline Elements: ***They are meant for wrapping around phrases of content that are inline with some other content.***
76
What are block-level elements? Name a few examples.
> These elements start a new block. They are a thing on the page. A block that can be followed by another block.
77
What is the HTML tag to display the date and time?
May 9, 2025 7:00 am half past noon 3:45pm in NYC Wednesday, nov 4th at 7pm
78
What tag will you use when you want to show the code in the content?
``
79
What are the HTML entities? Name them
\< \< - less than sign \> \> - greater than sign
80
What is a space tag?
- it has no closing tag.
81
What is a relative URL?
It doesn't contain any protocol or machine information. Its path generally refers to a resource on the same machine as the current document. blog/match-9.html - resource. https://awesomecats.com/people/index.html
82
What are subscripts in HTML?
Subscripts are characters that are set below the text baseline, and it is sometimes rendered in a smaller font. H20
83
What are the superscripts in HTML?
Superscripts are characters that are set half a character above the normal line, and it is sometimes rendered in a smaller font. footnote 2
84
What language will you use if you want to put complex equations on a website?
MathML - Markup language for math. It is more powerful than HTML.
85
What tag will you use to mark text that has a little meaning?
- to convey something that has very little prominence. 2019 Copyrights
86
How many elements are there in the following HTML code?
The End of the World is Nigh
Musings on our Current Social Predicament, by *Trans I. Tory*
Random content….
4
87
How do we use HTML elements in combination with each other?
Here's some text that *should* be emphasized.
88
Which two elements are used to mark-up subscript and superscript text?
and
89
When deciding which headline level to use (h1, h2, h3, h4, h5, h6) which of these statements is true?
We should use the level of headline that makes sense, based on the semantic meaning of content.
90
Which markup is correct for displaying date and time?
October 8, 2025
91
Which tag preserves the spaces, tabs, and line breaks within a piece of text so a poem or piece of code can be presented faithfully?
```
```
92
What is the correct structure of the HTML? Give an example.
The Headline
93
How does the break tag differ from most other inline and block tags?
It does not require a closing tag.
94
Why is it important to remember to use closing tags?
so it is clear where elements end
95
Which elements are used to mark-up code on screen?
```
and
```
96
What tag represents inline quotation?
97
Which type of element is typically a block?
The paragraph element creates an area on a page, rather than a portion of a line.
98
What's is a true statement about the difference between the
> element and the element?
> is a block-level element, while the element is inline, nested inside another block-level element. If you want to highlight a short quote, is great to use inside of a paragraph or other block-level element.
>
> > is for when you want something bigger, to really stand out.
99
In the tag bellow what do we call "datetime"? March, 7, 2024
an attribute
100
What is a true statement about HTML lists?
Lists can be used to mark up navigation.
101
Besides visual appearance, what is most important about headline levels?
creating an organizational hierarchy The hierarchy created by headlines can be used for other purposes.
102
When we want to convey importance, seriousness, or urgency, which element do we use?
**The element is meant for importance.**
103
Which elements are used to convey meaning, instead of just typesetting convention?
*and **These tags are used to convey a sense of importance or stress when spoken.***
104
How do you inspect HTML in a browser developer tools?
Right-click on the demo code and then click INSPECT ELEMENT, or instead you can go to tools, web developer, inspector.
105
What are global attributes?
Attributes that can be applied to any HTML element.
106
What is the most commonly used global attribute?
The CLASS attribute - allows us to target all elements with that class in our CSS or JS.
This is me.
107
What is the second most commonly used global attribute?
The ID attribute - allows us to target a unique element with that id in our CSS of JS.
This is me.
Id is much more specific that's why devs prefer class over it.
108
At what are Ids particularly helpful in HTML?
Ids are helpful for addressing particular elements with JS, or, with a targeted link. The fact that there will only ever be one element with any particular ID name, becomes useful when interacting with JavaScript or links.
109
Which attribute let the user to edit page content?
> This is editable block.
Your name here contenteditable
110
What attribute gives us a way to tell the browser what language the content is in?
This is me
L-A-N-G - stands for language
111
Which attribute tells the browser in which direction the text flows?
D-I-R - dir - stands for direction.
This is me, flow from left to the right.
DIR=LTR - for scripts that run left to right. DIR=RTL - for scripts that run right to left.
112
What are ARIA Roles?
HTML attributes that provide accessible information about the specific element. he layer of information conveyed by ARIA tells screen readers, braille displays, magnifiers and other assistive technology things they need to know to make a site fully accessible - also to the people with disabilities.
113
What is DOM HTML?
The Document Object Model is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure whether each node is an object representing a part of the document.
114
Can HTML elements be written in uppercase letters?
Yes, they can. When HTML was new, everyone capitalized HTML elements. However, when HTML evolved, the web industry switched to believing that it is better to write all the elements with lowercase letters. There is still millions of ancient websites out there with HTML written in all caps, and thee are billions of newer sites that never use capitals in their HTML.
115
Name a few HTML Entities.
Entity: \< \< \> \> & & © - copyright character ™ - TM ☆ - star sign
116
How does a user gain access to the debugging features of a browser?
by accessing developer tools There are several ways to inspect the HTML that the browser is interpreting.
117
Which of these attributes is NOT a global attribute? datetime, class, dir, lang
datetime The datetime attribute is only used on the time element, as a way to create a machine-readable date.
118
When should we use an ARIA attribute?
any time the existing markup makes things confusing in the accessibility tree ARIA is used to clarify to the accessibility tree what is happening with a particular element, set of elements, or interface. If something is broken, ARIA can be a way to fix it.
119
What sort of efforts require the use and understanding of ARIA attributes?
those involving accessibility issues It may be essential to functionality that all users can access specific content.
120
Which syntax can we use to add comments to our HTML?
121
Which code would you use to guarantee that the words "Hocus Pocus" are not split by a line break after "Hocus"?
Hocus Pocus The non-breaking space character entity ensures that "Hocus Pocus" will always display on the same line.
122
What is non-breaking space entity in HTML?
123
When might a good time to use Developer Tools?
Developer Tools give you a powerful close-up behind-the-scenes look at your material and they are always good to use at any time.
124
In HTML, when would you use a character entity like the one shown below?
any time you want characters to appear as simple text instead of being parsed as code
125
How does the id attribute differ from the class attribute?
An id attribute name may only be used once in a document. The id refers to one specific part of a document.
126
How can we present the link in the HTML?
127
What are absolute URLs in the HTML?
[Link](https://example.com/2020/12/34/my-blog-post)[Link](https://example.com) Some URLs point to the home page of a site, others point to content deeper in, and all of these are called absolute URLs.
128
What is HTTP?
HyperText transfer Protocol - is an application protocol for distributed, collaborative, hypermedia information systems that allows users to communicate data on the WWW.
129
What is a relative URL?
It doesn't contain any protocol or machine information. Its path generally refers to a resource on the same machine as the current document. blog/match-9.html - resource.
130
Write HTML code that displays navbar with unordered list and links inside to the pages: Home, People, Prices, Contact.
* [Home](/)
* [People](/)
* [Prices](/)
* [Contact](/)
131
Write HTML footer with links inside to pages: Privacy Policy, Terms.
[Privacy Policy](/about/privacy)[Terms](/about/legal)
132
Which HTML elements are commonly used in marking up navigation?
,
, * ,
133
What is wrong with the following code? [http:transferfink.com](Click%20Me)
The positions of the link text and the link address have been interchanged. The code should actually read, ``` [Click Me](http:transferfink.com) ```
134
How do we make a basic link in HTML?
[text to click](https://example.com)
135
Which address points to index.html file?
"/index.html"
136
When might we use a relative URL instead of an absolute URL?
when a website might be moved from a staging server to a production server
137
What is the tag for image in the HTML?
![]() - it does not have a closing tag.
138
What are the attributes of the ![]() tag?
The attributes are: src, height, width, alt ![]()
139
What are the image formats in the HTML?
gif, svg, jpg, png
140
What are GIF advantages and disadvantages?
- does well competing large areas of a single color - limited color space of 256 colors - can do transparency, with jagged edges - can have multiple frames, and make a little movie
141
What are SVG advantages and disadvantages?
- it is good for icons, logos. - it is a vector file - it contains instructors for a drawing, make it square, make it this color, put it here. Because SVGs are made of vector and math, these images can be scale to be physically quite large or very small without losing the quality. They will never go pixelated because they don't have any pixels.
142
What is SVG?
It stands for Scalable vector graphic. It is a whole programming language for graphics. it contains instructors for a drawing, make it square, make it this color, put it here. Because SVGs are made of vector and math, these images can be scale to be physically quite large or very small without losing the quality. They will never go pixelated because they don't have any pixels.
143
What is JPG? What are advantages and disadvantages of it?
Image format for compressing photos. JPG can be compressed, you can pick up the balance between quality or the size.
144
What is PNG? What are advantages and disadvantages of it?
The PNG sometimes does a better job than a GIF at compressing the kind of images that the GIF format likes, and sometimes it does a better job than a JPG than compressing the kind of images that the JPG format likes, but not always. - images that need transparency - good at compression
145
What is a responsive image?
Responsive image is useful when we want to display a big, beautiful, high resolution image for people with big screens and then, shrink it way down for the people on phones, on small screens. We can do it with HTML this way, without using CSS or any other framework. ![]()
146
What is a responsive width?What should we do if we want the browser to consider the width of the viewport and to choose a file based on the size of the screen as well as the density?
![]()
147
What are the sizes attributes?
The sizes attributes are the lists which size image to use at which media query.
148
What is SRCSET attribute?
Allows you to specify multiple files to be used based on either viewport width or image pixel width.
149
What is the picture element?
it contains one or more elements, each referring to different images through the SRCSET attribute. This way browser can choose the image that best fits the current view and/or device. Each element has a media attribute that defines when the image is the most suitable.
150
What is Figure tag?
- it is good for anything that appears as a figure, illustrating something.
151
What is figcaption?
- it is good for demonstration of a concept which needs a caption.
152
Write an example of and code.
![]() Alfonso serving pancakes The figure element includes or encapsulates the caption element and other graphical elements.
153
If you want to create a compact image that can display in large sizes without pixelation, which should you choose?
SVG Scalable Vector Graphics can scale to massive sizes and still look neat, like they were built for it.
154
Which version of the image in the following code would be the slowest to load? ![]()
sunsetC.jpg The largest image loads the slowest.
155
If you want to keep a caption with an image, which combination of elements lets you identify them as connected?
Surround the image with a figure element, and use the figcaption element inside of figure. is designed to contain a caption that will stay with your image.
156
What is the most effective way to use bandwidth efficiently when sending images?
Create a set of options the browser can choose from using the srcset attribute. The srcset attribute lets the browser choose from options that fit the specific situation, minimizing bandwidth consumption while producing attractive results.
157
What do you need to change to move from a resolution-based srcset to a width-based srcset?
Provide pixel measurements (w) instead of 1x, 2x, etc. Yes - setting the width explicitly changes srcset's behavior.
158
What are the four attributes we want to include on every img element?
src, alt, height, width Yes. src is short for source, and links to the file. Alt provides an alternative text experience of the image. Height and width let the browser know how much space the image needs before the file is fetched, improving performance.
159
Why should you spend effort optimizing image sources and corresponding display attributes?
to have the best compromise between image quality and download speed. Bear in mind that there is no value in downloading data that will not be used.
160
Why should you include the height and width specifications for all images?
to make the page layout more efficient. The size of an image can be learned before download is complete.
161
How do you create an image that changes content depending on the surrounding layout?
Nest img, source, and srcset information inside of a picture element. The element gives you the flexibility you need to change content as well as image size.
162
Which format is best suited to handle complex drawings and logos?
SVG is a vector graphics format for describing complex drawings.
163
Why would you want to use the w specification in srcset instead of the x specification?
to consider both display density and window width when choosing the image source. You can specify the width of the source image in the code.
164
What is the element used to place the audio?
165
What type of attributes we can use with audio?
loop - when it gets to the end, it starts playing from the beginning again. - the audio is played automatically as soon as the page loads.
166
Why has a closing tag?
So we can use the source element to specify more than one audio file:
167
How to create video tag?
Video tag is used to embed video content in a document, such as movie clip or other video streams. Your browser does not support video tag
168
What is CODEC?
It is a device or piece of software capable of encoding or decoding a digital stream or a signal for transmission over a data network. A codec can be for audio or video content.
169
What is element in the HTML and how to use it?
HTML5 allows us to specify subtitles for a video using the element. The various attributes of this element allow us to specify such things as the type of content that we're adding, the language it's in, and of course a reference to the text file that contains the actual subtitle information.
170
What is the difference between captions and subtitles?
Captions are designed for viewers who cannot hear the audio in the video. Subtitles are designed for viewers who can hear but do not understand the language in the video.
171
Write a code example with video tag and captions.
172
What is Embedding?
Placing content from one site into the body of a page on another site.
173
how to embed the video on the page? Example code.
174
How do you create a video element that specifies different resolutions of video that browsers can choose from when loading the video?
You can't do this. Instead, the browser adapts to circumstances as needed.
175
What should you do to create an audio player with controls?
Use the audio element with the controls attribute set to yes. The audio element has controls built in, which you can show just by setting the controls attribute to yes.
176
You can add chapter divisions to videos by \_\_\_\_\_.
referencing a VTT file listing chapters HTML doesn't have a chapter division mechanism built into it, but browsers recognize chapters from VTT files.
177
Which tag must you use within a video element to tell the player where to look for captions?
You must specify the source for the captions in a vtt file.
178
What do embedded YouTube videos, maps, and CodePen demos have in common?
All are services you can include in your own pages and sites with embed code based on the iframe element. Embed codes built with the iframe element make it easier combine content from other sources into your pages and apps.
179
What are the options for the value of the lang attribute?
The lang attribute is a universal attribute, it means you can put it on any element. - language - region - script - alphabet
180
Write the code If the majority of a page is written in Mexican Spanish, for instance, but there are several block quotes written in Nahuatl.
