Paragraphs with `<p>`

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>
      
    

Warning: You cannot nest a paragraph <p> inside another <p>. If you think about it, it would make little sense to do so.

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 three</h3>
  <h4>This is heading style four</h4>
  <h5>This is heading style five</h5>
  <h6>This is heading style six</h6>
</body>

      
    

This is heading style one

This is heading style two

This is heading style three

This is heading style four

This is heading style five

This is heading style six

By default the heading styles appear bold and decrease in size with <h6> the smallest.

Like the <p> you should not next heading tags.

Note: The default styling of these elements can be 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>
      
    

Warning: Newer developers might be tempted to use lots of line breaks.

This is done as a way to control the position of content my those not familiar with the power of CSS. Don't do this. We use CSS to features like padding and margin not HTML elements for positioning.

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. There are a whole host of semantics tags such as <header>, <main> and <footer> that we will see later.

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:

Apples
Bananas
Pears

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

We will also see that even though <ul> and <li> are block elements, in that their content begins on a new line, with the CSS display property we can change this default behavior witn intereting effects.

Paragraphs with <p>