HTML & CSS Misc. Flashcards
What is an element?
An element is what HTML is composed of. Elements structure a web page and define its content. A tag and the content between two tags is called an HTML element.
What is the body tag?
The body tag is an HTML element, and the content inside this element is what displays on the screen.
What is a child element?
A child element is an element contained inside another element, which is the parent element.
How many types of headings are there in HTML?
6 total (h1 through h6)
What is the div element?
The div element is a container that divides the page into sections. This helps group elements in the HTML together. Also, div stands for division.
What is an attribute?
Attributes are content added to the opening tag of an element. They can be used in different ways like providing information or changing styling.
What are attributes made out of?
The name of the attribute and the value of the attribute.
Which tags do you use to display text in HTML?
Paragraph tag or span tag
When is it best to use a span element vs. div element?
Use span when you want to target a specific piece of content that is inline.
Use div when you want to divide your content into blocks.
Do the image (img) and break (br) tags require end tags?
No
What attribute is required in an image tag?
source (src) attribute
What should you always include in image tags to help with assistive technologies?
An alt attribute that provides a description of the image.
Does the video tag require an end tag?
Yes
How do you link to other web pages in HTML?
By using an anchor element <a> which requires an href attribute. The element requires an end tag and content between the tags.</a>
What attribute can you use to open a link in a new window?
target attribute
How do you add comments to HTML?
Less than sign, exclamation point, dash, dash, your comment, dash, dash, and then greater than sign.
What are some ways you can help with accessibility on the web?
- Ensure semantic HTML.
- Set the language attribute on the open html tag. This help with screen readers.
- Style with high-contrast and accessible fonts.
What does the display property determine?
How an element’s box is rendered in the browser. Every HTML element is a box by default.
What are the three display properties?
Inline, block, and inline-block
How do you remove white-space between inline-block elements that are displaying side-by-side?
Add font-size: 0 to the parent element.
What properties should you use when you want to horizontally center block-level content relative to a parent element?
display: block;
margin-left: auto;
margin-right: auto;
What properties should you use when you want to horizontally center inline elements within a block element?
display: inline-block;
text-align: center;
What does “a11y” stand for?
Web accessibility
What is the position property?
The position property is about the flow of elements on HTML.
What are the four most common values for the position property?
Static
Fixed
Relative
Absolute
What is the static position?
It’s the normal flow or default flow. Block-level elements get rendered in the same order that they appear in the HTML markup. (Top to bottom and left to right)
What is the fixed position?
An element will stay in place even when a user scrolls. However, you can’t have offset properties. (Left, right, top, or bottom) This a good choice for navigation bars and footers.
What is the relative position?
An element is still in the normal flow, but we can use offset properties. (Left, right, top, and bottom)
What is the absolute position?
They are elements that are outside of the normal flow and fixed, but they are offset in relation to the first parent container with a non-static position.
What does the float property do in CSS?
The element is taken out of normal flow and pushed to where you set it. All other element next to it then wrap around it. This is good for wrapping text around an element.
What attributes must the form element include and what do they mean?
Action: Determines where the form’s information goes. This is the URL of the server endpoint where the submitted form data should be sent to.
Method: Determines how the information is sent and processed. Usually, you’ll want method=”get” or method=”go”.
What does the fieldset element do?
This element groups together related inputs and labels. These help web crawlers and screen readers to understand how inputs are grouped together. Only use it when grouping more than one input and not just one.
what is the legend element?
It is like the title for the fieldset. This can add extra context for screen readers.
What is the label element and what attribute must it have?
The label element explains what an input is for. It must have the “for” attribute that equals to the id of the input.
Do labels and inputs require opening and closing tags?
Labels do but inputs don’t
When would you use clear: right or clear: left in CSS?
When there is an element that does not recognize that the next element is an float element. Apply one of these to the element in CSS in order to have it move to the next line. Otherwise, it’ll stay on the same line as the float elements.
How do you use the flexbox tools?
Use this property on the container in the CSS:
display: flex;
What three properties control a flex container?
flex-direction
justify-content
align-items
What is flex-direction and its values?
Flex-direction describes the main axis of the container, that is, whether items are laid out horizontally in a row or vertically in a column.
flex-direction accepts 4 possible values:
row - this is the default, items are laid out from left to right
row-reverse - items are laid out from right to left
column - items are laid out from top to bottom
column-reverse - items are laid out from bottom to top
What is justify-content and its values?
The justify-content property controls how items are arranged on the main axis. It has these values and more:
center flex-start flex-end space-between space-around space-evenly
What is align-items and its values?
The align-items property is used to adjust how items are laid out on the cross axis. It has these values:
flex-start
flex-end
center
What is the align-self property and its values?
The align-self property is applied to the individual item inside the container rather than the container itself. It takes similar values to the align-items property:
flex-start
flex-end
center
