My Biggest Academic Distraction: Formatting Text
Tags: html, beginners, bootcamp
Published: 2022-08-29 07:01:50

Yes, I am a sucker for formatting. Not just text, but also spreadsheets, and presentation slides, and now, it's gonna be code! I NEED AN ADULT!!!

## **The formats:**

### `<p>` Tags (Paragraph tags)
The `<p>` tags create paragraphs of text in the body of the html document. This tag can be used multiple times within the same line to create multiple paragraphs. I did this along with the video using VS Code, but we'll use Markdown here since it's available, and there is a cool code feature I found. :D

Take a look at the following example. Here is the code as written in the html file: 

```
<p>When I'm hungry, I cut a small cube of cheese from the block.</p><p>I then proceed to eat the block</p>
```

And here is the result of the code: 

---
<p>When I'm hungry, I cut a small cube of cheese from the block.</p><p>I then proceed to eat the block</p>
---

### Headers <h_>
There are 6 header styles, all denoted by the letter "h" followed by the a number selected from between 1 and 6. Here is a coded example of each:
```
<h1>This is H1 header style</h1>
<h2>This is H2 header style</h2>
<h3>This is H3 header style</h3>
<h4>This is H4 header style</h4>
<h5>This is H5 header style</h5>
<h6>This is H6 header style</h6>
```

And here is the result!
<h1>This is H1 header style</h1>
<h2>This is H2 header style</h2>
<h3>This is H3 header style</h3>
<h4>This is H4 header style</h4>
<h5>This is H5 header style</h5>
<h6>This is H6 header style</h6>

<p>Most of us have seen articles, and most of us have learned how to format subjects in a school paper, so use these as you see fit.</p>

### `<b>` Tags (Bold)
The `<b>` tags make the text bold. You can add them into a single sentence/line multiple times. Here is a coded example:
```
My favorite thing to do is read manga on my phone, so 
when I have to focus on something, <b>I</b> 
<b>CHUCK</b> <b>my</b> <b>phone</b> <b>ACROSS</b> 
<b>THE</b> <b>ROOM</b> so that I don't get distracted 
<b>*clears throat loudly*</b>
```

And here is the result:
My favorite thing to do is read manga on my phone, so when I have to focus on something, <b>I</b> <b>CHUCK</b> <b>my</b> <b>phone</b> <b>ACROSS</b> <b>THE</b> <b>ROOM</b> so that I don't get distracted <b>*clears throat loudly*</b>

##### You need to know:
It's apparently discouraged to use the `<b>` tags. According to the video, it's best to use the `<strong>` tag.

Example: 
<strong>It's still good to know the `<b>` tag too I guess?</strong>

###<i> Tags (Italics)
The `<i>` tags make the text italicized. Like the `<b>` tags, you can add them multiple times to the same sentence/line. One difference I'm noticing while writing this, is that the <i> tags don't actually work here in Dev.to! Instead, you have to use the markdown's asterisks (*) or underscores(_)! Also, like with the `<b>` tags, it's discouraged to use the `<i>` tags anyway anyway. Instead, you're supposed to use the `<em>` tags! Oh well... In an HTML document, the `<em>` tag would look like this as code:

```
I may as well use the <em>same</em> sentence from the <b> tags, but... <em>why?</em>
```

And the result would look like:
I may as well use the *same* sentence from the bold section, but... *why*?

---
The reason why the developers of HTML wanted to use `<strong>` and `<em>` was because they felt that they were more semantic in that they matched closer to what people tend to use bold and italicized text **for**: "Strong" for bold, and "Emphasis" for italicized. Face it, they're not wrong...


...It's bed time 

![Blanket, bed, ahhhh...](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ke2t5chlacr5c5nqw40j.gif)