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> </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 .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> </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> </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
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 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.
<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.
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:
- Indent things that are inside another thing (element/tag/...)
- Write start tags and end tags in the same 'column' if there is indented
thing inside the element.
- Have an empty line between block level elements or before and after a
longer structure.
- Write comments in your code. Don't translate you code into your own
language but rather describe what and why have been written.
- Remeber to check you code with a validator to have html code according
to the standard. Here is a link to
W3C validator.
- 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.
