In a browser, all visible content of an HTML document is contained within the
body tag. HTML developers spend most of their time here. All the formatting
and styling, adding in images and links, etc. is work being done for the visible
content of a web page. In modern HTML, there is actually quite a lot that can
go into this work, but when it comes to getting started, the best place is by
adding and formatting the text content.
In this lesson, we will be going over some the basic HTML tags that are important for formatting text.
index.html and take a look at what is there. We see that we have the
basic HTML skeleton provided, so all we need to focus on is adding content to
First, let's get started by typing
Hello World inside the
body tags. With
some content written, we can start up
httpserver and check out what we have. If you open a web
tab that points to this you should see the text 'Hello World' displayed on the
Cool, we've got text on the page! Head back to the text editor, and in
return twice so you're two lines below
Hello World. Here,
Hello Moon. Return to "viewing" browser tab and refresh. Great, but very
plain. In order to actually format text, we will need to wrap our text in
HTML tags. First, we'll start with formatting paragraphs
On the same line as
Hello World, right before, add
<p>, and immediately
</p>. If you do the same for
Hello Moon, then refresh your web
page in the browser, you should notice a change. The
p stands for
paragraph, and is used to wrap text with some built in formatting rules.
Content wrapped in
p tags will be given a small buffer of space around it,
what we call a 'margin', which prevents the text from running right up against
p tag is great for wrapping a one or more sentences of text. If there is a
lot of content on a page, typically each paragraph would be wrapped in its own
p tag, creating visually appealing breaks in the text.
Aside from paragraphs, it would be nice to be able to indicate titles, headings
and subheadings in our page. The way we do this is by using header tags,
written from the largest,
<h1>, down to the smallest,
p tags, inside the
Title within opening and
<h1> tags, and then, on the next line, a smaller subheading that says
<h2>. If we save and look at the HTML in our browser,
refreshing the page, we can see that 'Title' appears much larger as an
Headers are useful for search engine optimization, with the largest heading,
<h1>, carrying the highest importance to search engines. They are also very
useful for breaking up content into a more reader friendly structure.
If you add
<h6> tags to the page, you'll see that
each is slightly smaller than the last.
Sometimes, when it comes to formatting, we want to add some emphasis to a small
part of our text, typically by italicizing a word or a phrase. In this case,
we can use
<em>, for emphasis. In addition, for times when we want to bold
text, we have
<p> <em>Hello World!</em> <strong>Warning!</strong> </p>
If you've dabbled in HTML before, you may be aware that there are two other tags
that can also be used,
<i>, for italics and
<b> for bold. The
<strong> tags were introduced in HTML5 and are newer than
They are part of a shift in the language to emphasize the semantic use of HTML
rather than stylistic use. HTML is a language to markup hypertext; the idea
behind these new tags is that they give meaning to what they wrap, rather than
just styling. Subsequently, the use cases of
<b>- bolds text for stylistic reasons
<i>- used for text that is in an alternate voice, such as a definition or foreign word
<em>- wraps text content that is meant to be emphasized
<strong>- wraps text that is of importance, such as a warning message
<em> both italicize, and
<strong> both bold
text, they are really understood to have four separate use cases.
Okay, it is time to apply what we've learned. In the
index.html, there are
comments regarding the specific deliverables for this lab.
httpserver and open the file in browser to see what your HTML looks like.
If you have the server running, use
C to stop it in order to run
other commands. Once you've done as the comments request, run the
program in the terminal to see whether you've met the tests' expectations.
Keep in mind that after you fix one test, you might face a new one! The tests are guiding you.
There so are many HTML tags that we cannot discuss them all, and many of those tags apply default text formatting. Paragraph and header tags are just some of the most common. The main take away here is that, by using the correct HTML tag, we can apply some simple formatting to turn plain text into something a bit more appealing.