HTML Page Formatting
After having written and styled some text, you need to format it so it looks like an actual document and not some plain text. The first thing you need to know is that the page formatting you do in your HTML code will be ignored by the browser. You need to tell it how to format the text with some HTML page formatting tags such as paragraphs or divisions.
The line break
Just pressing "enter" will not do it to skip a line in HTML. You need to use line break tags in HTML page formatting. This kind of tag is one of the exceptional tags that doesn't need to be closed. In HTML the tag is <br>. Use this tag anywhere in your text and it will skip a line where it's inserted.
HTML paragraph tags
The most basic HTML page formatting technique is using paragraphs. When including text between a <p> and a </p> tag, it's a paragraph. This will automatically skip a line before and after it. Here's an example:
|
<html> <head> <title>html page formatting</title> </head> <body> <p>This text will be a paragraph. A line will be skipped before and after the content written between those two tags.</p> </body> </html> |
HTML division tags
The HTML page formatting divisions are often used to create layouts using HTML and CSS. They use the <div> and </div> tags. Without CSS, Divisions act exactly like HTML paragraphs. If you ever decide you want to learn CSS, I will cover divs more extensively in that tutorial.
Adding IDs and Classes to elements
You can add styles to multiple paragraphs or divisions with CSS. The reason I'm covering this is that you need some HTML code added to the element for it to work. There are 2 ways of doing this:
- id
- class
Adding an "ID" to an element
You can add an id to a unique element such as a paragraph. By unique, I mean that the style used for this element will only be used for that unique element. IDs are mostly used to create layouts. One HTML page formatting DIV could be for the sidebar, one for the content, one for the header, one for the footer, etc. With CSS, you tell the browser how to place them all together to create the layout of your website.
Adding a "class" to an element
Classes are used to add styling to multiple elements within the same class. For example, if you have an intro paragraph and want to have a different font for them, you would add the same class name for every intro paragraph on every page and with your CSS stylesheet, you will be able to have it automatically change the font on every page of your website at once. If you ever need to change the font, just change it in the CSS stylesheet and every page of your website will be updated with the new style.
Here's an example for giving a class and a id to a paragraph and a division. Note that you can inverse them if you want. As long as an ID is only used once, you can use a class as many times as you need.
|
<html> <head> <title>html page formatting</title> </head> <body> <p class="intro">This is your intro paragraph. I gave it the name intro. You could have named it whatever you want. Every time the class "intro" will be called in the CSS stylesheet, the style will be applied to this paragraphs and everyother element with the class "intro"</p> <div id="content">This is the "content" id. It cannot be repeated elsewhere. Using CSS, we could specify the width and placement of the content area. Other divs could be created for the sidebar, header, footer, etc.</div> </body> </html> |
This is all for HTML page formatting. I know there isn't much to do with only HTML but layouts using pure HTML are mostly made of table which we will see in another chapter. If you ever want to use CSS, use the HTML page formatting divisions and IDs to create the layout.
| Back HTML Text Style | Next HTML Alignment Tag |