This evening, I will be giving a tutorial on the basic formatting blocks of html, so I thought I’d put some of that information on here. I will be discussing break tags, paragraph blocks, div tags, span tags, and tables. I’ll save the CSS and styling for another time as that can take up many blogs on its own. So a fundamental rule of html is to remember that the code does not read white space. You can write up your page and put as many paragraphs in as you want, but without using a little code formatting, all your writing will end up bunched up together.

We’ll start with the break tag.

the break tag: <br />

It’s simple and easy. Just insert it in your text and that tells the compiler to create a newline.

Next is the paragraph tag.

The paragraph tag: <p></p>

This is a very nice tag to use for formatting. It actually puts some space between paragraphs and that looks really nice on a heavily worded website. When using the paragraph tag, you want to put the text inside of it. Think of it as a box. You open the box, put the contents inside, and then close the box.

The div tag is similar to the break tag.

The Div Tag: <div></div>

The output is exactly the same. However, like the paragraph tag, you have to open the div tag, type in your text, and then close it. The reason I prefer this over using break is for CSS formatting and styling. If you apply a rule to your box, all of the contents inside the box will follow that rule. (such as telling it you want it to be the color red)

The Span Tag applies rules to specific parts of your text.

The Span tag: <span></span>

The div and paragraph tags are great for formatting entire blocks of code, but if you only want one word to be a different color from the rest, you’ll have to use the span tag. This works just like the other two tags, but it does not add a new line. If you add a span tag to a paragraph, it will not make a new line. In fact, without assigning a rule to it, you would not know that it’s there. The span tag merely exists for CSS styling and formatting.

Tables

The table tag: <table></table>

Tables are wonderful for organizing data. I’ve used tables for charts and calendars. Tables can be fairly intimidating at first, but they aren’t too bad once you’re used to them. In order to start a table, you have to use the table tag. Open it up, put your contents in, then close it. Inside the table, you define rows with <tr></tr> . begins a new row and ends the row. Inside each row, you have a number of cells in which you’ll store your information in. To create a cell, use<td></td> . To close it, use So your format is this:

Hello World!

There you have your basic building blocks for text in html. If you have any questions, comments, or need something explained better, contact me and I'll be happy to answer back.

Happy coding!

Categories