Block level <html> tags

Once you understand how to creat a basic html document/web page, then you need to learn about how to populate the page with content, and the tags that can be employed for this task.
In the same way that the web is made up of individual pieces, ie the documents or web pages, the documents themselves are also made up of individual elements too.

In a similar manner to a document that has been produced in a text  editor or word proscessor, html documents also contain  block level elements.
html is very forgiving  regarding "white space" in the document, and does not simply reproduce the white space  when it is displayed.
Instead the client browser will simply follow the rules of html and it will condense all the white space  within the html code in the document and will only insert formatting via the tags  in the document.

In html paragraphs are delimited by the paragraph tags,  these are in pairs with an opening tag  and a closing tag  like this   <p>  </p>
The paragraph tags  control the spacing of the lines within the paragraph tags,  and it also controls the line spacing between the paragraphs in the document.
The default spacing within the paragraph is a single space, and between  paragraphs it is double-space.
To see the example code below rendered in a browser click on this link paragraph tags.

<html>
<head>
<title>html Paragraph Tags</title>
</head>
<body>
<h1>html Paragraph Tags</h1>
<p>
The content of the document
go here ...
</p>
</body>
</html>

Every paragraph in your document has to start with an opening <p> tag, and it must end with a closing </p> tag, this will ensure that every paragraph in the document has exactly the same formatting.
The standard or default formatting of a paragraph is left-justified, but you can control the justification of the paragraph through CSS styles.
To control the justification via CSS you would use the text-align attribute, the example below would set the paragraph justification to "center".

p { text-align: center; }

You can also use an attribute directly within the tag to format the contents of the paragraph, for instance you could change the background colour, using the bgcolor attribute like this
<p bgcolor="lime">
It is better to use CSS to achieve any formatting of the elements within an html document, and this will also prepare you to make the transition to xhtml, and using CSS styles in your html documents.

You can find more information at the W3Schools web site on paragraph tags.

To create a heading in html we use the header tags,  as with all other html tags  there is an opening tag  like this <h>  and a closing tag  like this </h>.
There are six predefined  heading tags  in html, and the <h1> heading tags  specifies the highest or most important level  of heading in the document.
The <h6> tags  specifies the lowest, and least important of the heading levels.
In textual  documents larger types of fonts are used to specify that a heading is of a higher level  of importance,  html also uses larger fonts to specify a higher level,  and or more important  heading.
To see all the headings rendered in a browser click on this link heading tags

<h1>heading</h1> Largest heading tag
<h2>heading</h2>
<h3>heading</h3>
<h4>heading</h4>
<h5>heading</h5>
<h6>heading</h6> Smallest Heading tag

The heading tags  act like the <p> tag  and automatically provides a line break, and extra line spacing after the element, the default  spacing is one line.
It is possible to delimit a wide range of text in a document with the heading tags,  however their default  use is to mark headings in the document, like headings in a normal  text document.
You can also use CSS styles to customize the headings in a document and give them a background colour or change the font or the size  of the font ect, to change it’s appearance.
It is possible to use the attributes within the tag  but it is better to use CSS styles to achieve this.
To see the example of code below rendered in a browser click on this link heading tags

<html>
<head>
<title>html heading tags</title>
</head>
<body>
<h1>html Heading tags</h1>
The contents of the document
go here ...
</body>
</html>

You can find more information at the W3Schools web site on heading tags.

The <div> tags  are very useful, and they are used to delimit divisions  in a document, this could include paragraphs or other block level  elements, like an image in the document.
For instance if you wanted to indent a section  of text within a document that was a few papragraphs long, then you could easily accomplish this using the <div> tags,  and apply a CSS style to them.
The div tags  like other tags  come a pairs like this <div>  </div>
You can apply  attributes directly within the tag  but, it is always better to use CSS styles to achieve any formatting.
In the example below the paragraph next to the bottom of the document has been delimited with a div element  that has a style applied  to give the paragraph a 2px solid  black border.
To see the example of code below rendered in a browser click on this link div tags

<html>
<head>
<title>html div tags</title>
</head>
<body>
<h1>html div tags</h1>
The contents of the document
go here ...
<p>
This is the second paragraph
in the document....
</p>
<div style="border: 2px solid black;">
<p>
This is the third paragraph
in the document....
</p>
</div>
<p>
This is the fourth paragraph
in the document....
</p>
</body>
</html>

The horizontal rule tag  is used to visually break  up sections or to also create  sections of a document.
The horizontal rule tag  is unlike the other html tags,  it does not have a partner tag,  and stands alone it looks like this <hr />.
The horizontal rule tag  creates a line  across the document/page from its current position to the right hand margin of the document/page, and breaks the line  accordingly.
The horizontal rule will cause a new line  between itself and any adjacent  elements, ie above it and below, for instance if you wanted to reproduce the text from a book, you could employ the horizontal rule to separate the chapters and create  a break between them.
To see the example of code below rendered in a browser click on this link hr tag

<html>
<head>
<title>Sample From Book</title>
</head>
<body>
<h1>Chapter 1:</h1>
The contents of chapter one
go here ...
<p>
This is a new paragraph
in chapter one....
</p>
<hr />
<h1>Chapter 2:</h1>
Contents of chapter two
go here....
<p>
This is a new paragraph
in chapter two....
</p>
<hr />
</body>
</html>

You can use attributes to format the appearance of the hr tag and apply the attributes directly to the hr tag, but it is always best to use CSS style to accomplish the formatting of an html element.

You can find more information at the W3Schools web site on the hr tags.

The manual  line break tag  is like the hr tag  in that it is also a tag  without a partner, and stands alone, and looks like this <br />.
The line break tag  is used when you want to manually  break a line and create  a new line in a paragraph without ending  the paragraph.
With html if you typed a short sentence and did not use a line break tag  then typed a new sentence below on a new line, the browser will render them both together on the same line.
To see the example of code below rendered in a browser click on this link br tag

<html>
<head>
<title>html line break tags</title>
</head>
<body>
<h1>html line break tags</h1>
The contents of the document go here ...
<p>
The contents of the document<br />
go here ...<br />
</p>
</body>
</html>

You can find more information at the W3Schools web site on the br tags.

There may be times when you want the browser to interpret  the text literally, including all white space and forced  line breaks, and in these cases it is possible to use the preformatted tag.
The preformatted tag  looks like this <pre>  </pre>
The pre tags tell the browser that all the text within the tags  has been preformatted and should appear exactly as it appears in the html code.
The pre will also cause all th text to be rendered in a monospaced font,  preformatted text is good for textual tables  and to set  elements apart such as examples of html code in the document.
The pre tags also act like a <p> element and creates  a new line, and extra spacing after the element.
To see the example of code below rendered in a browser click on this link pre tags

<html>
<head>
  <title>The pre tag</title>
</head>
<body>
<h1>The pre tag</h1>
This is a normal<br />
paragraph in the document<br />

<pre>Text between the pre tags</pre>

<p>
This is a normal<br />
paragraph in the document<br />
</p>
</body>
</html>

You can find more information at the W3Schools web site on the pre tags.

Well written code should speak for itself, but that said there are always going to be instances where it will be a good idea if not necessary to place a comment in the code.
For example if you were nesting  tables to create the layout of your document, such constructs can become very complex.
So adding comments to your code can make it a lot easier to keep track of a complex syntatical  construct of nested  tables in your document.
The comment tags  look like this <!– – comment – –>, and anything that is between them is ignored by the browser, and will not be rendered on the page
In the example below the comments name the elements below them in the document.

<html>
<head>
<title>html comment tags</title>
</head>
<body>
<– – header tags – –>
<h1>html comment tags</h1>
The contents of the document<br />
go here ...<br />
<!– – paragraph tags – –>
<p>
The contents of the paragraph<br />
go here ...<br />
</p>
</body>
</html>

You can find more information at the W3Schools web site on the comment tag.

Now that we have looked at the block level tags we can move on and look at how to format the contents of a document using inline tags.

Block level tags

Paragraph tags

Heading tags

div tags

Horizontal Rule tag

The Line break tag

Preserving formatting

html Comments