Untitled Deck Flashcards
What is the role of HTML?
Foundation of web structure.
What are HTML elements?
Used to represent content on the page, made by an opening and a closing tag (e.g., <h1></h1>, <p></p>).
What is a div element?
A generic HTML element that does not hold any semantic meaning, used as a container for other HTML elements.
What are void elements?
Elements that do not have a closing tag (e.g., <img></img>).
What are attributes in HTML?
Adding metadata and behavior to elements.
What are IDs in HTML?
Unique element identifiers.
What are classes in HTML?
Grouping elements for styling and behavior.
What are HTML entities?
Using special characters like & and <.
What does the <link></link> element do?
Links to external stylesheets.
What does the
element do?
Embeds external JavaScript files.
What is HTML boilerplate?
Basic structure of a webpage, including DOCTYPE, html, head, and body elements.
What is UTF-8 character encoding?
Ensuring universal character display.
What are meta tags?
Provide a short description for the web page and impact SEO.
What are Open Graph tags?
Enhance social media sharing.
What are replaced elements in HTML?
Embedded content (e.g., images, iframes).
What does optimizing media involve?
Techniques to improve media performance.
What are SVGs?
Scalable vector graphics for sharp visuals.
What are HTML audio and video elements?
Used for embedding multimedia.
What does embedding with <iframe> do?
Integrates external video content.
What are target attribute types?
Controlling link behavior.
What is the difference between absolute and relative paths?
Navigating directories.
What is path syntax?
Understanding /, ./, ../ for file navigation.
What are link states?
Managing different link interactions (hover, active).
Why is semantic HTML important?
Maintains the structural hierarchy of content.
What are presentational HTML elements?
Elements that define the appearance of content (e.g., deprecated center, big, font).
What are semantic HTML elements?
Elements that hold meaning and structure (e.g., header, nav, figure).
What does the emphasis (em) element do?
Marks text that has stress emphasis.
What does the idiomatic text (i) element do?
Used for highlighting alternative voice or mood.
What does the strong importance (strong) element do?
Marks text that has strong importance.
What does the bring attention to (b) element do?
Used to bring attention to text that is not important for the meaning of the content.
What does the description list (dl) element do?
Represents a list of term-description groupings.
What does the description term (dt) element do?
Represents the term being defined.
What does the description details (dd) element do?
Represents the description of the term.
What does the block quotation (blockquote) element do?
Represents a section quoted from another source.
What does the inline quotation (q) element do?
Represents a short inline quotation.
What does the abbreviation (abbr) element do?
Represents an abbreviation or acronym.
What does the contact address (address) element do?
Represents the contact information.
What does the time (time) element do?
Represents a date and/or time.
What does the superscript (sup) element do?
Represents superscript text.
What does the subscript (sub) element do?
Represents subscript text.
What does the inline code (code) element do?
Represents a fragment of computer code.
What does the unarticulated annotation (u) element do?
Represents inline text with a non-textual annotation.
What does the ruby annotation (ruby) element do?
Represents the text of a ruby annotation.
What does the strikethrough (s) element do?
Represents content that is no longer accurate or relevant.
What does the form element do?
Creates an HTML form for user input.
What does the action attribute do?
Specifies the URL where the form data should be sent.
What does the input element do?
Creates an input field for user input.
What does the type attribute do?
Specifies the type of input field (e.g., text, password, email).
What does the label element do?
Creates a label for an input field.
What does the for attribute do?
Specifies which input field the label is for.
What is implicit form association?
Inputs can be associated with labels by wrapping the input field inside the label element.
What is explicit form association?
Inputs can be associated with labels using the for attribute on the label element.
What does the placeholder attribute do?
Specifies a short hint that describes the expected value of an input field.
What does the button element do?
Creates a clickable button (e.g., submit, reset, button).
What does the value attribute do?
Specifies the value of the button.
What does the required attribute do?
Specifies that an input field must be filled out before submitting the form.
What does the size attribute do?
Specifies the width of an input field.
What does the minlength attribute do?
Specifies the minimum number of characters required in an input field.
What does the maxlength attribute do?
Specifies the maximum number of characters allowed in an input field.
What does the disabled attribute do?
Specifies that an input field should be disabled.
What does the readonly attribute do?
Specifies that an input field is read-only.
What is the focused state?
The state of an input field when it is selected by the user.
What does the table element do?
Creates an HTML table.
What does the table head (thead) element do?
Groups the header content in an HTML table.
What does the table row (tr) element do?
Creates a row in an HTML table.
What does the table header (th) element do?
Creates a header cell in an HTML table.
What does the colspan attribute do?
Specifies the number of columns a header cell should span.
What does the table body (tbody) element do?
Groups the body content in an HTML table.
What does the table data cell (td) element do?
Creates a data cell in an HTML table.
What does the table foot (tfoot) element do?
Groups the footer content in an HTML table.
What is an HTML validator?
A tool that checks the syntax of HTML code to ensure it is valid.
What is a DOM inspector?
A tool that allows you to inspect and modify the HTML structure of a web page.
What are Devtools?
A set of web developer tools built into the browser for debugging and analyzing web pages.
What are the Web Content Accessibility Guidelines (WCAG)?
A set of guidelines for making web content more accessible to people with disabilities.
What does POUR stand for in WCAG?
Perceivable, Operable, Understandable, and Robust.
What are screen readers?
Software programs that read the content of a computer screen out loud.
What are large text or braille keyboards?
Used by people with visual impairments to access the web.
What are screen magnifiers?
Software programs that enlarge the content of a computer screen.
What are alternative pointing devices?
Devices used by people with mobility impairments to access the web.
What is voice recognition?
Allows users to control a computer using their voice.
What are common accessibility tools?
Google Lighthouse, Wave, IBM Equal Accessibility Checker, and axe DevTools.
What is proper heading level structure?
Using proper heading levels to create a logical structure for content.
How should tables be structured for accessibility?
Use <th> for header cells and <td> for data cells.
Why is it important for inputs to have an associated label?
Helps assistive technologies understand the purpose of the input.
What is the importance of good alt text?
Helps assistive technologies understand the content of the image.
What is the importance of good link text?
Helps users understand the purpose of the link.
What are best practices for making audio and video content accessible?
Provide captions, transcripts, and audio descriptions.
What does the tabindex attribute do?
Makes elements focusable and defines the order for keyboard navigation.
What does the accesskey attribute do?
Defines a keyboard shortcut for an element.
What is WAI-ARIA?
Web Accessibility Initiative - Accessible Rich Internet Applications.
What are aria roles?
Predefined roles added to HTML elements to define their purpose.
What do aria-label and aria-labelledby attributes do?
Give an element a programmatic name for assistive technology.
What does the aria-hidden attribute do?
Hides an element from assistive technologies.
What does the aria-expanded attribute do?
Conveys the state of a toggle feature to screen reader users.
What does the aria-live attribute do?
Indicates that an element’s content changes should be announced to screen reader users.
What are common Aria states?
Include aria-haspopup, aria-checked, aria-disabled, and aria-selected.
What does the aria-controls attribute do?
Associates an element with another element that it controls.
What does the aria-describedby attribute do?
Provides additional information about an element by associating it with another element.
