My Logo

My amazing HTML site

Text Elements in HTML

There are a number of key elements used to form and describe the text that is displayed in webpages, emails and apps.

It is normal to start here by breaking up the page into zones in the same way you might tructure a word document starting with the main hading for the document and then proceeding to sub headings and so forth before contermpklating the look and feel.

Headings should be organised in a logical manner. There are six headings available, they are logical levels, not sizes.

The headings

This is the top level heading

This is the second level heading

This is the third level heading

This is the forth level heading

This is the fifth level heading
This is the sixth level heading

Paragraphs

Paragraphs or <p> tags form the most commonly used HTML tags and they are used to define all paragraph copy. They can contain many words and sentences or just one character if needed and they form containers for text.

This is a paragraph

About strong, em, bold and italic

The <strong>, <em>, <b> and <i> tags can add visual formatting to text, however it is easy to confuse formatting and semantic meaning.

These tags are inline tags used to mark out copy within another tag and usually sit inside paragraphs or other structural container tags.

Each of these tags have their own definition and play a part in accessibility. Ask why would you make text bold on a web page and then also ask how would a blind or non visual user understand that you mean this text is more important than other text?

You must choose the most semantic option to define the meaning of the copy - NOT THE LOOK!

This is strong text - it defines strength of meaning

This is emphasised text - it defines emphasis of the words it contains

This is bold text - it just makes copy look bold the same as <strong> does.

This is italic text - it just makes copy look italic the same as <em> does.