Web design: Text

Today we’ll find out how to display headings and paragraphs, how to make words bold and italicize content, and general structural and semantic markup.

When creating a web page, you add tags (known as markup) to the contents of the page. These tags provide extra meaning and allow browsers to show users the

appropriate structure for the page.
In this lesson we’ll focus on how to add markup to the text that appears on your pages.
You will learn about:

  1. Structural markup: the elements that you can use to
    describe both headings and paragraphs
  2. . Semantic markup: which provides extra information; such
    as where emphasis is placed in a sentence, that something
    you have written is a quotation (and who said it), the
    meaning of acronyms and so on.

HTML has six “levels” of headings:

<h1>is used for main headings

<h2> is used for subheadings If there are further sections under the subheadings then the

<h3> element is used, and so on… Browsers display the contents of headings at different sizes. The contents of an

<h1>element is the largest, and the contents of an

<h6> element is the smallest. The exact size at which each browser shows the headings can vary slightly. Users can also adjust the size of text in their browser. You will see how to control the size of text, its color, and the fonts used when we
come to look at CSS.


To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag. By default, a browser will show each paragraph on a new line with some space between it and any subsequent paragraphs.


By enclosing words in the tags and we can make characters appear bold.
The element also represents a section of text that would be presented in a visually different way (for example key words in a paragraph) although the use of the element does not imply any additional meaning

By enclosing words in the tags and we can make the characters appear italic.

The element also represents a section of text that would be said in a different way from surrounding content- like technical terms, names of ships, foreign words, thoughts, ancient spells etc.

That’s where we end this lesson for today, try and get as much practice as possible on these elements before moving on.


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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s