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
or
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>
Image Tags
In HTML, when you want to call upon an image to be displayed on your web page, you need to use the img tag. This tag tells the browser and web server that you are going to put an image here, and then what follows src= is the direct path to the image in question.
Code: <img src=”https://www.yourdomain.com/yourimage.jpg” />
Horizontal Rule Tags
The horizontal rule is for making a nice separator between sections of your web page. It acts as a single solid line that can be placed anywhere on your web page. It looks like this:
Code: <hr />
List Tags
If you want to format a list of topics on a single page, then the list tags will come in handy. You would start a list with the <ul> tag and end it with the </ul> tag. For each item on the list, you will want to wrap it in the <li> and </li> tags.
Code: <ul> <li>item #1</li> <li>item #2</li> </ul>
Ordered List Tags
If you want to format a list of topics on a single page, and have them numbered, the ordered list tags should be used. You would start a list with the <ol> tag and end it with the </ol> tag. For each item on the list, you will want to wrap it in the <li> and </li> tags.
Code: <ol> <li>item #1</li> <li>item #2</li> </ol>
Link Tags
Links are used to help users go from one page to the next page. The basic link is started with the tag with the page’s path you want to link to inside the quotation marks. Then you type in the text of the link, and close it out with the tag.
Code: This Text is a Link
What Have You Learned About HTML Formatting Tags?
Now, take a look back at what this page has taught you:
- How to best use the image tags to show images on a web page
- The horizontal rule will put a horizontal line across a web page
- The list tags can be used to format lists
- The ordered list tags can be used to format lists, and number them
- Link tags are used to link from one web page to another web page, when clicked in the browser