Semantic HTML | Importance of Semantic HTML Flashcards
1
Q
What is the definition of semantics in language?
A
Semantics are the meaning of words or phrases in a language.
2
Q
What does semantic HTML refer to?
A
Semantic HTML refers to HTML elements that have their own semantic meaning.
3
Q
What is the semantic meaning of a <p> element?
A
A <p> element conveys a paragraph of text.
4
Q
Which HTML element is noted for having no semantic meaning?
A
The <div> element.
5
Q
Why is using proper semantic HTML important for users?
A
It ensures the best experience for users with assistive technology like screen readers.
6
Q
How can semantic HTML affect search rankings?
A
It can improve your search rankings, known as search engine optimization (SEO).
7
Q
What is one benefit of using correct semantic elements for developers?
A
It improves the development experience by making it easier to locate and edit elements like the navigation bar.
8
Q
Fill in the blank: The <nav> element is used to define _______.
A
[navigation content]
9
Q
True or False: All HTML elements have semantic meanings.
A
False.
10
Q
What can you think of your HTML document like?
A
A text document.
11
Q
What is the most important aspect of creating a structural hierarchy?
A
The proper use of heading elements.
12
Q
What do the heading elements h1, h2, h3 represent?
A
They represent the heading level for that element.
13
Q
What is the top-level heading element on a page?
A
h1
14
Q
True or False: You can have multiple h1 elements on a page.
A
False
15
Q
What is the role of the h2 element?
A
It is a subheading that comes after the h1 and can be used multiple times.
16
Q
What should always come after an h2 element?
A
An h3 element.
17
Q
Fill in the blank: You should never skip directly from h1 to _______.
A
h3
18
Q
Is the following code correct? <h1>Title</h1><h3>Subheading</h3><h2>Section</h2>
A
No
19
Q
Why should you not use an h1 element for large text styling?
A
You should choose the appropriate element for document structure and use CSS for styling.
20
Q
How do assistive technologies like screen readers rely on structural hierarchy?
A
They rely on the structure to determine how to pause and announce content.
21
Q
What might happen if an h3 element is used before an h2 element?
A
A screen reader user might believe they skipped important content.
22
Q
What is the importance of proper structure for SEO?
A
Search engines need a proper structure to rank content effectively.
23
Q
What can happen if your HTML structure is malformed?
A
The web browser may have to guess the intended structure.
24
Q
What is one consequence of incorrect structural hierarchy?
A
It can lead to technical invalidity of the HTML.
25
What should you keep in mind as you build new projects?
The importance of using the proper structural hierarchy.
26
What does presentational HTML focus on?
The appearance and style of the content.
27
What type of elements were commonly used in early HTML for presentation?
Elements like center, big, and font.
28
Why should presentational HTML elements be avoided in modern web development?
Due to their limitations and negative impact on accessibility and maintainability.
29
What does it mean if an HTML element is deprecated?
It is outdated and no longer recommended.
30
What is the purpose of the font element in HTML?
To set the font size and color of the text.
31
What is the range for the size attribute of the font element?
From 1 to 7.
32
What should be used to set font size and color instead of the font element?
CSS.
33
What does the center element do?
It centers the content horizontally within its container.
34
What is the function of the big element in HTML?
To make the enclosed text one level bigger than its surrounding text.
35
What is the recommended practice in modern web development?
Using semantic HTML.
36
What is semantic HTML?
HTML that describes the content of the elements, making it easier to read, understand, and maintain.
37
How does semantic HTML benefit search engines?
It allows search engines to easily understand the website.
38
Why is semantic HTML helpful for accessibility?
Screen readers need semantic information to describe content on a web page.
39
List some examples of semantic HTML elements.
* header
* nav
* section
* figure
40
What does the header element define in HTML?
The header of the document or section.
41
What is the role of the nav element in semantic HTML?
For sections with navigation links.
42
What does the section element do?
Groups related information.
43
What type of content is the figure element used for?
Illustrations and diagrams.
44
Fill in the blank: Semantic HTML describes the ________ of the elements.
[content]
45
True or False: The big element is recommended for use in modern HTML.
False.
46
True or False: Semantic HTML improves website accessibility.
True.
47
What is the primary purpose of the idiomatic text element, i?
Originally used for presentational purposes to display text in italics
## Footnote
Now frequently used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts.
48
When should you use the emphasis element, em, instead of the idiomatic text element, i?
When you need to provide more context and emphasize the importance of the text
## Footnote
It is recommended for parts of the text that require special emphasis compared to surrounding text.
49
What is an example of using the idiomatic text element in HTML?
je ne sais quoi in a paragraph
## Footnote
The lang attribute specifies the language of the content, in this case, French.
50
What does the emphasis element, em, do in a sentence?
It conveys the meaning and importance of the emphasized text
## Footnote
The emphasized text usually alters the meaning of the sentence.
51
True or False: The i element indicates that the text is important.
False
## Footnote
The i element only shows that the text is different from the surrounding text without indicating its importance.
52
Fill in the blank: If you need to display text in italics without a special purpose, you should use _______.
CSS
53
What should be avoided when using the emphasis element?
Overusing it for long sections of text
## Footnote
It's usually limited to only a few words.
54
How does the browser display text within the emphasis element?
It is italicized to indicate importance
## Footnote
This visually tells readers that the emphasized word is significant in the context.
55
What is the primary use of the 'b' element in HTML?
'b' is commonly used to highlight keywords in summaries or product names in reviews
## Footnote
The 'b' element visually emphasizes text without indicating its importance.
56
What is an example of using the 'b' element?
Highlighting product names like SuperSound 3000 in a review
## Footnote
This example shows how the 'b' element can be used to draw attention to specific items.
57
What does the strong element indicate in HTML?
The strong element emphasizes text that is crucial or urgent
## Footnote
It is used to communicate a higher level of importance compared to the 'b' element.
58
What is a key difference between the 'b' element and the strong element?
The 'b' element draws attention without indicating importance, while the strong element conveys urgency
## Footnote
Both are rendered as bold by default, but their semantic meanings differ.
59
When should you use the strong element over the 'b' element?
Use the strong element when you need to emphasize the importance of the text
## Footnote
Consider the purpose and urgency of the text when choosing between these elements.
60
Fill in the blank: The _____ element is used to highlight keywords in summaries.
'b'
## Footnote
This element is often used for visual emphasis in text.
61
True or False: The strong element and the b element are functionally the same in HTML.
False
## Footnote
They serve different purposes in terms of semantic meaning.
62
What are description lists used for?
Presenting terms and definitions in an organized format like a glossary or dictionary
63
Which HTML element is the container for a description list?
64
What does the element represent in a description list?
A description term
65
What does the element represent in a description list?
Description details associated with a term
66
Fill in the blank: Description lists are versatile and can also be used for _______.
recipes
67
What is an example of a term and its corresponding detail in a description list?
HTML: HyperText Markup Language
68
What is an example of a recipe item in a description list?
Flour: 2 cups
69
True or False: Description lists can only be used for terms and definitions.
False
70
List three use cases for description lists.
* Product specifications
* Frequently asked questions
* Metadata
71
In a browser, how are description details visually distinguished from terms?
Descriptions are slightly more indented towards the right
72
What is the structure of a description list?
A
- element containing multiple
- and
- pairs
73
Fill in the blank: Each term in a description list is followed by its corresponding _______.
description
74
How can you describe the layout of ingredients in a recipe using a description list?
Ingredients aligned to the left, measurements indented
75
What are quoted elements used for in HTML?
To distinguish quoted text from surrounding content
76
What is the purpose of the block quotation element in HTML?
To represent a section quoted from another source, mainly for extended quotations
77
What attribute can be used to cite the source of a block quote?
cite attribute
78
What should the value of the cite attribute be?
A valid URL
79
How does the browser display a block quote element?
The text is slightly indented
80
What should you do if you want to start and end a block quote with quotation marks?
Write them explicitly within the text
81
How can you include multiple paragraphs within a block quotation?
Wrap them within one or more paragraph elements
82
What is the function of the citation element outside of the block quotation?
To mark up the title of a referenced creative work
83
What does the citation element contain?
The title of the referenced work, such as a book or article
84
What is the difference between the cite attribute and the citation element?
Cite attribute works behind the scenes; citation element is visible to users
85
When should you use block quotes?
For long quotations from other sources
86
What is the purpose of the inline quotation element?
For short inline quotations from other sources
87
How do modern browsers treat inline quotes?
They automatically add quotation marks around the inline quote
88
What is the primary use case for inline quotes?
To quote a few words within a larger paragraph
89
What is the main difference between block quotes and inline quotes?
Block quotes are for extended quotations; inline quotes are for short quotations
90
What is an abbreviation?
A shortened form of a word, such as 'Dr' for 'doctor'.
## Footnote
Abbreviations often include a period at the end.
91
What is an acronym?
A word formed from the initial letters of a phrase, such as HTML for HyperText Markup Language.
## Footnote
Each letter represents the first letter of a word in the phrase.
92
How is the acronym HTML formed?
From the first letters of each word: H, T, M, L.
## Footnote
HTML is a commonly known acronym in web development.
93
What HTML element is used to display abbreviations?
The abbreviation element .
## Footnote
This element helps provide context for abbreviations and acronyms.
94
What should you do when using an abbreviation or acronym for the first time?
Explain their full meaning.
## Footnote
This helps ensure clarity for the reader.
95
What is the purpose of the title attribute in the abbreviation element?
To provide a human-readable description of the abbreviation or acronym.
## Footnote
This attribute is optional but enhances understanding.
96
Give an example of using the title attribute with the abbreviation element.
HTML.
## Footnote
This indicates the full form of the acronym when hovered over.
97
What visual changes might occur when using the title attribute in the abbreviation element?
Styles may change, such as a dotted underline or small caps.
## Footnote
Different browsers may exhibit different styles.
98
Is it necessary to use the abbreviation element for every abbreviation or acronym?
No, it's recommended mainly for those that might be unclear.
## Footnote
Use discretion to maintain clarity without cluttering text.
99
What is the balance you should find when using abbreviations and acronyms?
Between providing information and maintaining presentation clarity.
## Footnote
Avoid cluttering the text while being clear and concise.
100
What element is used to represent contact information for a section on a web page?
The address element
## Footnote
The address element is versatile and can be used for business pages, author pages, personal sites, and more.
101
What should be used instead of a generic element like a div for building out contact sections?
The semantic address element
## Footnote
Using the semantic address element improves the structure and meaning of the HTML document.
102
Fill in the blank: The address element is used for _______.
contact information
103
What is the purpose of the line break element (br) in the address example?
To show the division between the street name, city, and country
## Footnote
This enhances the readability of the physical address.
104
How is a clickable phone number link created in HTML?
Using an anchor element with href set to a tel:+ value
## Footnote
This allows users to initiate a phone call on supported devices.
105
What is the format of the mailto link used for email addresses?
href set to a mailto link
## Footnote
mailto links allow users to open a new email in their preferred email client.
106
True or False: Users often perceive mailto links as spam.
True
## Footnote
Many spammers utilize mailto links to send unsolicited emails.
107
What information is typically included in an address element for a company contact page?
* Company Name
* Physical Address
* Phone
* Email
108
What is one downside of using a mailto link?
Users often perceive it as spam
109
What HTML element is used to represent a specific moment in time?
The time element
## Footnote
The time element helps in displaying times and dates in a standardized way.
110
Give an example of how to use the time element to represent eight PM.
## Footnote
This represents twenty hundred hours, or eight PM in the evening.
111
What is the purpose of the datetime attribute in the time element?
To translate dates and times into a machine-readable format
## Footnote
This helps with search engine results and browser processing.
112
What types of values can the datetime attribute accept?
* Valid year
* Valid month
* Valid time
* Local date
* Global date
* Valid duration string
## Footnote
These formats ensure compatibility and accuracy in data representation.
113
What format must the value for the datetime attribute be in?
ISO 8601 format
## Footnote
This is an international standard for representing dates and times.
114
What does the 'T' in the ISO 8601 datetime value signify?
A separator between the date and time
## Footnote
It helps differentiate the date part from the time part.
115
What does 'fifteen hundred hours' represent in standard time?
Three PM
## Footnote
This is a common way to express time in a 24-hour format.
116
When is it best to use the time element in HTML?
To represent events, publication dates, or appointments
## Footnote
This improves clarity and structure for date and time information.
117
What is the purpose of the superscript element in HTML?
To display a piece of text as a superscript, printed above the normal line of text.
## Footnote
Examples include exponents, superior lettering, and ordinal numbers.
118
How would you write '2 squared' using the superscript element in HTML?
22 (2 squared) is 4.
## Footnote The second number 2 is smaller and slightly higher than the first number 2.
119
Give an example of superior lettering using the superscript element.
Monseigneur is often written as Mgr.
## Footnote Superior lettering indicates abbreviations, where 'g' and 'r' are in superscript.
120
When should CSS be used instead of the superscript element?
When you want to style a piece of text with a raised baseline for typographical reasons.
## Footnote
The superscript element is intended for typographical purposes only.
121
What element is used in HTML to represent chemical equations?
The subscript element.
## Footnote
It displays a lowered baseline using smaller text.
122
How do you write the chemical formula for carbon dioxide in HTML?
CO2
## Footnote The number two is wrapped inside sub tags to indicate it should be a subscript.
123
What are common use cases for the subscript element?
* Chemical formulas
* Footnotes
* Variable subscripts
## Footnote
Subscript is typically used for elements that require a lowered baseline.
124
What HTML element is used to represent short snippets of code inside text?
The inline code element
125
What is a common use case for the code element?
Technical articles and documentation pages
126
Fill in the blank: The _______ element is used to represent preformatted text.
pre
127
What default styling is applied to content inside the code element?
Monospaced font
128
What is the purpose of wrapping code snippets inside
tags?
To communicate to the browser that the text is a piece of inline code
129
How should you represent multiple lines of code in HTML?
Place a code element inside a preformatted text element
130
What should you be mindful of when using the pre element?
Spacing, as it displays exactly as written
131
True or False: The code element can be used for both inline and multiple lines of code.
False
132
In the example code, what CSS property is used to set the text color to blue?
color
133
When should you use the code element for code examples?
For short inline examples
134
When displaying longer code snippets, which elements should you use?
The pre and code elements
135
What is the purpose of the u element?
To represent inline text that has non-textual annotation applied
## Footnote
The u element is used for highlighting spelling errors and has a default styling of a black underline.
136
How was the u element used in HTML4?
For styling purposes
## Footnote
In HTML5, its use is restricted to indicating non-textual annotations.
137
What should be used for styling text with an underline in HTML5?
CSS instead of HTML
138
What does the s element represent?
Text that is no longer accurate or relevant
## Footnote
It is used to show the cancellation of an activity.
139
Provide an example of the s element in use.
140
What should the s element not be used for?
To show changes to a document
141
What are the more appropriate elements for showing changes in a document?
* Deleted text element
* Inserted text element
142
What does the ruby element represent?
Small text shown above or below the main text, typically for pronunciation
## Footnote
It is commonly used in East Asian typography.
143
What is the role of the rp element?
Ruby fallback parenthesis element, used as a fallback for browsers lacking support for ruby annotations
144
What does the rt element indicate?
Text for the ruby annotation, usually for pronunciation or translation details
145
True or False: The ruby element can be used for annotations other than East Asian typography.
True
