Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Beginner's Guide to HTML5 & CSS3 - part 2/12: Basic Elements

, 31 Mar 2014
Rate this:
Please Sign up or sign in to vote.
This article covers the basic html elements that are used to define the structure and data in a page.

Introduction

This article is the second part of the series Beginner's Guide to HTML5 and CSS3. In this article you will learn the basic elements to implement an HTML page. In the first tutorial of this series you have studied the structure of an HTML page. This article deals with the elements in a body part of an HTML page. The whole list of HTML element tags can be found for example in w3schools.com site.

Some concepts

At first some concepts need to be defined. An HTML page is defined by tags like <h1> or <p>. Most of the tags have a start tag like <p> and a mathching end tag </p>. The tag pair (start and end tag) define an element. With these elements you define the structure and data in a page. Structure means that an element is a heading, a paragraph, a list, etc. The data you want to show to a reader in a browser you write between the tags.

The elements in a body element (a body is also an element having a start tag <body> and matching end tag </body>) are divided into block level elements and inline elements. A block level element usually starts a new line when it is displayed in a browser. An inline element is written inside a block level element and thus does not start a new line.

Block level elements

The main block level elements are:

  • Headings: <h1> </h1> ... <h6> </h6>
  • Paragraph: <p> </p>
  • Unordered list: <ul> </ul>
  • Ordered list: <ol> </ol>
  • preformatted text: <pre> </pre>
  • Table: <table> </table>
  • Horizontal line: <hr>

In the next chapters each of the element is explained. Each element has a default font size, font family and margins around them when showed in a page. They can be redefined in a CSS file. This redefinition is not explained in this article.

Headings

There are six heading elements. The first is <h1> and the last <h6>. <h1> defines the most important heading. Each page should have at least one <h1> heading. Remeber, you are defining both structure and data. When you are reading any text there is always something that tells what the text is about, i.e. heading. The search engines like Google use <h1> heading as a source of search. The numbers of the headings characterize the order of the heading to use in a page.

All headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

and how they look in a web page with their default format.

Paragraph

In paragraphs are the texts of a page. A paragraph is defined with <p> element. The next text is from Wikipedia, Spring (season).

<p>Spring is one of the four conventional temperate seasons, following winter and 
preceding summer. There are various technical definitions of spring, but local usage 
of the term varies according to local climate, cultures and customs.</p>

<p>When it is spring in the Northern Hemisphere, it will be autumn in the Southern 
Hemisphere. At the spring equinox, days are close to 12 hours long with day length 
increasing as the season progresses. Spring and "springtime" refer to the season, 
and also to ideas of rebirth, rejuvenation, renewal, resurrection and regrowth.</p>

This is how you see in a web page. Note that the row in a paragraph changes according to a browser window width, not where the row has been changed in a code. The row in a browser changes between words. This makes the paragraph texts adaptive to different screen sizes. By default there is some space between paragraphs and also left and right of the text.

Lists

There are unordered and ordered lists plus description lists. At first the unordered and ordered list are introduced.

In the next picture the undordered list is on the left.

When defining a list at first you define wheter you want unorderd list <ul> or ordered list <ol>. In a list there are list elements <li>.

Definition of an unordered list. Note the end tag for <ul>. The list elements <li>s are inside the <ul> element.

<ul>
   <li>Flower</li>
   <li>Tree</li>
   <li>Bush</li>
   <li>Grass</li>
</ul>

An ordered list is defined similar way. The only difference is that <ul> has been changed to <ol>.

<ol>
   <li>Flower</li>
   <li>Tree</li>
   <li>Bush</li>
   <li>Grass</li>
</ol>

In the previous examples you see how the code should be written when an element is inside another element. The indentation is used. This makes the code readable to us humans. Usually the html editors have a command that makes these indentations automatically.

You can also have a list inside a list, see picture below.

Here is the html code of it. Notice where the <li>Flower ends! Inside an <li> element there is another <ul> element.

<ul>
   <li>Flower
      <ul>
         <li>Daisy</li>
         <li>Rose</li>
         <li>Aster</li>
      </ul>
   </li>
   <li>Tree
      <ul>
         <li>Birch</li>
         <li>Spruce</li>
         <li>Oak</li>
         <li>Linden</li>
      </ul>
   </li>
   <li>Bush</li>
   <li>Grass</li>
</ul>

It is possible to mix <ul> and <ol> lists, see example below.

<ol>
   <li>Flower
      <ul>
         <li>Daisy</li>
         <li>Rose</li>
         <li>Aster</li>
      </ul>
   </li>
   <li>Tree
      <ul>
         <li>Birch</li>
         <li>Spruce</li>
         <li>Oak</li>
         <li>Linden</li>
      </ul>
   </li>
   <li>Bush</li>
   <li>Grass</li>
</ol>

An HTML description list <dl> you define a term <dt> and description <dd> (or any text) associated to it.

<dl>
   <dt>Daisy</dt>
   <dd>Daisy is a common garden flower with white and yellow color.</dd>
   <dt>Rose</dt>
   <dd>Roses are grown with many different colors.</dd>
</dl>

Preformatted text

Preformatted text is normally used for program code presentation in a web page. Preformatted text is shown in a page just like it is written in a code. Note also that the default font is Courier New thoug it can be redefined in a CSS file.

Corresponding code is.

<pre>This is 
   preformatted text
      and it is shown
in a browser page just as it is
   written in an html code.
</pre>

Table

A table is a structure that has rows and columns. In the intersection of a row and a column is a cell. In an HTML table <table> you define table rows <tr> and cells, table data <td> in a row. You don't define columns.

Here is a definition of a table having two columns and five rows. Note that you define rows. There are five <tr> </tr> elements. Inside a row you define cells with <td> </td> elements.

<table border="1" style="width: 200px;">
   <tr>
      <td>Flower</td>
      <td>Tree</td>
   </tr>
   <tr>
      <td>Daisy</td>
      <td>Birch</td>
   </tr>
   <tr>
      <td>Rose</td>
      <td>Spruce</td>
   </tr>
   <tr>
      <td>Aster</td>
      <td>Oak</td>
   </tr>
   <tr>
      <td>&nbsp;</td>
      <td>Linden</td>
   </tr>
</table>

This is how you see it in a browser. The <table> tag has some extra definitions called attributes used just for display purposes. An attribute provide extra information about html element. They generally appear as key-value pair, like border="1".

The attribute border="1" adds the borders around table and cells. It is actually outdated in html5 but it is a handy attribute when you define a table. The other style attribute is used to set the width of the table to have more space for cells.

In the cell left to the 'Linden' there is &nbsp;.This means space, an acronym of Non Breakable SPace. It is usually used in tables if there is an empty cell.

The same table without attributes in a <table> tag.

It is possible to define some columns as column headings. This is done using <th> tag. Note that <th> element data is centered by default.

<table border="1" style="width: 200px;">
   <tr>
      <th>Flower</th>
      <th>Tree</th>
   </tr>
   <tr>
      <td>Daisy</td>
      <td>Birch</td>
   </tr>
   <tr>
      <td>Rose</td>
      <td>Spruce</td>
   </tr>
   <tr>
      <td>Aster</td>
      <td>Oak</td>
   </tr>
   <tr>
      <td>&nbsp;</td>
      <td>Linden</td>
   </tr>
</table>

It is ofcourse possible to use <th> tag also in row headings.

<table border="1" style="width: 300px;">
   <tr>
      <th>Flower</th>
      <td>Daisy</td>
      <td>Rose</td>
      <td>Aster</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <th>Tree</th>
      <td>Birch</td>
      <td>Spruce</td>
      <td>Oak</td>
      <td>Linden</td>
   </tr>
</table>

In a table you can define quite complicated structures. Here is an example of such a structure.

The first column goes over four rows (rowspan="4"). The second column in the first row goes over three rows. The other rows have less cells. The colspan works similar way.

This kind of structure is quite hard to write by hand. In the html editors there is usually a table tool to help the definition and coding.

<table border="1" style="width: 250px;">
   <tr>
      <td rowspan="4">Trees</td>
      <td rowspan="3">deciduous trees</td>
      <td>Birch</td>
   </tr>
   <tr>
      <td>Oak</td>
   </tr>
   <tr>
      <td>Linden</td>
   </tr>
   <tr>
      <td>coniferous trees</td>
      <td>Spruce</td>
   </tr>
</table>

An even more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.

Horizontal line

A horizontal line is defined by <hr> tag. This tag has not an end tag.

<p>Some text here.</p>
<hr>
<p>Some text here.</p>

Comments in an HTML code

It is useful to write notes (they are called comments among programmers) in an any code. It helps later you to remember what you have done and why you have come into a specific solution. These notes are in the code but they are not seen in a browser window. You write notes in an HTML code between tags <!-- and -->

<!-- This is a note (a comment) -->

Inline elements

Inline elements are in a line as the name presents. Image tag, link (anchor) tag, line break and emphasis tags are the tags to define inline elements.

If you have a need to force to change the line in the paragraph you can use line break <br> tag.

<p>There is a need to <br>force the line break but not to start a new paragraph.</p>

There is a need to
force the line break but not to start a new paragraph.

Emphasize text

Let's study emphasis tags at first. When you want to emphasize something in a text you make it a little bit different from the rest of the text: bold <b> or <strong>, italic <i>, strikethrough <del>, just mark <mark>, subscript <sub>, superscript <sup>.

The text can be bold, strong, italic or even strikethrough. You can write some physics terms as well: water is H2O, square meter is m2. Different background color also emphasizes.

The html code for the previous paragraph is:

<!-- Note that <b> and <strong> look the same in the browser window. -->
<p>The text can be <b>bold</b>, <strong>strong</strong>, <em>italic</em> or even <del>strikethrough</del>. 
You can write some physics terms as well: water is H<sub>2</sub>O, square meter is m<sup>2</sup>. 
Different <mark>background color</mark> also emphasizes.
</p>

Image in the page

For images to show in the page there is an <img> tag. You need also to define what is the image to show. For this there is an src attribute (src = source). You should also describe using plain text what the image is about for blind or visually impaired people. For this there is an alt attribute. <img> tag also have width and height attributes to tell the size of an image. These attributes you should not use. The image should be the size as needed for the page. The internet world is mobile and it is easier to adapt images to different screen sizes if the size is not set in the html code. Responsive design and implementation is handled in the later articles (I hope, don't know at this phase).

Syntax for the <img> element is:

<img src="path and name of the image" alt="description of the image" >. 

Note that <img> tag has not an end tag when HTML5 standard is used. The attributes and their values can be in any order. The value of an attribute is written in quotation marks.

<img> is an inline element so it should be IN something. Usually it is in a paragraph. Let's assume that an image is in the same folder as the html page, the name of the image is daisy.jpg, the code to show the image in the page would be.

<p><img alt="Daisy flowers in my garden." src="daisy.jpg"></p>

The result is

Daisy flowers in my garden.

In HTML5 standard there is another element to show images in the page. That is <figure> with <figcaption>. <figure> seem to be a block level element. The actual image to show is defined in <img> element.

<figure>
   <img src="daisy.jpg" alt="Daisy flower">
   <figcaption>Daisy flowers in my garder.</figcaption>
</figure>
Daisy flower
Daisy flowers in my garder.

Links (anchors) in the page

Links or anchors <a> as they are called in html world provide a way to jump some other place. The link can point:

  • to the beginning of this page
  • to a specific place in this page
  • to the beginning of another page in this site
  • to the specific place in another page in this site
  • to the first page of another site
  • to the beginning of the page in another site
  • to the specific place in another page in another site

Anchor is an inline element so it is IN something like <img> tag. Usually anchors are in a paragraph or in <li> element. <li> elements are used when the navigation of a site is defined.

Let's study the syntax of an anchor element.

<a href="where to go" target="_blank">Link text</a>

target="_blank" is optional. It is used if the link should open a new window or a new tab depending on the user's browser settings. A new window or tab should be used if the link takes out of the present site.

href stands for hypertext reference. There you write the address of the page the link leads.

Examples 1:

<ul>
   <li>to the <a href="#">beginning of this page</a></li>
   <li>to <a href="#block">Block level elements</a> (a specific place in this page)</li>
</ul>

The address to the beginning of the page in browser is "#" or just an empty string "". When there is a need "to jump" to a specific place in the page the place must have a unique name. The unique name is used as an address like "#block". The name of the place is defined using id attribute. In this case: <h2 id="block">Block level elements</h2>. Note in the id attribute value there is not '#' but it is used in the address '#block'.

Examples 2:

Lets assume in my site there is a page flowers.html. For simplicity I assume it is in the same folder as the page I'm going to write the link. In this flowers.html there is a place that has an id="daisy". Please don't click the links there is no address defined.

This is how they would be defined in a real situation. Note that the specific place in the other page is after the page name with # mark.

<ul>
   <li>to the <a href="flowers.html">beginning of another page</a> in this site</li>
   <li>to the <a href="flowers.html#daisy">specific place in another page</a> in this site</li>
</ul>

Examples 3:

These examples lead to the other site in the internet. There will be a new window or a new tab to open depending on your browser settings because these links lead to other site.

<ul>
   <li>to the first page of <a href="http://www.w3schools.com/" target="_blank">
       w3schools.com</a></li>
   <li>to the beginning of the
       <a href="http://www.w3schools.com/tags/default.asp" target="_blank">html 
       tags page</a> in w3schools.com</li>
   <li>to the <a href="http://www.w3schools.com/tags/default.asp#bottomlinks" target="_blank">
       end of html tags page</a> in w3schools.com</li>
</ul>

Each of the links have target="_blank" definition to open a new window or tab. The address in the href attribute starts with "http://" and is followed by the domain name i.e. the site main address. When just the domain name is present the main page of the site is shown. When a specific page after the domain name is present the that page is shown. If you want to lead your reader to a specific place in a page then '#place_id' is the last part of the address.

Example 4:

An image can be a link, too. A small thumbnail image is a link to a bigger image. The bigger image is show in a new window/tab.

Daisy

<p><a href="daisy.jpg" target="_blank">
      <img src="daisy_tn.jpg" alt="Daisy">
    </a></p>

Attributes

HTML elements may have one or more attributes defined. An attribute provide some extra information about the element or the attribute is essential for the element. Attributes are written inside the elements start tag as a key-value pair separated by a '='. An element can have zero or more attributes at a time.

<img> element have one essential attribute, src, which tells to the browser the path and the name of the image that is to show in the page. <img> element has also alt attribute but it is not essential. If it is not defined the browser still can show the image.

There are some general attributes that can be used with all the html elements:

  • title: shows extra text when mouse pointer is over the element
  • id: a unique name for the element that can be used e.g. in an anchor definition
  • class: from a CSS file you can write reference to html class
  • style: you can write spesific style definitions for an individual element using CSS syntax

Example:

Here is some text. Put your mouse pointer over the text.

Daisy flower
Put your mouse pointer over the image

<p title="This text you see with a mouse" style="color: red;">Here is some text. Put your mouse 
pointer over the text.</p>
<p><a href="daisy.jpg" target="_blank">
<img alt="Daisy flower" src="daisy_tn.jpg" title="This is a link to a bigger image" ></a>
<br>Put your mouse pointer over the image</p>

How to write a readable code

The html5 standard says that all tags must be written in lower case letters; so <p>, <h1> ect.

Among programmers there has been evolved kind of standards to write readable code:

  1. Indent things that are inside another thing (element/tag/...)
  2. Write start tags and end tags in the same 'column' if there is indented thing inside the element.
  3. Have an empty line between block level elements or before and after a longer structure.
  4. Write comments in your code. Don't translate you code into your own language but rather describe what and why have been written.
  5. Remeber to check you code with a validator to have html code according to the standard. Here is a link to W3C validator.
  6. Find out if you html editor has a command to reformat your html code. Reformatting usually indents the lines that should be indented.

Browser support

HTML standard is developed all the time. The browser (Internet Explorer, Opera, Safari, Firefox, Chome) must be able to interpret the html and css code and show the contents of an html file in the browser window formatted as the writer has intended. The browsers are not necessary able to intepret the newest html elements and css definitions though they are in the new standard. There will be new versions of the browsers when new element support has been implemented. On the other hand some of the old html elements are no longer supported in the newest standard. Browsers may still be able to intepret the not supported elements.

In the w3schools page, HTML Reference, is a list of html5 standard elements. The new ones have been marked with an html5 logo. The not supported elements are also marked and advice what element should use instead or should one use CSS definition instead. Each of the html5 elements have a link to an element definition page and there you can find the information which browsers and their versions support that element.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

L. Auer

Finland Finland
I am lecturer in Oulu University of Applied Sciences, Oulu, Finland. Teaching subjects are programming, web development and databases.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140905.1 | Last Updated 31 Mar 2014
Article Copyright 2014 by L. Auer
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid