Skip to content

Commit b5a26e9

Browse files
Dusch4593Dusch4593
authored
HTML/CSS/JS keywords Pt. 2 (#811)
1 parent 32f3e27 commit b5a26e9

File tree

79 files changed

+800
-706
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+800
-706
lines changed

‎content/css/concepts/background/terms/background-color/background-color.md‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,17 @@ Tags:
1010
CatalogContent:
1111
- 'learn-css'
1212
- 'paths/front-end-engineer-career-path'
13-
- 'paths/full-stack-engineer-career-path'
1413
---
1514

16-
Defines a color for the background of an element.
15+
The **`background-color`** property defines a color for the background of an [HTML element](https://www.codecademy.com/resources/docs/html/elements).
1716

1817
## Syntax
1918

20-
```css
19+
```pseudo
2120
background-color: <value>;
2221
```
2322

24-
where `<value>` can be one of the following:
23+
Where `<value>` can be one of the following:
2524

2625
- Color keyword: `blue`, `transparent`, `rebeccapurple`
2726
- Hexadecimal value: `#FF0000`
@@ -33,7 +32,7 @@ where `<value>` can be one of the following:
3332

3433
## Example 1
3534

36-
Set background color of the `h1` element to be `green`:
35+
Set background color of the [`h1`](https://www.codecademy.com/resources/docs/html/tags/h1-h6) element to be `green`:
3736

3837
```css
3938
h1 {

‎content/css/concepts/colors/terms/hsl/hsl.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,19 @@ Subjects:
77
Tags:
88
- 'Color'
99
- 'Functions'
10+
- 'Methods'
11+
- 'Style'
1012
CatalogContent:
1113
- 'learn-css'
1214
- 'paths/front-end-engineer-career-path'
1315
- 'paths/full-stack-engineer-career-path'
1416
---
1517

16-
The `hsl()` function defines the color value by providing three comma separated values. The first value represents the hue value, the base of the color. The second represents the saturation value, and the third represents the luminance value.
18+
The **`hsl()`** function defines the hue, saturation, and luminance of an [element's](https://www.codecademy.com/resources/docs/html/elements) color value.
1719

1820
## Syntax
1921

20-
```css
22+
```pseudo
2123
<property>: hsl(hue, saturation, luminance);
2224
```
2325

‎content/html/concepts/elements/elements.md‎

Lines changed: 5 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,19 @@ CatalogContent:
1212
- 'paths/front-end-engineer-career-path'
1313
---
1414

15-
An HTML element is a piece of content in an HTML document. It is everything from the opening tag to the closing tag.
15+
An HTML element is a piece of content in an HTML document.
1616

1717
## Syntax
1818

19-
HTML elements typically use the following syntax:
20-
2119
```pseudo
22-
<opening tag> content </closing tag>
23-
```
24-
25-
## Example
20+
<opening-tag> content </closing-tag>
2621
27-
```html
28-
<p>Hello World!</p>
22+
<self-closing-element />
2923
```
3024

31-
- `<p>` is the opening tag.
32-
- `Hello World!` is the content.
33-
- `</p>` is the closing tag.
34-
35-
**Note:** Some HTML elements have no content, like the `<br>` element. These elements are called empty elements. Empty elements do not have a closing tag, so they are referred to as self-closing. Also, self-closing tags such as `<br>` can have a slash at the end like so: `<br />`.
25+
Most elements are made of opening and closing [tags](https://www.codecademy.com/resources/docs/html/tags) but some are self-closing. Furthermore, some self-closing elements like [`<br>`](https://www.codecademy.com/resources/docs/html/elements/br) can have a slash at the end like so: `<br />`.
3626

37-
## Nested HTML Elements
27+
## Nested Elements
3828

3929
HTML elements can be nested, which means that elements can contain other elements inside them, or nested. All HTML documents consist of nested HTML elements.
4030

@@ -49,24 +39,3 @@ The following example contains four HTML elements: `<html>`, `<body>`, `<h1>`, a
4939
</body>
5040
</html>
5141
```
52-
53-
## HTML Structure
54-
55-
HTML is organized into a family tree structure. HTML elements can have parents, grandparents, siblings, children, grandchildren, etc.
56-
57-
```html
58-
<body>
59-
<div>
60-
<h1>Heading 1</h1>
61-
<h2>Heading 2</h2>
62-
</div>
63-
</body>
64-
```
65-
66-
Here are the relationships depicted above in relation to the `<h1>` tag:
67-
68-
- `<h1>` is the child of `<div>`
69-
- `<div>` is the parent of the `<h1>`
70-
- `<h1>` is the grandchild of `<body>`
71-
- `<body>` is the grandparent of the `<h1>`
72-
- `<h1>` is the sibling of `<h2>`

‎content/html/concepts/tags/terms/a/a.md‎ renamed to ‎content/html/concepts/elements/terms/a/a.md‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,40 @@ Subjects:
66
- 'Web Design'
77
Tags:
88
- 'Anchor'
9+
- 'Elements'
910
- 'Link'
1011
- 'URL'
1112
CatalogContent:
1213
- 'learn-html'
1314
- 'paths/front-end-engineer-career-path'
1415
---
1516

16-
The `<a>` HTML tag, also known as the anchor tag, creates a link to another page or to a location in the current page. It can also be used to link to email addresses, phone numbers, and files.
17+
The **`<a>`** element, also known as the "anchor" element, creates a link to another page or to a location in the current page. It can also be used to link to email addresses, phone numbers, and files.
1718

1819
## Syntax
1920

20-
```html
21+
```pseudo
2122
<a href="url">Displayed Text</a>
2223
```
2324

24-
The following attributes are commonly used in the `<a>` tag:
25+
The following attributes are commonly used in the `<a>` element:
2526

26-
- `href`, which represents the URL that the link points to.
27+
- `href`, which represents the [URL](https://www.codecademy.com/resources/docs/general/url) that the link points to.
2728
- `target`, which represents where to open and display the URL stored in the `href`.
29+
- `rel`, which describes the link type of for the element (e.g., using `"noopener"` and `"noreferrer"` when adding browser safeguards to links).
2830

2931
## Example
3032

31-
The following example shows a list of [links](https://www.codecademy.com/resources/docs/html/links) that utilize the `<a>` tag:
33+
The following example shows a list of [links](https://www.codecademy.com/resources/docs/html/links) that utilize the `<a>` element:
3234

3335
```html
3436
<ul>
3537
<!-- External Link -->
36-
<li><a href="https://codecademy.com" target="_blank">Codecademy</a></li>
38+
<li>
39+
<a href="https://codecademy.com" target="_blank" rel="noreferrer noopener"
40+
>Codecademy</a
41+
>
42+
</li>
3743

3844
<!-- Internal Link -->
3945
<li><a href="#about-us">About Us</a></li>

‎content/html/concepts/tags/terms/abbr/abbr.md‎ renamed to ‎content/html/concepts/elements/terms/abbr/abbr.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@ Subjects:
77
Tags:
88
- 'Accessibility'
99
- 'DOM'
10+
- 'Elements'
1011
- 'Semantic'
1112
- 'Tags'
1213
CatalogContent:
1314
- 'learn-html'
1415
- 'paths/front-end-engineer-career-path'
1516
---
1617

17-
The `<abbr>` tag indicates an acronym or abbreviation of a longer word or phrase. It can use the `title` attribute which is optional but recommended.
18+
The **`<abbr>`** element indicates an acronym or abbreviation of a longer word or phrase. It can use the `title` attribute which is optional but recommended.
1819

1920
## Syntax
2021

‎content/html/concepts/tags/terms/acronym/acronym.md‎ renamed to ‎content/html/concepts/elements/terms/acronym/acronym.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@ Subjects:
77
Tags:
88
- 'Accessibility'
99
- 'DOM'
10+
- 'Elements'
1011
- 'Semantic'
1112
- 'Tags'
1213
CatalogContent:
1314
- 'learn-html'
1415
- 'paths/front-end-engineer-career-path'
1516
---
1617

17-
The `<acronym>` was used to highlight acronyms before it was deprecated. The [`<abbr>`](https://www.codecademy.com/resources/docs/html/tags/abbr) tag is used instead. When the tag is used, the acronym will be signified with a dotted underline for the word or phrase.
18+
The **`<acronym>`** element was used to highlight acronyms before it was deprecated. The [`<abbr>`](https://www.codecademy.com/resources/docs/html/elements/abbr) tag is used instead. When the tag is used, the acronym will be signified with a dotted underline for the word or phrase.
1819

1920
## Syntax
2021

‎content/html/concepts/tags/terms/applet/applet.md‎ renamed to ‎content/html/concepts/elements/terms/applet/applet.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ Subjects:
55
- 'Web Development'
66
- 'Web Design'
77
Tags:
8+
- 'Elements'
89
- 'Tags'
910
- 'Obsolete'
1011
CatalogContent:
@@ -13,7 +14,7 @@ CatalogContent:
1314
- 'paths/front-end-engineer-career-path'
1415
---
1516

16-
The `<applet>` tag was used to embed Java applets into an HTML page. It has since been deprecated and removed from the [HTML specification](https://html.spec.whatwg.org/). This tag should no longer be used as browsers no longer support it.
17+
The **`<applet>`** element was used to embed Java applets into an HTML page. It has since been deprecated and removed from the [HTML specification](https://html.spec.whatwg.org/). This tag should no longer be used as browsers no longer support it.
1718

1819
## Syntax
1920

@@ -26,7 +27,7 @@ The `<applet>` tag was used to embed Java applets into an HTML page. It has sinc
2627

2728
A `code` attribute supplied the URL for a given Java class file. It could also use common attributes like `width` and `height`.
2829

29-
The `<applet>` tag included zero or more [`<param>`](https://www.codecademy.com/resources/docs/html/tags/param) tags to pass parameters on to the Java applet. Its functionality is now incorporated into the [`<object>`](https://www.codecademy.com/resources/docs/html/tags/object) tag.
30+
The `<applet>` element included zero or more [`<param>`](https://www.codecademy.com/resources/docs/html/tags/param) tags to pass parameters on to the Java applet. Its functionality is now incorporated into the [`<object>`](https://www.codecademy.com/resources/docs/html/tags/object) tag.
3031

3132
```html
3233
<!-- This is no longer supported -->

‎content/html/concepts/tags/terms/audio/audio.md‎ renamed to ‎content/html/concepts/elements/terms/audio/audio.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ Subjects:
55
- 'Web Development'
66
- 'Web Design'
77
Tags:
8+
- 'Elements'
89
- 'Tags'
910
CatalogContent:
1011
- 'learn-html'
@@ -27,7 +28,7 @@ HTML supports the following audio formats:
2728
</audio>
2829
```
2930

30-
The `<audio>` tag may contain one or more `<source>` tags with different audio formats. The browser will run the format most suitable for the browser.
31+
The **`<audio>`** element may contain one or more [`<source>`](https://www.codecademy.com/resources/docs/html/elements/source) elements with different audio formats. The browser will run the format most suitable for the browser.
3132

3233
The `<audio>` tag may include `<source>` tags and fallback text. It may also use attributes to convey intention, such as the ones listed below:
3334

@@ -46,4 +47,4 @@ The `<audio>` tag may include `<source>` tags and fallback text. It may also use
4647
</audio>
4748
```
4849

49-
In the example above, the `<audio>` tag contains the `controls` attribute to display user controls for the audio content such as a play and pause button. In addition, there are two `<source>` tags with different audio formats. If the browser doesn't support the **.ogg** file format, it will use the **.mp3** file. Lastly, the text that follows the `<source>` tags will display if the `<audio>` tag is not supported by the browser.
50+
In the example above, the `<audio>` element contains the `controls` attribute to display user controls for the audio content such as a play and pause button. In addition, there are two `<source>` tags with different audio formats. If the browser doesn't support the `.ogg` file format, it will use the `.mp3` file. Lastly, the text that follows the `<source>` tags will display if the `<audio>` tag is not supported by the browser.

‎content/html/concepts/tags/terms/b/b.md‎ renamed to ‎content/html/concepts/elements/terms/b/b.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ Subjects:
55
- 'Web Development'
66
- 'Web Design'
77
Tags:
8+
- 'Elements'
89
- 'Tags'
910
- 'Style'
1011
CatalogContent:
1112
- 'learn-html'
1213
- 'paths/front-end-engineer-career-path'
1314
---
1415

15-
The `<b>` element is used to draw the reader's attention to the marked text without assigning any additional importance to it. This is typically done by making the text bold.
16+
The **`<b>`** element is used to draw the reader's attention to the marked text without assigning any additional importance to it. This is typically done by making the text bold.
1617

1718
**Note:** Original legacy usage of this tag is just to set text as bold, but it should now be avoided for solely styling text. Best practice to use [CSS](https://www.codecademy.com/resources/docs/css) for text formatting. The CSS element used for making boldface text is [`font-weight`](https://www.codecademy.com/resources/docs/css/typography/font-weight).
1819

‎content/html/concepts/tags/terms/blink/blink.md‎ renamed to ‎content/html/concepts/elements/terms/blink/blink.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ Subjects:
55
- 'Web Development'
66
- 'Web Design'
77
Tags:
8+
- 'Elements'
89
- 'Tags'
910
- 'Style'
1011
- 'Obsolete'
@@ -13,7 +14,7 @@ CatalogContent:
1314
- 'paths/front-end-engineer-career-path'
1415
---
1516

16-
The `<blink>` tag is an obsolete tag that was historically used to make text flash on and off. However it is now considered to be obsolete and non-standard. It is depreciated from most browsers, and is not part of the current [HTML specifications](https://html.spec.whatwg.org/).
17+
The `<blink>` element is an obsolete tag that was historically used to make text flash on and off. However it is now considered to be obsolete and non-standard. It is now deprecated from most browsers, and is not part of the current [HTML specifications](https://html.spec.whatwg.org/).
1718

1819
Using this tag is a bad design practice and is heavily discouraged by [accessibility standards](https://www.w3.org/WAI/standards-guidelines/wcag/). The [CSS specification](https://www.w3.org/TR/css-2021/) allows browsers to ignore this tag.
1920

0 commit comments

Comments
 (0)