Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update grammar in web/html #2789

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/html/citation-elements/address.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ revisionQuestion:

## Content

The HTML `<address>` element is used to provide contact information about the author. This element is displayed as a block element and has a default styling like the `<i>` and `<em>` elements (the text is italic).
The `<address>` element is used to provide contact information about the author. It is displayed as a block element and has a default styling like the `<i>` and `<em>` elements (the text is *italic*).

![address](https://img.enkipro.com/9ec8992af472e5a9d37e0d1f01a1d69a.png)

Expand Down
7 changes: 2 additions & 5 deletions web/html/citation-elements/blockquotes.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,7 @@ revisionQuestion:

## Content

The HTML `<blockquote>` element or the **Block Quotation** element is used to enclose text which represents an extended or long quotation. This element is displayed as a block element and usually has a 1em top/bottom margin added by default, as well as a left/right indentation of 40 pixels. This can all be editable with CSS styling.

Example:
The `<blockquote>`, or the **Block Quotation** element, is used to enclose text which represents an extended or long quotation. It is displayed as a block element, and usually has a `1em` top/bottom margin added by default as well as a left/right indentation of `40 pixels`. This is all editable with CSS styling.

```html
<blockquote>
Expand Down Expand Up @@ -63,8 +61,7 @@ quotes/arthur_c_clarke_408582">

![blockquote-with-cite](https://img.enkipro.com/f702ae2ea6852ec747ae0ee7518ea83b.png)

If you wish to add a short quote to your web page or document, you should use the `<q>` or the **Quotation element**.
Example:
If you wish to add a short quote to your web page or document, you should use the `<q>` or the **Quotation element**:

```html
<q>I have a dream!</q>
Expand Down
6 changes: 3 additions & 3 deletions web/html/citation-elements/intro-bdi.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@ revisionQuestion:

## Content

The HTML `<bdi>`, or the **Bidirectional Isolation** element, is used to isolate a span of text that might be formatted in a different direction than other text - typically working with languages from different languages whose direction is unknown.
The `<bdi>`, or the **Bidirectional Isolation** element, is used to isolate a span of text that might be formatted in a different direction than other text, typically working with languages whose direction is unknown.

For instance, you can use this on a text that is in English (written left-right), to present it in Arabic (written right-left). The '[user agent](https://developer.mozilla.org/en-US/docs/Glossary/user_agent)' detects that the text should be rendered differently and adjusts accordingly.
For instance, you can use this on a text in English (written left-right) to present it in Arabic (written right-left). The '[user agent](https://developer.mozilla.org/en-US/docs/Glossary/user_agent)' detects that the text should be rendered differently and adjusts accordingly.

If you don't use the `<bdi>` element when working with alphanumeric numbers and Arabic text can you see how the code doesn't display as you would expect?:
If you don't use the `<bdi>` element when working with alphanumeric numbers and Arabic text, can you see how the code doesn't display as you would expect?:

```html
<p>
Expand Down
2 changes: 1 addition & 1 deletion web/html/citation-elements/intro-bdo.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ revisionQuestion:

## Content

The HTML `<bdo>`, or the **Bidirectional Text Override** element, is used to override the current directionality of text. This means that you can have text written in one direction, render and display in the opposite direction.
The `<bdo>`, or the **Bidirectional Text Override** element, is used to override the current directionality of text. This means that you can have text written in one direction, render and display in the opposite direction.

This element can have only one attribute, `dir`, with only 2 two possible values:

Expand Down
28 changes: 14 additions & 14 deletions web/html/citation-elements/intro-cite.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,18 @@ revisionQuestion:

## Content

The HTML `<cite>` element is used to describe a reference of a cited **creative work**. This element needs to contain either the title or the URL of the cited work.
The `<cite>` element is used to describe a reference of a cited **creative work**. This element needs to contain either the title or the URL of the cited work.

What falls under creative work:

- Any online content
- Any book
- Any computer program
- Any original writing
- Any exhibition
- Any video
- Any legal writings
- Any original artwork
- Any research paper
- Online content
- Books
- Computer programs
- Original writing or artwork
- Exhibitions
- Videos
- Legal writings
- Research paper

```html
<p>
Expand All @@ -49,7 +48,8 @@ What falls under creative work:

![cite](https://img.enkipro.com/28852f600f281af9f98989e02b4471bc.png)

The cited URL under the `<cite>` element will, by default, display in <i>italic</i>. However, this is easily editable by adding the `font-style` CSS property to the `<cite>` element and changing the default value to 'normal' or even 'oblique' (aka bold).

By default, the URL under the `<cite>` element will display in *talic*. However, this is easily editable by adding the `font-style` CSS property to the `<cite>` element, and changing the default value to "normal" or even "oblique" (aka **bold**).

[View CodePen](https://codepen.io/enkidevs/pen/xzyKBz)

Expand All @@ -65,8 +65,8 @@ Which statement about the `<cite>` element is not correct?
- displays as a block element
- used for indicating a citation
- default font style is italic
- works such as book, essay, poem, & script
- works such as movie, play, song, & TV show.
- used for books, essays, poems, or scripts
- used for movies, plays, songs, or TV Shows.
- displays as an inline element


Expand All @@ -92,7 +92,7 @@ and Technicolor.
</p>
```

What HTML element is best to use in this example?
Which HTML element is best to use in this example?

```html
tag = ???
Expand Down
2 changes: 1 addition & 1 deletion web/html/citation-elements/intro-q.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ revisionQuestion:

## Content

The HTML `<q>`, or the **Inline Quotation** element, is used for indicating short quotations. This element is displayed as an inline element and is typically used for short quotations that don't require paragraph breaks. On the other hand, if you need a larger quotation, you should use the `<blockquote>` element.
The `<q>`, or the **Inline Quotation** element, is displayed as an inline element and is typically used for short quotations that don't require paragraph breaks. On the other hand, if you need a larger quotation, you should use the `<blockquote>` element.

Most browsers display the `<q>` element by placing quotation marks around the content.

Expand Down
4 changes: 2 additions & 2 deletions web/html/computer-code/intro-code.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ revisionQuestion:

## Content

The HTML `<code>` element is used to display a fragment of a computer code.
The `<code>` element is used to display a fragment of a computer code.

Example:

Expand All @@ -38,7 +38,7 @@ Code Result:

![code-element](https://img.enkipro.com/ac35ba3ba120e7bad24f65ba88ec7776.png)

The default font style for the `<code>` element for most browsers is the monospace font.
For most browsers, the default font style for the `<code>` element is the monospace font.

> 💡 It's best to use the `<code>` element to style content for HTML elements, CSS rules, filenames, and JS scripts. With a little CSS, the code used can stand out more on a page like this:

Expand Down
10 changes: 4 additions & 6 deletions web/html/computer-code/intro-kbd.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,7 @@ revisionQuestion:

## Content

The HTML `<kbd>`, or the **Keyboard Input** element, is used to represent user input, such as keys on a keyboard, voice commands, or any other textual input.

Example:
The `<kbd>`, or the **Keyboard Input** element, is used to represent user input, such as keys on a keyboard, voice commands, or any other textual input.

```html
<p>
Expand All @@ -36,13 +34,13 @@ Example:
</p>
```

Keyboard Input Result:
Which looks like this:

![kbd-element](https://img.enkipro.com/1547a0d6d7db30a6fe78ee9d06385c90.png)

The default font style for the `<kbd>` element for most browsers is the monospace font.
For most browsers, the default font style for the `<kbd>` element is the monospace font.

By adding CSS styles, the `<kbd>` element can be used to present the user input in much better ways.
By adding CSS styles, the `<kbd>` element can present user input in a more visually pleasing way.

![kbd-element-styled](https://img.enkipro.com/5a394fbb97415d313778c2b81d93749e.png)

Expand Down
2 changes: 1 addition & 1 deletion web/html/computer-code/intro-pre.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ revisionQuestion:

## Content

The HTML `<pre>`, or the **Pre-formatted Text** element, is used to display text exactly as it is within the HTML file. This means that text and all the spaces within the `<pre>` element will all be displayed in the space exactly. This is useful since HTML typically ignores multiple spaces.
The `<pre>`, or the **Pre-formatted Text** element, is used to display text exactly as it is within the HTML file. This means that text and all the spaces within the `<pre>` element will display exactly as they look. This is useful since HTML typically ignores multiple spaces.

Example:

Expand Down
4 changes: 2 additions & 2 deletions web/html/computer-code/intro-samp.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ revisionQuestion:

## Content

The HTML `<samp>`, or the **Sample Output** element, is used to represent a sample output from a computer program.
The `<samp>`, or the **Sample Output** element, is used to represent a sample output from a computer program.

Example:

Expand All @@ -40,7 +40,7 @@ Sample Output Result:

The default font style for the `<samp>` element for most browsers is the monospace font.

By adding CSS styles, the `<samp>` element can be used to present the sample output from a computer program in much better ways.
By adding CSS styles, the `<samp>` element can be used to present the output from a computer program in a more visually pleasing way.

![samp-element-styled](https://img.enkipro.com/d2ec92c8d3a7be6ac739a44ee6ef01fc.png)

Expand Down
4 changes: 2 additions & 2 deletions web/html/computer-code/intro-var.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ revisionQuestion:

## Content

The HTML `<var>`, or the **Variable** element, is used to represent a name of a variable in either a programming context or a mathematical expression.
The `<var>`, or the **Variable** element, is used to represent a name of a variable in either a programming context or a mathematical expression.

Example:

Expand All @@ -42,7 +42,7 @@ Variable Result:

The default text style for the `<var>` element for most browsers is both monospace and italic.

By adding CSS styles, the `<var>` element can be used to present variables in much better ways.
By adding CSS styles, the `<var>` element can display variables more clearly.

![var-element-style](https://img.enkipro.com/2015fe3ff38303e757e8f246d7c5b1a1.png)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ If you're stuck or need inspiration, check out our [playground example](https://

> Here are some examples on how you can style your elements:

Chaining css properties together.
Chaining CSS properties together.

```css
<element style="property1:value1;property2:value2">
Expand Down
8 changes: 4 additions & 4 deletions web/html/core-html-elements/headings-h1-h6.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ revisionQuestion:

## Content

The HTML heading elements are very important when determining the style and structure of text within web pages.
The HTML heading elements are essential when determining the style and structure of text within web pages.

There are 6 headings in HTML5 ranging from `<h1>` to `<h6>`. `<h1>` being the largest in size by default and most important by search engines. `<h6>` being the smallest and least important of the text headings within a web page.
There are 6 headings in HTML5 ranging from `<h1>` to `<h6>`. `<h1>` being the largest by default and most important to search engines. `<h6>` being the smallest and least important of the text headings within a web page.

Example:

Expand All @@ -45,11 +45,11 @@ Headings appear like this:

[View CodePen](https://codepen.io/enkidevs/pen/KBMMBb)

Search engines interpret headings as part of your page and use the hierarchy to help understand the importance of the content of the web page. It is important that regardless of how much content the web page has, each web page has at least one `<h1>` highlighting the most important topic of the page.
Search engines interpret headings as part of your page and use the hierarchy to help understand the importance of the web page's content. It is important that regardless of how much content the web page has, each web page has at least one `<h1>` highlighting the most important topic of the page.

An `h1` should describe the topic of the entire page. `h2`'s typically describe primary blocks of content within the page, and `h3`'s describe less important blocks of content, etc.

Headings are also useful for readability since users typically skim through pages primarily scanning the headings first. Thus, the size of the headings can help provide visual cues to the importance of different sections of the web pages.
Headings are also helpful for readability since users typically skim through pages, primarily scanning the headings first. Thus, their size can help provide visual cues to the importance of different sections of the web pages.

*Additional Tips:*

Expand Down
2 changes: 1 addition & 1 deletion web/html/core-html-elements/style-element.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ revisionQuestion:

## Content

The HTML `style` element is used to style the content of an html document. These styles are loaded with the HTML page and work even if external CSS fails to load for some reason. The `style` tag is often used to load **Critical CSS**[1]
The `<style>` element is used to style the content of an HTML document. These styles are loaded with the HTML page and work even if external CSS fails to load for some reason. The `style` tag is often used to load **Critical CSS**[1]

```html
<head>
Expand Down
16 changes: 8 additions & 8 deletions web/html/core-html-elements/update-hyperlinks.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ revisionQuestion:

## Content

Hyperlinks are more commonly called just 'links' in HTML. They are very useful for navigating from one document to another or even different sections of long web pages.
Hyperlinks are more commonly just called "links" in HTML. They are very useful for navigating from one document to another or even different sections of long web pages.

- By default, unvisited links are blue and underlined.
- Whereas links you have already clicked on at least once are red.
Expand Down Expand Up @@ -50,15 +50,15 @@ Result:

[View CodePen](https://codepen.io/enkidevs/pen/vaKKQZ)

In the example above, the `Visit Enki's 5-minute workouts!` is the hyperlink, and by clicking on the text will open the URL provided in the `href="URL"` attribute. The attribute `href` is the most important element because it specifies the destination(URL) of where the link should open.
In the example above, the `Visit Enki's 5-minute workouts!` is the hyperlink, and clicking on the text will open the URL provided in the `href="URL"` attribute. The `href` attribute is important because it specifies the destination(URL) of where the link should open.

By default, links open within the existing tab or window. The linked page can be directed to open differently by setting \the `_target="???"` attribute with these options:
By default, links open within the existing tab or window. The linked page can be directed to open differently by setting the `_target="???"` attribute with these options:

- _self = Default setting. Opens the link in the same tab or window.
- _top = Opens the link in the full body of the window.
- _parent = Opens the link in the parent frame.
- _blank = Opens the link in a new tab or window.
- framename = Opens the link in a named frame.
- `_self` = Default setting. Opens the link in the same tab or window.
- `_top` = Opens the link in the full body of the window.
- `_parent` = Opens the link in the parent frame.
- `_blank` = Opens the link in a new tab or window.
- `framename` = Opens the link in a named frame.

Opening the link in a new tab is written like this:

Expand Down
2 changes: 1 addition & 1 deletion web/html/formatting-elements/intro-hr.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ revisionQuestion:

## Content

The HTML `<hr>`, or the **Thematic Break** element, is used to create a thematic break between a paragraph of elements. This break is usually represented as a horizontal line and the element itself is a self-closing element, meaning it has no ending tag.
The `<hr>`, or the **Thematic Break** element, is used to create a thematic break between a paragraph of elements. This break is represented as a horizontal line, and the element itself is self-closing; it has no ending tag.

> 💡 In HTML4.01 the `<hr>` element used to represent a horizontal rule, hence the name `hr`, nevertheless that was changed in HTML5 and now it represents a thematic break.

Expand Down
4 changes: 2 additions & 2 deletions web/html/formatting-elements/intro-span.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ revisionQuestion:

## Content

The HTML `<span>` element is used to style inline HTML elements, meaning that it can style elements that are already on a line with other elements. By itself, the element does not represent any visual change by itself and CSS is required to style it.
The `<span>` element is used to style inline HTML elements, meaning that it can style elements that are already on a line with other elements. By itself, the element does not represent any visual change, and it requires CSS to style it.

**Notes:**

Expand All @@ -38,7 +38,7 @@ Example:
</p>
```

The above example with HTML alone does pretty much nothing, whereas this example styles the text green based on the properties assigned to the class brand:
The above example with HTML alone does pretty much nothing. Whereas the following example styles the text green based on the properties assigned to the `"brand-color"` class:

```html
<p>Normal text here.
Expand Down
12 changes: 5 additions & 7 deletions web/html/formatting-text-elements/editing-s-del-ins.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,35 +27,33 @@ revisionQuestion:

### Strikethrough Text

The HTML `<s>`, or the **Strikethrough Text** element, is used to create a strikethrough in a text. This is usually used to specify that some text is no longer correct or relevant.

Example:
The `<s>`, or the **Strikethrough Text** element, is used to create a strikethrough in a text. This is usually used to specify that some text is no longer correct or relevant.

```html
I have $40 left in my account.
I have <s>$40</s> $35 left in my account
```

Strikethrough Text Result:
Strikethrough Result:

![editing-elements-s](https://img.enkipro.com/29c16ad8b52b7a27bd7837d87d7878ec.png)

[View CodePen](https://codepen.io/enkidevs/pen/LBxVxz)

**Notes:** If you want to indicate a document edit, don't use the `<s>` element, you should use the `<del>` and/or `<ins>` elements instead.
> 💡 If you want to indicate a document edit, don't use the `<s>` element, you should use the `<del>` and/or `<ins>` elements instead.

### Deleted & Inserted Text

Next, the `<del>`, or the **Deleted Text** element, is used to specify that some text has been deleted and the `<ins>`, or the **Inserted Text** element, is used to indicate that some text was inserted/added to the document.

Both elements have the same 2 element-specific attributes:
Both elements have the same two element-specific attributes:

1. `cite`
2. `datetime`

The `cite` attribute is used to specify the URL which explains the change.

The `datetime` attribute is used to indicate the time of the change and the date has to be properly specified (YYMMDD), otherwise it won't parse properly and the element won't have a time stamp.
The `datetime` attribute is used to indicate the time of the change and the date has to be properly specified (YYMMDD), otherwise it won't parse and the element won't have a time stamp.

The `<del>` element is usually rendered with strikethrough text, whereas the `<ins>` is usually rendered with underlined text.

Expand Down
6 changes: 2 additions & 4 deletions web/html/formatting-text-elements/emphasis-i-and-em.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ revisionQuestion:

## Content

The HTML `<i>` and `<em>` elements appear very similar since they both have the same default CSS styling of `font-style: italic`. But they both have different purposes.
The `<i>` and `<em>` elements appear very similar since they both have the same default CSS styling of `font-style: italic`. However, they have different purposes.

The `<i>` element, which stands for **Italic**, is used set a part of a text in a different tone. These parts of text may include:

Expand Down Expand Up @@ -85,14 +85,12 @@ Furthermore, the `<em>` element is a little different from the `<i>` element in

[View CodePen](https://codepen.io/enkidevs/pen/GBrpgb)

This is good for expressing a greater degree of emphasis in a sentence. Also, by default nested `<em>` elements they will display the same. Nevertheless, you can use `em > em` in CSS to style nested `<em>` elements.
This is good for expressing a greater degree of emphasis in a sentence. Also, by default, nested `<em>` elements will display the same. Nevertheless, you can use `em > em` in CSS to style nested `<em>` elements.

### Used Together

Additionally, the `<em>` and `<i>` elements can be used together.

EM & I Example:

```html
<p>
The
Expand Down
Loading