HTML typography: formatting text with bold, italic, headers and lists

Time to learn about some more HTML tags!

Emphasizing text: bold and italic

There are two classic ways to emphasize certain parts of your text: put it in bold or in italic.

To put some words in bold, place them between <strong> tags, like this:

<strong>this text will show up bold</strong>

To put words in italic, use the <em> tag, like this:

<em>this text will show up in italic</em>

Easy! Remember, it is ok to nest HTML tags, so you can do something like this without trouble:

<p>
This is a paragraph of text. <strong>This phrase is bold, and <em>this word is bold AND italic</em> while this is again only bold.
</p>

Headers of different importance

These already were mentioned in the hello world article, and in the introduction to HTML tags. Use the <h1>,<h2>,<h3>… tags to emphasize headers and subheaders.

Ordered lists and unordered lists

Another common element of typography is the list. You use a list whenever you want to sum up something. Lists can be ordered and have numbers in front of each item, or unordered, with bullet points.

An unordered list is specified using the <ul> tag, with <li> tags for each list item (List Item… get it?), like this:

Cool web languages to learn:
 <ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>Javascript</li>
 <li>PHP</li>
 </ul>

And here is how that would look in a browser:

Screen Shot 2014-01-19 at 23.01.28

An ordered list is specified using the <ol> tag, with again <li> tags for each list item:

Steps to master building web sites:
 <ol>
 <li>Launch browser</li>
 <li>Browse to webcodingforidiots.com</li>
 <li>Open my text editor</li>
 <li>Type whatever the hell Web Coding For Idiots tells me to type.</li>
 </ol>

And here is how the ordered list would look in a browser. The items get numbered automatically:

Screen Shot 2014-01-19 at 23.00.53

That’s it! Happy formatting your text!

Because sometimes a simple list doesn’t cut it, we’ll get you swimmin’ in even more tags in our next lesson about HTML tables.

Advertisements

3 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s