HTML Basics Flashcards
1
Q
What is the role of HTML?
A
HTML represents the content and structure of the web page.
2
Q
What is an HTML Element?
A
HTML Elements are the building blocks for an HTML document. They represent headings, paragraphs, links, images and more. Most HTML elements consist of an opening tag <elementName> and a closing tage </elementName>.
3
Q
What is the basic syntax for an HTML Element?
A
<elementName>Content goes here</elementName>
4
Q
What is a Void Element?
A
Void Elements cannot have any content and only have a start tag.
5
Q
What are some examples of Void Elements?
A
<img></img>
<meta></meta>
6
Q
True or False: It is common to see some codebases that include a forward slash inside the void element. Both of these are acceptable.
<img></img>
<img></img>
A
True
7
Q
What is an Attribute?
A
An attribute is a value placed inside the opening tag of an HTML element. Attributes provide additional information about the element or specify how the element should behave.
8
Q
What is the basic syntax of an Attribute?
A
<element></element>
9
Q
What is a Boolean Attribute.
A
A Boolean Attribute is an attribute that can either be present or absent in an HTML tag. If present, the value is true otherwise it is false.
10
Q
What are some examples of Boolean Attributes.
A
disabled
readonly
required
11
Q
What are Comments?
A
Comments are used in programming to leave notes for yourself and other developers in your code.
12
Q
What is the basic syntax of a Comment?
A
<!--This is an HTML Comment.-->
13
Q
What are Heading Elements?
A
There are six Heading Elements in HTML. The h1 through h6 are used to signify the importance of content below them. The lower of the number, the higher the importance.
14
Q
What is the basic syntax of Heading Elements?
A
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
15
Q
What is a Paragraph Element?
A
Paragraph Elements are used for paragraphs on a webpage.
16
Q
What is the basic syntax of a Paragraph Element?
A
<p>This is a paragraph element.</p>
17
Q
What is an Image Element?
A
The Image Element ,<img></img>, is used to add images to the web page. The source attribute, src, is used to specify the location the location for that image. For Image Elements, its good practice to include another attribute called the alternate attribute, alt.
18
Q
What is the basic syntax of an Image Element using the source and alternate attributes?
A
<img></img>
19
Q
What is a Body Element?
A
Body Elements are used to represent the content for the HTML document.
20
Q
What is the basic syntax of a Body Element?
A
<body>
<h1>This is a header.</h1>
<p>This is a paragraph.</p>
</body>
21
Q
What is a Section Element?
A
Section Elements are used to divide up content into smaller sections.
22
Q
What is the basic syntax of a Section Element?
A
<section>
<h2>This is a second header.</h2>
<p>This is another paragraph.</p>
</section>
23
Q
What is a Division Element?
A
Division Elements are a generic HTML element that does not hold any semantic meaning. It is used as a generic container to hold other HTML elements.
24
Q
What is the basic syntax of a Diviision Element?
A
<div>
<h3>This is a third header.</h3>
<p>This is yet another paragraph.</p>
</div>
25
What is an Anchor Element?
Anchor Elements are used to apply links to a web page. The HTML Reference Attribute is used to specify where the link should go when the user clicks on it.
27
What are Unordered List, Ordered List, and List Elements?
An Unordered List Element is used to create a bulleted list of items. Each item is contained within a List Element nested in the Unordered List Element.
An Ordered List Element is used to created an ordered list of items. Each item is contained within a List Element nested in the Ordered List Element.
28
What is the basic syntax of an Unordered List Element with three items?
- Item
- Item
- Item
29
What is the basic syntax of an Ordered List Element with three items?
- Item
- Item
- Item
30
What is an Emphasis Element?
Emphasis Elements are used to place emphasis on a piece of text.
31
What is the basic syntax of an Emphasis Element emphasizing the word "is" in the paragraph: This is an example.
This is an example.
32
What is a Strong Importance Element?
A Strong Importance Element is used to place strong emphasis on a text to indicate a sense of urgency and seriousness.
33
What is the basic syntax of a Strong Importance Element emphasizing the word "Important" in the paragraph: Important: This is an example.
Important: This is an example.
34
What are Figure and Figure Caption Elements?
Figure Elements are used to group content like images or diagrams. Figure Caption Elements are used to represent a caption for that content inside the Figure Element.
35
What is the basic syntax of a Figure Element with a nested image and a Figure Caption Element of "This is an image."
36
What are Main Elements?
Main Elements are used to represent the main content for the web page.
37
What is the basic syntax of a Main Element?
38
What are Footer Elements?
Footer Elements are placed at the bottom of the HTML document and usually contain copyright information and other important page links.
39
What is the basic syntax of a Footer Element with a nested paragraph containing the sentence: Copy Right Information?
40
What are IDs?
IDs are unique element identifiers for HTML elements. ID names should only be used once per HTML document. ID names cannot have spaces. If the ID has multiple words then you may use dashes between the words.
41
What is the basic syntax of an ID of "an example" for a header with the text: This is an example.
This is an example.
42
What are Classes?
Classes are used to group elements for styling and behavior. Unlike IDs, you can use the same class name throughout the HTML document. The class value may also have spaces.
43
What is the basic syntax of a Class of "a first-rate example" for a Division Element and a Class of "a second-rate example" for another Division Element.
44
What are HTML Entities?
HTML Entities, or character references, are sets of characters used to represent a reserved character in HTML. Examples include # (&) and < (<).
45
What is the basic syntax for a paragraph containing the sentence "This is an ![]()
element."
This is an <img/> element.
46
What are Link Elements?
Link Elements are used to link to external resources like stylesheets and site icons. They use the Relation Attribute to specify the relationship between the linked resource and the HTML document.
47
What is the basic syntax of a Link Element with the Relationship attribute of "example" with a HTML reference "./example.css"
48
What are Script Elements?
Script Elements are used to embed executable code. While you may write JavaScript directly into the HTML document, it is best practice to link to an external JavaScript file instead.
49
What is the basic syntax of a Body Element with a nested JavaScript of "alert("This is an Example.");" followed by a link to an external JavaScript file named "example"
50
What is Boilerplate and Encoding?
The Boilerplate includes the basic structure and essential elements every HTML document needs. Encoding refers to UTF-8 character encoding, or UCS Transformation Formation 8, which is a standardized character encoding widely used on the web. Character coding is the method computers use to store characters as data.
51
What is the basic syntax of an HTML Boilerplate using UTF-8 character encoding, a title of "Example", a link to ./example.css with a relationship of "example", and a body containing the comment "Information goes here"?
52
What is DOCTYPE?
DOCTYPE is used to tell browsers which version of HTML you are using.
53
What is the html Element?
The html Element represents the top level element or the root of the HTML document. To specify the language for the document, you should use the lang attribute.
54
What is the head Element?
The head Element contains important meta date which is behind-the-scenes information needed for broswers and search engines.
55
What are meta Elements?
Meta Elements represent your site's metadata. These elements have details about things like character encoding, and how websites like Twitter should preview your page's link and more.
56
What is the title Element?
The title Element is used to set the text that appears in the browser tab or window.
57
What is SEO?
SEO, or Search Engine Optimization, is a practice that opitmizes webpages so they become more visible and rank higher on search engines.
58
What are Meta Description Elements?
Meta Description Elements are used to provide a short description for the web page and impacting SEO.
59
What is the basic syntax for a Meta Description Element with the name "description" and the content "Find examples for everything here."
60
What are Open Graph Tags?
The Open Graph protocol enables you to control how your website's content appears across various social media platforms, including Facebook, LinkedIn, and many more. By setting these open graph properties you can entice users to users to want to click on and engange with your content. These properties are set through a colleciton of meta elements inside your HTML head section.
61
What is the og:title Property?
This is used to set the title that displays for social media posts.
62
What is the basic syntax for the og:title Property for the site example.com?
63
What is the og:type Property?
This is used to represent the type of content being shared on social media. Examples include articles, websites, videos, or music.
64
What is the basic syntax for the og:type Property for a website?
65
What is the og:image Property?
This is used to set the image for social media posts.
66
What is the basic syntax for the og:image Property for the image "https://example.com/pictures/example.png"
67
What is the og:URL Property?
This is used to set the URL that users will click on for the social media posts.
68
What is the basic syntax for the og:URL Property for the site example.com?
69
What are Replaced Elements?
A Replaced Element is an element whose content is determined by an external source rather than by CSS itself. An example is the iframe Element, which stands for in line frame, which is used to embed other HTML content directly within the HTML page.
70
What is the basic syntax for a Replaced Element website "example.com" with the title "This is an example"
71
What is the basic syntax for a Replaced Element video "video-url" with a width of "width value" and a height of "height value" that is also fullscreen?
72
What is the basic syntax for a Replaced Element Youtube video "https://www.youtube.com/video/example", with a description header, a width of 560, a height of 315, a title of "Youtube Video", allowences of accelerometer; autoplay; clipboard write; encrypted media; gyroscope; picture in picture; and web share, a reffererpolicy of "strict origin when cross origin", and the ability to fullscreen.
Description
73
What are the three tools to consider when optimizing media, such as an image?
Size, format, and compression. A compression algorithim is used to reduce the size for files or data.
74
What are four image file formats? Which are optimal and which are not?
WEBP and AVIF files are optimal. PNG and JPG are not optimal.
75
What is an SVG and what is it useful for?
Scalable Vector Graphics track data based on paths and equations to plot points, lines, and curves. What this really means is that a vector graphic, like an SVG, can be scaled to any size without impacting image quality. This is useful for things like icons.
76
What are Audio and Video Elements?
The Audio and Video Elements allow you to add audio and video to the HTML document. The Audio Element supports popular file formats such as mp3, wav, and ogg. The Video Element supports mp4, ogg, and webm formats.
77
What is the basic syntax for an Audio Element with a source of "example.mp3" and a Video Element with a source of "example.mp4"
78
What is the Controls Attribute?
The Controls Attribute enables users to manage audio playback, including adjusting volume, pausing, or resuming playback. The Controls Attribute is a boolean attribute that can be added to an element to enable built-in playback controls. If omitted, no controls will be shown.
79
What is the basic syntax of an Audio Element with a source of "example.mp3" with the Controls Attribute?
80
What is the Loop Attribute?
The Loop Attribute is a boolean attribute that makes the audio play continuously.
81
What is the basic syntax of an Audio Element with the source of "example.mp3" with the Loop Attribute?
82
What is the Muted Attribute?
When present in the Audio Element, the Muted boolean attribute will start the audio in a muted state.
83
What is the basic syntax of an Audio Element with the source of "example.mp3" with the Muted Attribute?
84
What is the Source Element?
When it comes to audio file types, there are differences in which browsers support which type. To accomodate this, you can Source Elements inside the Audio Element and the browser will select the first source it understands.
85
What is the basic syntax of an Audio Element with multiple Source Elements "example.ogg", "example.wav", and "example.mp3".
86
What is the basic syntax of an Audio Element with the Controls, Muted, and Loop Attributes with a source of "example.mp3".
87
What are some Audio Element Attributes can also be used for Video Element Attributes?
The Loop, Controls, and Muted boolean attributes.
88
What is the basic syntax of a Video Element with the Controls, Muted, and Loop Attributes with a source of "example.mp4".
89
What is the Poster Attribute?
The Poster Attribute displays an image while the video is downloading. This is unique to the video element.
90
What is the basic syntax of a Video Element with the Controls, Muted and Loop Attributes with a source of "example.mp4" and the Poster Attribute of "https:example.com/images/example".
91
What is a Target Attribute?
Target Attributes tell the browser where to open the URL for the anchor element. These include _self, _blank, _parent, _top, and _unfencedtop
92
What is the Self Value for a Target Attribute?
This is the default value. It will open the link in the current browsing tab or page.
93
What is the basic syntax of an Anchor Element for the site "www.example.com" with the text "example" and a Self Target?
94
What is the Blank Value for a Target Attribute?
This opens the link in a new browsing context. Typically, this opens in a new tab.
95
What is the basic syntax of an Anchor Element for the site "www.example.com" with the text "example" and a Blank Target?
96
What is the Parent Value for a Target Attribute?
This opens the link in the parent of the current context. For example if your iframe had a target of a parent, the link would open in the browser instead of the iframe.
97
What is the basic syntax of an Anchor Element for the site "www.example.com" with the test "example" and a Parent Target?
98
What is the Top Value for a Target Attribute?
This opens the link the top most browsing context. This is the "parent of the parent" always opening in the browser.
99
What is the basic syntax of an Anchor Element for the site "www.example.com" with the test "example" and a Top Target?
100
What is a Path?
A path is a string that specifies the location of a file or directory in a file system. In web development, paths let developers link to resources like images, stylesheets, scripts, and other web pages.
101
What are the parts of Path Syntax?
There are three key syntaxes to know. First is the slash, which can be a backslash (\) or forward slash (/) depending on your operating system. The second is the single dot (.). And finally, we have the double dot (..). The slash is known as the "path separator". It is used to indicate a break in the text between folder or file names. A single dot points to the current directory, and two dots point to the parent directory.
102
What is an Absolute Path?
An absolute path is a complete link to a resource. It starts from the root directory, includes every other directory, and finally the filename and extension. The "root directory" refers to the top-level directory or folder in a hierarchy. An absolute path also includes the protocol - which could be http, https, and file and the domain name if the resource is on the web.
103
What is a Relative Path?
A relative path specifies the location of a file relative to the directory of the current file. It does not include the protocol or the domain name, making it shorter and more flexible for internal links within the same website.
104
What is the :link State?
This is the default state. This state represents a link which the user has not visited, clicked, or interacted with yet. You can think of this state as providing the base styles for all links on your page. The other states build on top of it.
105
What is the :visited State?
This applies when a user has already visited the page being linked to. By default, this turns the link purple - but you can leverage CSS to provide a different visual indication to the user.
106
What is the :hover State?
This state applies when a user is hovering their cursor over a link. This state is helpful for providing extra attention to a link, to ensure a user actually intends to click it.
107
What is the :focus State?
This state applies when we focus on a link.
108
What is the :active State?
This state applies to links that are being activated by the user. This typically means clicking on the link with the primary mouse button by left clicking, in most cases.
