HTML Formatting Tags

From Lunarpages Web Hosting Wiki

Jump to: navigation, search

When it comes to formatting a web page using HTML code, you can think of it (kind of) in the same way you would look at formatting a document formatted by a word processor. You have your headlines to show you where one section starts and stops. You have your paragraphs to break up blocks of text, and you have line breaks to show where there should be a new line started. Now I am going to show you how to get some of these things done using HTML.


Headline Tags

The main purpose of the headline tags are make the titles stand out on the page, and also tell the browser and visitors where the titles are. You can use <h1></h1> for the main title, then (if needed) <h2></h2> for a secondary title. The bigger the number gets, the smaller or less important the title becomes. Remember to use the headline tags for headings only. It is not a good idea to use them to make text bigger or bolder. Also, search engines look at how your headline tags are used to help index the structure of the content on your web pages.

Code: <h1>This Is My Title</h1>

Paragraph Tags

The paragraph tags are important because they show the start (

) and then end

of where a paragraph should be on your web page. Having a long page with nothing but unformatted text is going to be very hard for the reader to navigate through. You want to break up the web page with the paragraph tags to make the web page your working on more scan-able for the end user.

Code: <p>This will be shown as it's own paragraph on my web page.</p>

Line Break Tags

What if you don't want to go to a new paragraph, and instead only want to break of one line and move to the line right under it? That is what the
tags are for. You might see either used, however it might be best to start using
to future-proof your web page for browsers in the future (just in case support for
was ever dropped.

Code: I can put this at the end of a line to show where I want it to stop. <br />

Blockquote Tags

When text has been blockquoted, it is often indented a little - in comparison with the other paragraphs around it. So you get white space to the left, and the margins around the text are enlarged a little 'bit to seperate it from the rest of the text.

Code: <blockquote>This text will be shown as indented on my web page.</blockquote>

What Have You Learned About HTML Formatting Tags?

Now, take a look back at what this page has taught you:

  • How to change the format of a page using basic HTML tags
  • Headline tags are used for titles and sub-titles
  • Paragraph tags are used to seperate out big chunks of text
  • Line break tags are used to show where a line of text should stop
  • The blockquote tags are used to indent a block of text

Web Design Tutorial Navigation

Previous Web Design Tutorial:

Next Web Design Tutorial:

Share |
Want to read this in another language?
Personal tools