Using Text in HTML
Introduction
The past few lessons have been the basics of HTML. Now we are going to move onto the fun stuff: putting actual text on our screen! By the end of this lesson, you will learn enough to do things like this:
As you can see, there are things like headers, bolded words, italicized words, and more. We will learn all of that in this lesson.
Overview
By the end of this lesson, you should be able to:
- Add paragraphs in HTML
- Add different types of headers on your site
- Bold & Italicize words
- Adding and Using comments
- Understand how nesting elements works
The <p> tag
The <p> tag is the paragraph tag and it does exactly what it sounds like. With the <p> tag, we are able to create paragraphs on our website. Let’s see it in action:
<p>This is a paragraph</p>
<p>This is another paragraph element!</p>Go ahead and try to add some <p> tags into your HTML file from our previous boilerplate lesson.
One thing to notice is how we have two different lines. If we just wrote the text inside the body without any tags, they won’t create a separate line.
Headings
Heading tags are used to organize content on a webpage and make it easier to read. They come in six sizes, from <h1> to <h6>, with <h1> being the biggest. They help to establish the page structure and draw attention to important sections. They act as a visual cue, making it easier for users to understand the content and structure of a page.
<!-- Headers in HTML-->
<h1>This is a h1</h1>
<h2>This is a h2</h2>
<h3>This is a h3</h3>
<h4>This is a h4</h4>
<h5>This is a h5</h5>
<h6>This is a h6</h6>
<!-- Headers range from
biggest to smallest in
HTML -->
Recap: Headings go from 1 – 6 with 1 being the biggest and 6 being the smallest. We can use them as visual cues and to determine the structure of our website!
Bolding Text
Bolding text in HTML is a useful way to draw attention to certain words or phrases on a webpage. It is done using the <strong> tag, which adds a bold style to the selected text. This can be helpful in emphasizing certain points, or helping to make the content more readable. Bolding text is also a great way to break up long blocks of text and make it easier to skim and find the information you need. Here is an example of the <strong> tag in action!
<strong>I am bolded</strong>
<p>Only <strong>THIS</strong> word is bolded</p>
<p>Here, <strong>two</strong> words are <strong>bolded</strong></p>And our output would look something like this:
Anything that we need bolded will go inside of the <strong> tag. One thing to also understand is that in the second example here, we have nested the strong tag. We’ll learn more about nesting later, but basically we have a tag inside of a tag. I highly encourage playing around with nesting and understand how it works.
Note:
You can also use the <b> tag to bolden as well. There is no difference between using <strong> and <b>.
Italicizing Text
Just like how we can bold text in HTML, we can also italicize them using the <em> or <i> tag, either one works. The content that we want to italicize will be wrapped inside those tags just like how we did with the <strong> tag in the previous section. Take a look:
<em>I am italicized </em>
<p>Only <em>THIS</em> word is italicized</p>
<p>Here, <em>two</em> words are <em>italicized</em></p>Now, if we put this in our HTML file, our output on the browser would look something like this:
Comments!
In HTML, we have something called comments. Comments are something that we write in our code editor that the browser can’t read. Only we are able to see them. There are a lot of reasons for why we can use them.
- Help us understand our code better
- Comment out lines of code we don’t want
- Make it easier for someone else to read our code
Here is how we make comments in HTML. The syntax is <!-- Your Comment -->. It looks a bit weird, but you’ll get used to it the more you use it. Here is an example down below:
<!-- This is an HTML comment! -->
<!-- In HTML, our comments
can also be multi-line! -->Comments are highly suggested when you are working on big projects because it will help you understand which parts of your website are which and make it easier to debug if you have any problems.
Nesting Elements
So by now, you should know how to bold and italicze text/elements. But what if we wanted to bold and italicize some text. How would we do that? Before scrolling down and seeing how we do it, take a second or two and think about how it could be done.
Alright, so here is how it is done:
<!-- Nesting a <strong> tag inside of an <em> tag inside of a <p> tag: -->
<p><em><strong>I am bolded and italicized!</strong></em></p>As you can see, we are nesting the elements to achieve bolding and italicizing. We are putting the <em> tag in the paragraph and then putting the <strong> tag inside the <em>tag. And then inside it all, we are putting our content. Here is another way to visualize it:
<!-- An alternate way to show nesting: -->
<p>
<em>
<strong>
I am bolded and italicized!
</strong>
</em>
</p>Hopefully this makes sense now. We are nesting the elements to achieve this. As you will see in later lessons and other languages like CSS and JavaScript, nesting is an important concept in programming.
Practice
- Write the HTML code to create a webpage with the following content:
- A header that says “My Favorite Animals”
- A paragraph that says “My favorite animals are dogs and cats. Dogs are loyal and friendly, and cats are independent and playful. Both make great pets.”
- A bolded phrase that says “Dogs are loyal”
- An italicized phrase that says “Cats are independent”
2. Hopefully, you are now comfortable with these basic HTML elements. Now go ahead and customize the basic website you just made however you want! Try adding in some nested elements (bolded and italicized!) and go ahead and add some comments to your code. Make sure you understand these elements before moving on.
Find an issue/typo/error with our content? Please report it here