HTML tags fall into different categories.  Block elements are those that by default force a new line of content before and after them. The most common block element is <p> used to define paragraphs


<body>
<p>This is a paragraph of text.</p>
</body>

You cannot nest one block element such as a paragraph inside another ie this is WRONG


<body>
<p>This is a <p>paragraph</p> of text.</p>
</body>

Headings 1 to 6

HTML provides six tags <h1> through to <h6> that provide a heading hierarchy for a document.  <h1> is the most important heading through to <h6> as the least important of the six.

<body>
<h1>This is heading style one</h1>
<h2>This is heading style two</h2>
<h3>This is heading style one</h3>
<h4>This is heading style two</h4>
<h5>This is heading style one</h5>
<h6>This is heading style two</h6>
</body>

By default the heading styles appear bold and decrease in size with <h6> the smallest.  Note that the default styling of these elements can changed with CSS Cascading Style sheets.  That is colours, fonts and sizing can be added to each element via CSS (more later).

Line Breaks

To create a line break as opposed to a paragraph there is the <br> tag.  Providing a closing pair for this tag is unnecessary.  It can be either written as <br> or <br />.

<p>
This is a paragraph
<br />
with a line break in it
</p>

Semantics

Web designers often talk about ‘semantic markup’.  Semantics is the study of meaning.  The heading tags are great examples of semantic markup as they are tags with meaning.  That is a <h1> is heading one – the most important heading in the document. Another example would be <th> for table headers …. and with HTML5 there is a whole host of new semantics tags such as <article>, <aside> and <footer>. Excited you? You should be.

HTML Lists

Lists are a very popular way of presenting information and with the addition of CSS can be styled to produce the likes of menu bars.  The HTML for a list requires two elements <ul> (Unordered List) used to define the list itself and <li> (List Item) used to declare each item in the list.  The <ul> is the parent of the <li>.  That is the <li> tags need to nested inside the <ul> as follows:

<ul>
	<li>Apples</li>
	<li>Bananas</li>
	<li>Pears</li>
</ul>

The above would produce a list like this:

  • Apples
  • Bananas
  • Pears

There is an alternative <ol> (Ordered List) tag that can be used to create ordered lists.  

<ol>
	<li>Apples</li>
	<li>Bananas</li>
	<li>Pears</li>
</ol>

To produce:

  1. Apples
  2. Bananas
  3. Pears

However we will see later that with CSS we can style up a <ul> list numerically without the need for an <ol>.

Both <ul> and <li> are block elements – in that there content begins on a new line.  When we consider CSS you will see however that this default behavior can be changed.

Leave a Comment