Line Breaks, Paragraphs & Headings
Print This Post
No CommentRelated Reading |
In this section of our free online web design course, we’re going to learn how to arrange our text by adding line breaks by using the <br> tag, adding paragraphs with the <p> and </p> tags and adding headings with the <h> and </h> tags.
HTML Line Breaks
A line break is, simply put, going to the next line in your document. It’s what happens when you press the “Enter” key on your keyboard when typing text into a text editor (i.e. “Notepad”) or a word processor (i.e. “Microsoft Word”). For now, copy & paste the below HTML code into your text editor:
| <html> <head> </head> Hello! Hi! Howdy? </body> |
Now… When you save the above HTML code as an HTML file (with an .htm or .html extension), would you expect the output to be like this:
| Hello!
Hi! Howdy? |
Or like this:
| Hello! Hi! Howdy? |
…?
Believe it or not, the output would be the latter. Line breaks in HTML are achieved by a special tag – the <br> tag. To get the former output, we’ll need to put two <br> tags between each of the words, like this:
| <html> <head> </head> Hello! </body> |
Now, we’ll get the former output:
| Hello!
Hi! Howdy? |
So… “Double spaces”, “tabs” or “returns” inside the source HTML code mean nothing to the web browsers. You can leave as much space as you want between the words inside your text, but that’ll count as only one character-long space for the browser. You can use “tabs” or “returns” to arrange your source HTML code in a nice and tidy fashion, but that won’t show up in the output. Formatting your source HTML code is redundant – you have to format your output, that is, by using HTML tags like the one we just learned. To get the line breaks, we use the <br> tag. Note that down to somewhere 
HTML Paragraphs
Next in our online web design course, we’ll learn how to add paragraphs to our web pages.
In HTML, you can define a paragraph by using the <p> and </p> tags. Everything inbetween these tags will be considered a paragraph and will be two line breaks (two <br> tags) apart from the rest of the document. Let’s try it out:
| <html> <head> </head> <p>Hello!</p> </body> |
And the output is:
| Hello!
Hi! Howdy? |
The same as using two <br> tags…
There is not much else to the <p> tag, apart from the fact that we can use them along with the “align” and “style” attributes to format a piece of text as we like. We’ll learn more about that as we go along in our online web design course.
HTML Headings
You can also add headings to your HTML documents by using the <h> tag. The size of your heading is determined by a number you put next to the “h” inside the tag marks. <h1> is the biggest size and <h6> is the smallest. Also note that you do not need a line break tag after a heading – the heading tag automatically creates a line break after itself. Let’s try the different sizes out:
| <html> <head> </head> <h1>Heading Size 1</h1> </body> |
The output should be:
Heading Size 1Heading Size 2Heading Size 3Heading Size 4Heading Size 5Heading Size 6 |
If you enjoyed this lesson, please link to it
And the bells are ringing! This lesson is over. Next lesson of your free web design course will cover how to make ordered and unordered lists by using HTML. Let’s go!
Loading ...
Popular Tags