mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-10-13 08:32:54 +08:00
feat(curriculum): adding content for HTML chapter review page (#57022)
This commit is contained in:
Jessica Wilkins
@@ -1853,7 +1853,10 @@
|
||||
},
|
||||
"review-html": {
|
||||
"title": "HTML Review",
|
||||
"intro": ["Review the HTML concepts to prepare for the upcoming exam."]
|
||||
"intro": [
|
||||
"Before you take the HTML prep exam, you first need to review the concepts taught in the previous modules.",
|
||||
"Open up this page to review concepts around the basics of HTML elements, semantic HTML, tables, forms and accessibility."
|
||||
]
|
||||
},
|
||||
"qpra": { "title": "30", "intro": [] },
|
||||
"joim": { "title": "31", "intro": [] },
|
||||
|
||||
+150
-1
@@ -7,9 +7,158 @@ dashedName: review-html
|
||||
|
||||
# --description--
|
||||
|
||||
Review the concepts below to prepare for the upcoming exam.
|
||||
Review the concepts below to prepare for the upcoming prep exam.
|
||||
|
||||
## HTML Basics
|
||||
|
||||
- **Role of HTML**: HTML represents the content and structure of a webpage.
|
||||
- **Block-level vs. inline elements**: The `div` element is a block-level element used for grouping content, while the `span` element is an inline element used for styling text.
|
||||
- **Attributes**: Adding metadata and behavior to elements.
|
||||
|
||||
## Identifiers and Grouping
|
||||
|
||||
- **IDs**: Unique element identifiers.
|
||||
- **Classes**: Grouping elements for styling and behavior.
|
||||
|
||||
## Special Characters and Linking
|
||||
|
||||
- **HTML entities**: Using special characters like `&` and `<`.
|
||||
- **`<link>` element**: Linking to external stylesheets.
|
||||
- **`<script>` element**: Embedding external JavaScript files.
|
||||
|
||||
## Boilerplate and Encoding
|
||||
|
||||
- **HTML boilerplate**: This boilerplate includes the `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>` elements. It should be used as the starting point for an HTML document.
|
||||
- **UTF-8 character encoding**: Ensuring universal character display.
|
||||
|
||||
## SEO and Social Sharing
|
||||
|
||||
- **Meta tags (`description`)**: Describing page content.
|
||||
- **Open Graph tags**: Enhancing social media sharing.
|
||||
|
||||
## Media Elements and Optimization
|
||||
|
||||
- **Replaced elements**: Embedded content (e.g., images, iframes).
|
||||
- **Optimizing media**: Techniques to improve media performance.
|
||||
- **Image formats and licenses**: Understanding usage rights and types.
|
||||
- **SVGs**: Scalable vector graphics for sharp visuals.
|
||||
|
||||
## Multimedia Integration
|
||||
|
||||
- **HTML audio and video elements**: The `audio` element is used to embed audio content in a webpage, while the `video` element is used to embed video content.
|
||||
- **Embedding with `<iframe>`**: If you want to embed content from another site, like YouTube, you can use the `iframe` element.
|
||||
|
||||
## Paths and Link Behavior
|
||||
|
||||
- **Target attribute types**: Controlling link behavior.
|
||||
- **Absolute vs. relative paths**: Navigating directories.
|
||||
- **Path syntax**: Understanding `/`, `./`, `../` for file navigation.
|
||||
- **Link states**: Managing different link interactions (hover, active).
|
||||
- **Inline vs. block-level links**: Links by default are inline elements. You can turn a link into a block-level link by placing it inside a block-level element like a paragraph element.
|
||||
|
||||
## Importance of Semantic HTML
|
||||
|
||||
- **Structural hierarchy for heading elements**: It is important to use the correct heading element to maintain the structural hierarchy of the content. The `h1` element is the highest level of heading and the `h6` element is the lowest level of heading.
|
||||
- **Presentational HTML elements**: Elements that define the appearance of content. Ex. the deprecated `center`, `big` and `font` elements.
|
||||
- **Semantic HTML elements**: Elements that hold meaning and structure. Ex. `header`, `nav`, `figure`.
|
||||
|
||||
## Semantic HTML Elements
|
||||
|
||||
- **Emphasis (`em`) element**: marks text that has stress emphasis.
|
||||
- **Idiomatic Text (`i`) element**: used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts.
|
||||
- **Strong Importance (`strong`) element**: marks text that has strong importance.
|
||||
- **Bring Attention To (`b`) element**: used to bring attention to text that is not important for the meaning of the content.
|
||||
- **Description List (`dl`) element**: used to represent a list of term-description groupings.
|
||||
- **Description Term (`dt`) element**: used to represent the term being defined.
|
||||
- **Description Details (`dd`) element**: used to represent the description of the term.
|
||||
- **Block Quotation (`blockquote`) element**: used to represent a section that is quoted from another source.
|
||||
- **Inline Quotation (`q`) element**: used to represent a short inline quotation.
|
||||
- **Abbreviation (`abbr`) element**: used to represent an abbreviation or acronym.
|
||||
- **Contact Address (`address`) element**: used to represent the contact information.
|
||||
- **(Date) Time (`time`) element**: used to represent a date and/or time.
|
||||
- **Superscript (`sup`) element**: used to represent superscript text.
|
||||
- **Subscript (`sub`) element**: used to represent subscript text.
|
||||
- **Inline Code (`code`) element**: used to represent a fragment of computer code.
|
||||
- **Unarticulated Annotation (`u`) element**: used to represent a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
|
||||
- **Ruby Annotation (`ruby`) element**: used to represent the text of a ruby annotation.
|
||||
- **Strikethrough (`s`) element**: used to represent content that is no longer accurate or relevant.
|
||||
|
||||
## HTML form elements and attributes
|
||||
|
||||
- **`form` element**: used to create an HTML form for user input.
|
||||
- **`action` attribute**: used to specify the URL where the form data should be sent.
|
||||
- **`input` element**: used to create an input field for user input.
|
||||
- **`type` attribute**: used to specify the type of input field. Ex. text, password, email, etc.
|
||||
- **`label` element**: used to create a label for an input field.
|
||||
- **`for` attribute**: used to specify which input field the label is for.
|
||||
- **Implicit form association**: inputs can be associated with labels by wrapping the input field inside the `label` element.
|
||||
- **Explicit form association**: inputs can be associated with labels by using the `for` attribute on the `label` element.
|
||||
- **`placeholder` attribute**: used to specify a short hint that describes the expected value of an input field.
|
||||
- **`button` element**: used to create a clickable button. Ex. submit, reset, button.
|
||||
- **`value` attribute**: used to specify the value of the button.
|
||||
- **`required` attribute**: used to specify that an input field must be filled out before submitting the form.
|
||||
- **`size` attribute**: used to specify the width of an input field.
|
||||
- **`minlength` attribute**: used to specify the minimum number of characters required in an input field.
|
||||
- **`maxlength` attribute**: used to specify the maximum number of characters allowed in an input field.
|
||||
- **`disabled` attribute**: used to specify that an input field should be disabled.
|
||||
- **`readonly` attribute**: used to specify that an input field is read-only.
|
||||
- **Focused state**: this is the state of an input field when it is selected by the user.
|
||||
|
||||
## HTML Table elements and attributes
|
||||
|
||||
- **Table element**: used to create an HTML table.
|
||||
- **Table Head (`thead`) element**: used to group the header content in an HTML table.
|
||||
- **Table Row (`tr`) element**: used to create a row in an HTML table.
|
||||
- **Table Header (`th`) element**: used to create a header cell in an HTML table.
|
||||
- **`colspan` attribute**: used to specify the number of columns a header cell should span.
|
||||
- **Table body (`tbody`) element**: used to group the body content in an HTML table.
|
||||
- **Table Data Cell (`td`) element**: used to create a data cell in an HTML table.
|
||||
- **Table Foot (`tfoot`) element**: used to group the footer content in an HTML table.
|
||||
|
||||
## HTML Tools
|
||||
|
||||
- **HTML validator**: a tool that checks the syntax of HTML code to ensure it is valid.
|
||||
- **DOM inspector**: a tool that allows you to inspect and modify the HTML structure of a web page.
|
||||
- **Devtools**: a set of web developer tools built directly into the browser that helps you debug, profile, and analyze web pages.
|
||||
|
||||
## Introduction to Accessibility
|
||||
|
||||
- **Web Content Accessibility Guidelines**: The Web Content Accessibility Guidelines (WCAG) are a set of guidelines for making web content more accessible to people with disabilities. The four principles of WCAG are POUR which stands for Perceivable, Operable, Understandable, and Robust.
|
||||
|
||||
## Assistive Technology for Accessibility
|
||||
|
||||
- **Screen readers**: software programs that read the content of a computer screen out loud. They are used by people who are blind or visually impaired to access the web.
|
||||
- **Large text or braille keyboards**: used by people with visual impairments to access the web.
|
||||
- **Screen magnifiers**: software programs that enlarge the content of a computer screen. They are used by people with low vision to access the web.
|
||||
- **Alternative pointing devices**: used by people with mobility impairments to access the web. This includes devices such as joysticks, trackballs, and touchpads.
|
||||
- **Voice recognition**: used by people with mobility impairments to access the web. It allows users to control a computer using their voice.
|
||||
|
||||
## Accessibility Auditing Tools
|
||||
|
||||
- **Common Accessibility Tools**: Google Lighthouse, Wave, IBM Equal Accessibility Checker, and axe DevTools are some of the common accessibility tools used to audit the accessibility of a website.
|
||||
|
||||
## Accessibility Best Practices
|
||||
|
||||
- **Proper heading level structure**: You should use proper heading levels to create a logical structure for your content. This helps screen readers and other assistive technologies understand the content of your website.
|
||||
- **Accessibility and Tables**: When using tables, you should use the `<th>` element to define header cells and the `<td>` element to define data cells. This helps screen readers and other assistive technologies understand the structure of the table.
|
||||
- **Importance for inputs to have an associated label**: You should use the `<label>` element to associate labels with form inputs. This helps screen readers and other assistive technologies understand the purpose of the input.
|
||||
- **Importance of good `alt` text**: You should use the `alt` attribute to provide a text alternative for images. This helps screen readers and other assistive technologies understand the content of the image.
|
||||
- **Importance of good link text**: You should use descriptive link text to help users understand the purpose of the link. This helps screen readers and other assistive technologies understand the content of the link.
|
||||
- **Best practices for making audio and video content accessible**: You should provide captions and transcripts for audio and video content to make it accessible to people with hearing impairments. You should also provide audio descriptions for video content to make it accessible to people with visual impairments.
|
||||
- **`tabindex` attribute**: used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. For more information, review the prior lecture video on keyboard accessibility.
|
||||
- **`accesskey` attribute**: used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily.
|
||||
|
||||
## WAI-ARIA, Roles, and Attributes
|
||||
|
||||
- **WAI-ARIA**: a set of attributes that can be added to HTML elements to improve accessibility. It provides additional information to assistive technologies about the purpose and structure of the content.
|
||||
- **Aria roles**: a set of predefined roles that can be added to HTML elements to define their purpose. This helps screen readers and other assistive technologies understand the content of the website. Examples include `role="tab"`, `role="menu"`, and `role="alert"`.
|
||||
- **`aria-label` and `aria-labelledby` attributes**: These attributes are used to give an element a programmatic (or accessible) name, which helps people using assistive technology (such as screen readers) understand the purpose of the element. They are often used when the visual label for an element is an image or symbol rather than text. `aria-label` allows you to define the name directly in the attribute while `aria-labelledby` allows you to reference existing text on the page.
|
||||
- **`aria-hidden` attribute**: Used to hide an element from assistive technology such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content.
|
||||
- **`aria-expanded` attribute**: used to convey the state of a toggle (or disclosure) feature to screen reader users.
|
||||
- **`aria-live` attribute**: used to indicate that an element's content is important enough to require that any changes to the content should be announced immediately to screen reader users. This can include status messages like updating the number of results returned from a search, or an error message displayed after an unsuccessful form submission.
|
||||
- **Common Aria states**: Common Aria states include `aria-haspopup`, `aria-checked`, `aria-disabled`, and `aria-selected`. These attributes can be used to indicate the state of an element and help screen readers and other assistive technologies understand the content of the website.
|
||||
- **`aria-controls` attribute**: used to associate an element with another element that it controls. This helps screen readers and other assistive technologies understand the relationship between the elements.
|
||||
- **`aria-describedby` attribute**: used to associate an element with another element that describes it. This helps screen readers and other assistive technologies understand the purpose of the element.
|
||||
|
||||
# --assignment--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user