Skip to content

Typography

Headings

Headings structure your website content. <h1> is the largest and most important information for your site (like name for your website) and <h6> is the least important information.

Headings are important as search engines use these tags to index and internally structurize your website. All headings also have default sizes defined by the browser.

It is usually considered best practice for your website to only have single <h1> tag. This could be your site name or for example name for your page like about, work, portfolio or Aleksi's Site - Portfolio.

Read more about headings from here.

Example:

HTML
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>

Paragraphs

Paragraps are written inside <p></p> tags. Paragraphs by default start on new line. Read more about paragraphs from here.

Example:

HTML
<p>Text is here</p>

Challenge

  1. Create new page wiki.html
  2. Open the file wiki.html in your browser and editor.
  3. Write the basic HTML structure in the file
  4. Use Wikipedia random article search. Copy few sections from Wikipedia ja paste them to your website, adding each section inside <p></p> tags. Add also the corresponding <h1>, <h2>... tags.

Bolds & Italics

Making your text bold or italic is quite philosophical in HTML. There are two ways to make your text look bold and two ways to make your text look italic. The difference for these two options is semantic.

<strong> tag and <b> tags can be used to make text bold. If you want to make strong emphasis on some part of your text, use the strong tag. If you want to make text bold without wanting to add strong emphasis for it, use the b tag.

<em> and <i> tags also can be used to make the text italic. Once again, if you want to emphasize something, use the <em> tag. If you want to make something italic, use the <i> tag.

Here is a good discussion thread about the difference between these elements.

You can also stack / nest HTML elements inside each another. To give emphasis or make certain text bold are good ways to get first touchpoint on this:

Different ways to make text bold

HTML
<p>Let's be <b>bold</b></p>
<p>Let's be <strong>strong</strong></p>

Different ways to emphasis element (make italic):

HTML
<p>Let's be <i>italic</i></p>
<p>Let's be <em>emphasized</em></p>

Info

Another note here is that you should not wrap your whole page / paragraph content inside the bold or italic tags. Later on during the course you will learn about CSS and how to use it to style text to your liking. HTML is only used for defining the structure of your content.

Challenge

Make some parts of your wiki.html text bold / italic / emphasized / strong.

More text formatting

There are quite a lot of more ways to format your text using HTML. For a full reference of HTML formatting elements, check out this page.

Some of the most commonly used elements are:

<hr />: Defines thematic break in your content / horizontal line
<br />: Adds line break between your content
<small></small>: Defines smaller text
<sub></sub>: Defines subscripted text
<sup></sup>: Defines superscripted text

Challenge

Try making some parts of your wiki.html use these new tags that you learned in this section.

Special Characters (HTML Entities)

Some of the special characters you use in HTML will need to be encoded. Some used HTML entities alongside more information can be found from here and full list of HTML entities can be found from here.

Also, in order to render for example html tags in your site, you need to escape the characters for them to print as text instead of html tags.

Challenge 1

Try adding some HTML tags into your front site which render as text but not as HTML elements.

Challenge 2

Add &nbsp; tags to add spacing in some text on your website.

Recap

What we learned here about typography:

  • How make headers
  • How to make paragraphs of text
  • How to make bold / italic / strong / emphasis text
  • HTML Entities