HTML Flashcards
What does HTML stand for?
Hyper Text Markup Language
What are the four parts of HTML elements?
- Element Itself
- Opening Tag
- Content
- Closing Tag
What does the attribute ‘href’ mean?
Hyperlink Reference
How many heading elements are there in HTML?
Six. With 1 being the largest, and 6 being the smallest.
What is the ‘< div >’ tag used for?
The ‘< div >’ tag is used for grouping HTML elements together. It also allows for a neat, organized look.
What is an attribute?
Attributes are used to add information or modify the behavior of HTML elements.
What do attributes consist of?
A name and a value, expressed as: ‘ id=”example” ‘
Where are attributes located?
In the opening tag of an element.
What are two different ways you can display text in HTML?
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.
What do you add to any tag that is the child of a different tag?
Two spaces of indentation for readability.
Typically, what does the ‘< em >’ and ‘< strong >’ tags do?
The ‘< em >’ (emphasize) tag adds italics. And the ‘< strong >’ tag makes the text bold.
How do you modify spacing in the browser?
Use the ‘ < br >’ (line break) tag.
How do you create an unordered list in HTML? (Bullet point list)
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 do you create an ordered list in HTML? (Numbered list)
Use the ‘< ol >’ (ordered) list tag. Within the opening and closing ordered list tags you should have ‘< li >’ (list) tags to hold raw text.
What is a self closing tag in HTML?
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 do you add an image to your browser using HTML?
Use the ‘< img />’ tag. The image tag requires a src (source) attribute and the value is typically the images URL.
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)
You add the alt attribute.
How do you add a video to your website using HTML?
Use the ‘< video (URL) (height=””)(width=””)(controls) >’ tag with the accompanying attributes. Be sure to include a closing tag.
What are some benefits of coherent structuring?
- Readability
- Accessibility
- Ease of Styling
How do you let a web browsers know that you are using HTML?
By starting with a Document Type Declaration. This is the declaration: ‘< !DOCTYPE html >’
How do you add HTML structure and content?
With the ‘< html >’ opening and closing tag.
How do you give the browser information about your website?
Use the ‘< head >’ tag you can add metadata to the website.
What displays on the webpages tab and is always in the ‘< head >’ tag?
The ‘< title >’ element and the content it holds.
How do you add a link to a webpage?
Using the ‘< a >’ (anchor) element with the ‘href’ attribute.
How do you specify how a link should open?
Use the ‘target’ attribute in the anchor (‘< a >’) tag.
How do you make a link open in a new tab?
Use the ‘target’ attribute in the anchor tag (‘< a >’) with the value of ‘_blank’.
Are attributes order specific?
No
How do you tell the browser to look for a specific file in the folder when using a hyperlink reference?
Using “ ./ “ tells the browser to look for the linked file in the current folder.
How do you add a hyperlink to an image?
Wrap the ‘< img >’ tag inside of the ‘< a >’ tag.
How can you send a user to a specific part of your webpage?
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.
Who is responsible for maintaining the style and standards of HTML?
The World Wide Web Consortium or W3C
How do you write a comment in HTML?
With the <!-- opening and --> closing tags.
How do you specify whether a table heading is meant for a row or column?
Use the ‘scope’ attribute within the ‘< th >’ tag and set it’s value to ‘row’ for a row or ‘col’ for a column.
In a table, how do you make data span multiple columns?
Use the attribute ‘colspan’ with an integer value greater or equal to 1.
In a table, how do you make data span multiple rows?
Use the attribute ‘rowspan’ with an integer value greater or equal to 1.
How do you section off a table?
Use the ‘tbody’ element (table body).
How do you section off the heading of a table?
Use the ‘< thead >’ element.
What is the ‘< main >’ element separate from?
The ‘footer’ and ‘nav’ elements. This is because the ‘main’ element only holds the principle content of a webpage.
What does the ‘< section >’ element do?
It sections groups of code that have similar information and the same theme
What does the ‘< article >’ element do?
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
What are some common uses for the ‘< aside >’ element?
Bibligraphies
Endnotes
Comments
Pull quotes
Editorial sidebars
Additional information
What is the element ‘< figure >’ used for?
To encapsulate images, illustrations, diagrams etc which is referenced in the main flow of the document
How do you group an image with a caption?
Use the ‘< figcaption >’ element. This makes it easy to move throughout the code without interrupting the flow of the document
What element embedds audio into your webpage?
The ‘< audio >’ element with the ‘src’ attribute
What attribute helps the browser identify whether or not your audio is supported?
The ‘type’ attribute
What are some attributes that can alter the ‘< video >’ element?
- Controls
- Autoplay
- Loop
Where do you add text that you want displayed if a video is not supported by the browser?
Between the opening and closing ‘< video >’ tags
What element can display videos, audio files, gifs, etc?
The ‘< embed >’ element
What is semantic HTML?
Tags/elements that give more context about their content
What four elements create the basic structure of a webpage?
- < header >
- < nav >
- < main >
- < footer >
What tag sections an area of the document you want to have same theme?
< section >
What tag holds related but non essential information in an article?
< aside >
What tag encapsulates all types of media?
< figure >
What describes the media in the ‘< figure >’ element?
< figcaption >
What is universal between the video, audio, and embed elements?
They all use the ‘src’ attribute to link the source of the content.
What is different about the ‘< embed >’ element than the
‘< video >’ and ‘< audio >’ elements?
’< embed >’ is a self closing tag
Where is the ‘< nav >’ element usually located?
In the ‘< header >’ or ‘< footer>’ elements
What are ‘forms’ in HTML?
Forms are used for gathering and sending user input to an external source for processing.
What are two things that a form must include?
The target location and what HTTP request to make.
What does the ‘action’ attribute do in the form element?
Determines where the information is sent
What does the ‘method’ attribute do in the form element?
The method attribute determines how to information is sent and processed.
How do you allow input in the ‘< form >’ element?
The ‘< input >’ element
How do you determine what kind of data the ‘< input >’ element can receive and how it renders on the webpage?
The ‘type’ attribute
What is the default value of the type attribute?
text
What does the attribute type’s ‘text’ value do?
It renders a text field that users can type into
What attribute in the ‘< input >’ element ensures the information is sent when the form is submitted?
The ‘name’ attribute
Is input a self closing tag?
Yes
What is the most common HTTP request?
A GET request
What element do you use to explain what an input element is asking for?
A ‘< label >’ element
How do you associate a label with an input element?
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’.
What attribute for the ‘< input >’ element changes the characters to asterisks or dots for privacy?
‘type = password’
What attribute for ‘< input >’ adds arrows and counts up or down in the form box?
The ‘step = 1’ attribute. 1 can be different.
What attribute for ‘< input >’ creates a slider?
The ‘range’ attribute. Use the ‘min’ and ‘max’ attributes to make the range.
What attribute effects the fluidity of the slider in an input element?
The ‘step’ attribute.
What attribute for ‘< input >’ creates a checkbox?
The ‘checkbox’ attribute.
What is a radio button and how do you add it?
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”
What attribute for ‘< input >’ creates a checkbox?
The ‘checkbox’ attribute.
What is a radio button and how do you add it?
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”
How do you create a dropdown list?
Use the ‘< select >’ element with nested ‘< option >’ elements.
What attribute for ‘< input >’ creates a checkbox?
The ‘checkbox’ attribute.
How do you create a dropdown list?
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.
How do you create a dropdown list where the results can be filter by text search?
With the ‘< datalist >’ element
What attribute for ‘< input >’ creates a checkbox?
The ‘checkbox’ attribute.
How do you create a dropdown list?
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.
What element creates an area to type into instead of just one line?
The ‘< textarea >’ element
What element creates an area to type into instead of just one line?
The ‘< textarea >’ element with it’s associated rows and col attributes to determine the size of the area.
What attribute for ‘< input >’ creates a checkbox?
The ‘checkbox’ attribute.
How do you create a dropdown list?
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.
What attribute for ‘< input >’ creates a checkbox?
The ‘checkbox’ attribute.
What element creates an area to type into instead of just one line?
The ‘< textarea >’ element with its associated rows and col attributes to determine the size of the area.
How do you create a dropdown list?
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.
What attribute for ‘< input >’ creates a checkbox?
The ‘checkbox’ attribute.
What element creates an area to type into instead of just one line?
The ‘< textarea >’ element with its associated rows and col attributes to determine the size of the area.
How do you create text in the ‘< textarea >’that disappears once replaced?
The ‘placeholder=’ attribute with the accompanying text.
How do you create a dropdown list?
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.
How do you create a submit button?
Use the ‘< input >’ element with the type=”submit” attribute and the ‘value’ attribute whose value will be displayed on the button.
How do you create a dropdown list?
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.
What attribute for ‘< input >’ creates a checkbox?
The ‘checkbox’ attribute.
What element creates an area to type into instead of just one line?
The ‘< textarea >’ element with its associated rows and col attributes to determine the size of the area.
What attribute for ‘< input >’ creates a checkbox?
The ‘checkbox’ attribute.
What element creates an area to type into instead of just one line?
The ‘< textarea >’ element with its associated rows and col attributes to determine the size of the area.
What are two different types of form validation?
- Sever side
- Client side
How do you require an input for submission?
Use the ‘require’ attribute in the ‘< input >’ element
How do you set a specific text length/character amount?
Use the minlength and maxlength attributes with their associated amounts in the ‘< input >’ element.
When should you use the POST method in HTML form submission?
Anytime you are creating a login feild.
How do you require an input to follow specific guidelines?
Use the ‘pattern’ attribute in the ‘< input >’ element and assign it a regular expression or ‘regex’ (JavaScript).
What filename does an HTML document always get?
index.html
