gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added detail and description and fixed grammar (#21480)

Browse Source 
Changed the examples, added more details about each formatting method, and cleaned up grammar. Also made the text easier to read and comprehend, as well as more attractive.
This commit is contained in:
EmeraldEntities
2018-11-13 18:37:09 -05:00
committed by nik
parent e20926ed94
commit 3ecb87155f
1 changed files with 40 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
guide/english/html/tutorials/text-formatting-in-html/index.md
View File

@ -3,64 +3,74 @@ title: Text Formatting in HTML
---
## Text Formatting in HTML
HTML provides you a lot of useful elements for text formatting. It allows to make your text: bold, italic, mark and much more. Changing the style of your text isn't without any reason - the main thing is just make the reader to take a look for some important notes.
HTML provides you with a lot of useful elements for text formatting. It allows to make your text bold, italic, marked and much, much more. Of course, this is all for a reason - to get the important points across to the reader.
### Bold and Strong
You can easily change your text meaning by using HTML `<b>` element. It makes words bold, which function is singling out the fragment of sequence. For example:
You can make your text bold by using the `<b>` element. This makes words bold, and provides strong emphasis to a certain word or phrase.
```
The most important part of your code is <b>the end</b>, because if you <b>don't close</b> the element, it will affect to <b>everything</b>!
<br/>Example:
```html
<p>The most important part of your code is <b>the end</b>, cause it can affect <b>everything!</b></p>
```
You can also use `<strong>` as well - it adds also semantic "strong" importance. Your browser doesn't recognize a difference between those two elements, but it exists.
<br/> Note: You can also use `<strong>` as well. They both bold the text.
### Italic and Emphasized
Usually used when quote something or putting a translate of word in a lot of articles. It makes them italic - just imagine a little kicked in the right letters. For example:
### Italics and Emphasis
If you want to write your messages in italics, you can use the `<i>` element.
```
Theatre - <i>teatos</i>, <i>teates</i> and <i>teatron</i>.
<br/>Example:
```html
<p>I hate it when I start talking in Latin, it makes me <i>Lorem Ipsum</i>!</p>
```
You can also use `<em>` as well - it adds also semantic "emphasized" importance. Your browser doesn't recognize a difference between those two elements, but it exists.
<br/>Note: You can also use `<em>` as well. While visually, they are the same, the semantic definitions are different. `<em>` is generally used for emphasis, while `<i>` can be used for foreign words, etc.
### Small
It makes your text smaller than normal size of used font. This element's meaning was changed in HTML5 - it represents side-comments and small print.
It makes your text smaller than the normal font size. This element's meaning was changed in HTML5 - it now represents side-comments and small print.
```
Normal, <small>small</small>, normal, <small>small</small>!
<br/>Example:
```html
<p>Normal, <small>small</small>, normal, <small>small</small>!</p>
```
### Marked
Element `<mark>` makes your text marked - in other words, it makes your text highlighted. You can use it to tell your readers that it is an important thing in your article. For example:
The element `<mark>` makes your text marked. In other words, it makes your text highlighted. You can use it to tell readers things of importance.
```
HTML is full of things and <mark>it's our journey</mark> to get know them better!
<br/>Example:
```html
<p> The land of HTML is a strange and mysterious land, and it's our job to <mark>explore it all!</mark></p>
```
### Deleted
The element `<del>` makes your text striked in the center. It's useful to show changes in your documents.
```
WWI started in <del>1913</del> 1914 year.
The element `<del>` shows strikethrough. It's useful if you want to <del>corroct</del> correct something.
<br/>Example:
```html
<p>WWI started in <del>1913</del> 1914.</p>
```
### Inserted
Tag `<ins>` makes your text inserted to the article. Using other words that makes it much easier to understand - added. It shows a line under inserted text.
### Underlined
Underlining is a tricky thing in HTML. The best way to underline your code is to use CSS and set `text-decoration` value to "underline". If you need to, the default for the element `<ins>` will underline your code.
<br/>Example:
```html
<p>I like drawing <ins>lines under my words</ins></p>
```
HTML isn't boring. <ins>You can make a lot of combinations of elements!</ins>
```
<br/>Note: `<ins>` actually means "Inserted", and is intended to depict inserted text.
<br/>Note 2:`<u>` used to be underline in HTML 4.01, but in HTML5 it was redefined to show that a word had some form of non-textual annotation applied. The default of `<u>` is a simple underline, but this can be changed using CSS.
### Subscripted
Using element `<sub>` gives you a useful formatting as subscripted text (showing it smaller on the bottom). There is an example code:
Using the element `<sub>` makes your text subscripted (ie. it becomes smaller and gets shown near the bottom).
```
This was in 2003 year <sub>(needs a link)</sub>.
<br/>Example:
```html
<p>I use subscripts in math! For example, I can say x<sub>1</sub>!</p>
```
### Superscripted
If you want to make an opposite to subscripted text, you can easily use `<sup>` element. It shows a smaller text on the top.
If you want to make your text superscripted (ie. it becomes smaller but gets shown near the top), use the element `<sub>`!
```
10<sup>x+y</sup> = 1000
<br/>Example:
```html
<p>10<sup>2</sup> = 100</p>
```