jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-03 10:01:47 -04:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): update HTML Review chapter with missing sections (#59235)

Browse Source 
Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
This commit is contained in:
JarydSt
2025-04-15 09:57:22 -07:00
committed by GitHub
parent f8c5a86285
commit 0c05bc8002
1 changed files with 30 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
curriculum/challenges/english/25-front-end-development/review-html/671a883163d5ab5d47145880.md
View File

@@ -11,8 +11,10 @@ Review the concepts below to prepare for the upcoming prep exam.
## HTML Basics
- **Role of HTML**: Foundation of web structure.
- **Role of HTML**: HTML (Hypertext Markup Language) is the foundation of web structure, defining the elements of a webpage.
- **HTML Elements**: Used to represent content on the page. Most of them are made by an opening and a closing tag (e.g., `<h1></h1>`, `<p></p>`).
- **HTML Structure**: HTML consists of a `head` and `body`, where metadata, styles, and content are structured.
- **Common HTML Elements**: Headings (`<h1>` - `<h6>`), paragraphs (`<p>`), and div containers (`<div>`).
- **`div` elements**: The `div` element is a generic HTML element that does not hold any semantic meaning. It is used as a generic container to hold other HTML elements.
- **Void Elements**: Do not have a closing tag (e.g., `<img>`).
- **Attributes**: Adding metadata and behavior to elements.
@@ -60,8 +62,14 @@ Review the concepts below to prepare for the upcoming prep exam.
## 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`.
- **Presentational HTML elements**: Elements that define the appearance of content. Ex. the deprecated `center`, `big`, and `font` elements.
- **Semantic HTML elements**: These elements provide meaning to the structure of the content. Examples include:
- `<header>`: Represents introductory content.
- `<nav>`: Contains navigation links.
- `<article>`: Represents self-contained content.
- `<aside>`: Used for sidebars or related content.
- `<section>`: Groups related content within a document.
- `<footer>`: Defines the footer for a section or document.
## Semantic HTML Elements
@@ -86,7 +94,25 @@ Review the concepts below to prepare for the upcoming prep exam.
## HTML Form Elements and Attributes
- **`form` element**: used to create an HTML form for user input.
### Tables
- **HTML tables (`<table>`)**: Used for tabular data.
- **Table components**:
- `<thead>`: Groups the table header content.
- `<tbody>`: Groups the main body of table data.
- `<tfoot>`: Groups footer information.
- `<tr>`: Defines table rows.
- `<th>`: Defines header cells.
- `<td>`: Defines standard data cells.
- **Use `<caption>`** to provide a table description.
### Forms
- **`form` element**: Used to create an HTML form for user input.
- **`action` attribute**: Defines where to send form data.
- **`method` attribute**: Determines how form data is sent (`GET` or `POST`).
- **Common Input Types**:
- `text`, `email`, `password`, `radio`, `checkbox`, `number`, `date`.
- **`action` attribute**: used to specify the URL where the form data should be sent.
- **`method` attribute**: used to specify the HTTP method to use when sending the form data. The most common methods are `GET` and `POST`.