The Document Type Declaration is an instruction that tells the web browser which version of HTML the page is written in. It is not an HTML tag itself, but a declaration that ensures the browser renders the page in standards mode.
Without a correct DOCTYPE, browsers might render pages in 'quirks mode,' which can lead to inconsistent layout and behavior across different browsers.
Card 2
html element
Answer
The html element is the root element of an HTML page, encapsulating all other content except for the DOCTYPE declaration. It often includes the 'lang' attribute to declare the document's primary language.
Declaring the language with the 'lang' attribute is crucial for accessibility, allowing screen readers to use the correct pronunciation and translation tools to function properly.
Card 3
head element
Answer
The head element contains metadata about the HTML document, such as its title, links to stylesheets, script references, and other information not directly displayed on the web page. It must appear before the body element.
Information within the head element, like the title, is vital for search engine optimization and browser tab identification, even though it is not part of the visible content.
Card 4
body element
Answer
The body element contains all the visible content of an HTML document, including text, images, videos, and interactive elements that users see and interact with. It can contain only one body element per HTML document.
Anything a user sees or interacts with on a webpage, from paragraphs to buttons, must be nested within the body element.
Card 5
header element
Answer
The header element represents introductory content, typically containing navigational aids, a logo, or a heading for its nearest ancestor sectioning content or the document itself. It is distinct from the head element, which holds metadata.
Using the header element semantically helps assistive technologies and search engines understand the introductory nature of the content at the top of a page or section.
Card 6
nav element
Answer
The nav element represents a section of a page that contains navigation links, typically for major navigation blocks. It should be used for primary navigation, not for every group of links on a page.
Screen readers can use the nav element to allow users to quickly skip to or bypass navigation blocks, improving accessibility for users who rely on assistive technologies.
Card 7
main element
Answer
The main element represents the dominant content of the body of a document or application. This content should be unique to the document and should not include content like sidebars or navigation links that are repeated across a set of documents.
There should only be one main element per document, and its content should be directly related to or expand upon the document's central topic, aiding accessibility and content structure.
Card 8
article element
Answer
The article element represents a self-contained composition in a document, page, application, or site that is independently distributable or reusable. Examples include a forum post, a magazine or newspaper article, or a blog entry.
An article should make sense on its own, even if removed from the rest of the page content, which helps syndication and content reuse.
Card 9
section element
Answer
The section element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. It is typically used with a heading and should not be used as a generic container like a div.
The section element helps to logically group content within a document, improving outline structure and readability for both users and search engines.
Card 10
aside element
Answer
The aside element represents a portion of a document whose content is only indirectly related to the document's main content. It is often presented as a sidebar or a call-out box.
Content within an aside, such as a glossary or related links, provides supplementary information without being essential to understanding the main flow of the document.
Card 11
footer element
Answer
The footer element represents a footer for its nearest ancestor sectioning content or the root element. A footer typically contains information about its section, such as author, copyright data, or links to related documents.
Like the header, the footer element provides semantic meaning, helping to structure the document and inform users and assistive technologies about the concluding content of a section or page.
Card 12
div element
Answer
The div element is a generic container for flow content, which does not inherently represent anything. It is used to group content when no other semantic element is appropriate, primarily for styling purposes with CSS or scripting with JavaScript.
While widely used, excessive use of div elements without semantic purpose can make a document harder for assistive technologies to interpret, hence the preference for semantic HTML elements when possible.
Card 13
img element
Answer
The img element embeds an image into the document. It is an empty element that requires a 'src' attribute to specify the image source and an 'alt' attribute for alternative text.
The 'alt' attribute is critical for accessibility, providing a textual description for screen readers and for users when the image fails to load.
Card 14
alt attribute
Answer
The alt attribute provides alternative text for an image, which is displayed when the image cannot be loaded or is read aloud by screen readers. It is crucial for web accessibility.
A descriptive 'alt' text ensures that users with visual impairments or those experiencing slow internet connections can still understand the content and context of the image.
Card 15
form element
Answer
The form element represents a document section containing interactive controls for submitting information to a web server. It uses 'action' to specify the submission URL and 'method' for the HTTP method.
Forms are essential for user interaction, allowing data input for various purposes like logins, searches, and data collection.
Card 16
input type="text"
Answer
An input element with type="text" creates a single-line plain-text input field. It is one of the most common input types for collecting short textual data from users.
This input type is suitable for general text entry where no specific format validation is immediately required, such as a name or a generic search query.
Card 17
label element
Answer
The label element represents a caption for an item in a user interface. It is used to associate text with form controls, improving usability and accessibility.
Clicking a label associated with an input control will activate that control, and screen readers will announce the label when the control is focused, significantly enhancing accessibility.
Card 18
for attribute
Answer
The for attribute of a label element explicitly associates the label with a form control. Its value must be the ID of the form control it is labeling.
This explicit association is vital for accessibility, allowing assistive technologies to correctly identify the purpose of each form input.
Card 19
select element
Answer
The select element represents a control that provides a menu of options. Users can choose one or multiple options from the dropdown list.
This element is efficient for presenting a predefined list of choices, reducing user error compared to free-text input for specific selections.
Card 20
option element
Answer
The option element is used to define an item within a select, optgroup, or datalist element. It holds the value that will be submitted if selected.
Each option element should have a 'value' attribute, which is the data sent to the server when that option is chosen by the user.
Card 21
textarea element
Answer
The textarea element represents a multi-line plain-text editing control. It is used for collecting longer forms of text input from users, such as comments or descriptions.
Unlike input type="text", textarea allows users to enter multiple lines of text, making it suitable for paragraphs or extensive messages.
Card 22
fieldset element
Answer
The fieldset element is used to group several controls and labels within a web form. It draws a box around the grouped elements.
Grouping related form controls with fieldset improves form organization and accessibility by providing a logical structure for users, especially those using screen readers.
Card 23
legend element
Answer
The legend element provides a caption for the content of its parent fieldset. It describes the purpose or topic of the grouped form controls.
The legend element is crucial for accessibility, as it clearly identifies the context for the related form inputs within the fieldset.
Card 24
button element
Answer
The button element represents a clickable button, which can be used to submit forms, reset forms, or trigger JavaScript functions. It can contain text or images.
Unlike input type="submit" or type="reset", the button element offers more flexibility in its content, allowing for richer visual presentation with HTML and CSS.
Card 25
video element
Answer
The video element embeds a media player that supports video playback into the document. It requires a 'src' attribute or nested source elements to specify video files.
Modern web development uses the video element to natively embed video content, eliminating the need for third-party plugins like Flash.
Card 26
audio element
Answer
The audio element embeds a media player that supports audio playback into the document. Similar to video, it uses a 'src' attribute or nested source elements for audio files.
This element allows for direct integration of sound content into web pages, providing a native and accessible way to deliver audio without external plugins.
Card 27
source element
Answer
The source element is used to specify multiple media resources for media elements like video, audio, and picture. The browser will choose the most suitable source based on its format and capabilities.
Using multiple source elements with different 'type' attributes ensures broader browser compatibility and allows for optimized media delivery based on device or network conditions.
Card 28
controls attribute
Answer
The controls attribute is a boolean attribute for video and audio elements that, when present, displays the browser's default media controls, such as play/pause, volume, and a progress bar.
Including the controls attribute provides immediate usability for media elements, allowing users to interact with the content without needing custom interface development.
Card 29
aria-label attribute
Answer
The aria-label attribute provides an accessible name for an element when there is no visible text label or when the existing visual label is insufficient. It is read by assistive technologies.
This attribute is crucial for accessibility, allowing elements like icon-only buttons to have a descriptive name for screen reader users, even without visible text.
Card 30
role attribute
Answer
The role attribute defines the purpose or type of an element in the context of accessibility technologies, especially when the element's native HTML semantic meaning is insufficient or incorrect. It helps assistive technologies understand the component's function.
By assigning a specific ARIA role, developers can enhance the semantic meaning of non-semantic elements, like a div acting as a custom button or a tab, making them more understandable for users of screen readers.