Building Websites with HTML and CSS – Part 5



Browsers behave in a manner that is different from the way text editors do. For example, say you enter the following lines in the source code as part of a paragraph that you want displayed in the browser:

Browser spacing rules space        me        out.

It would be output in the following manner

Browser spacing rules space me out.

As you can see, all additional spaces have been automatically truncated. This also applies to new line characters.You cannot just hit enter to start a new line and have it show up that way in your browser.And that’s a problem. How can HTML take away our right to put spaces wherever we please and as many of them as we please? Is that not a fundamental right in the virtual world? Time to protest.

OK. I kid. Of course we can do just as we please with the text on our webpage. So here’s a few ways to achieve the right text formatting in the browser:

  • To display more than one space on the same line,we use the non breaking space, written as   ,which is an entity that is used to add spaces to the text
  • In order to display a single line break, i.e. to recreate the result of hitting Enter, the line break tag is used. It is a self closing tag and can be written as <br> or <br/>. However, the latter is preferred as it is compliant with the XHTML rules we’re making sure to stick to

In addition to these methods of fiddling with text presentation, there are a couple of more important text related tags we must get to know.

The first one is headings. They are used to draw attention to important points, section passages that deal with different kinds of content, label parts of a page and a number of other reasons. There are six different sizes that you an choose to put your headings in. They range from h1 to h6 and the size of the text decreases with each successive increase in the number associated with the heading, as depicted in the following image.

The next is paragraphs. In HTML, paragraphs are similar to line breaks. A paragraph is technically two line breaks. Despite this similarity, it is essential to point the contradistinction that while using two line breaks gets you where a paragraph tag would, these tags cannot be used interchangeably. Remember, HTML is all about structuring a web page the right way. Paragraphs are an integral part of the content structure and hence, all paragraphs must be wrapped around <p> and </p> tags.

Now that we’ve learn a bunch of things about text formatting, let’s take look at what we can do with our new-found abilities. Here’s the source code for a simple webpage using header and paragraph tags.

 And the result,


Leave A Reply