DEV Community

Joel Diharce
Joel Diharce

Posted on • Edited on

My Biggest Academic Distraction: Formatting Text

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>
Enter fullscreen mode Exit fullscreen mode

And here is the result of the code:


When I'm hungry, I cut a small cube of cheese from the block.

I then proceed to eat the block


Headers

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>
Enter fullscreen mode Exit fullscreen mode

And here is the result!

This is H1 header style

This is H2 header style

This is H3 header style

This is H4 header style

This is H5 header style
This is H6 header style

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.

<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>
Enter fullscreen mode Exit fullscreen mode

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

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:
It's still good to know the <b> tag too I guess?

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 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>
Enter fullscreen mode Exit fullscreen mode

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...

Top comments (0)