html beginners tutorial

HTML Elements

Learn Online for Free

At ZENVA we have a full HTML/CSS beginners video course, you can access it for free here.

The paragraph element

In HTML, the paragraph tag is part of the block level elements group.
Block level elements will generally start on a new line, and any Mark-up under or after the block
level element will also start on a new line.
Here is an example of a paragraph tag in HTML, followed by some text after the ending paragraph
tag.

Even though all of the text is on one line, the paragraph tag (block level element) will place the
text after the closing paragraph tag on a new line.

Output:

This is a paragraph in HTML

We are no longer inside the Paragraph element.

Block level elements

There are a variety of other block level elements available in HTML; including Headings, logical
(or document) divisions, horizontal rules, ordered lists and unordered lists.
So, lets check out some of these block level elements in action.

Output:

I am a level 1 heading

I am a level 2 heading

I am inside a logical division

I have a horizontal rule above me!

  1. This is an ordered list.
  2. I am ordered by numbers
  • This is an unordered list.
  • li stands for list item
  • We put list items inside the list element

Line break

The break element or tag in HTML (as you can guess) provides a break (or new line). Some people
may like to ‘over-use’ this element, but I suggest using the paragraph element when dealing with
text (where possible), to provide formatting and appropriate spacing.

We could do the same thing with the paragraph tag, but with a better format.

Try it out! Create a new HTML document and add two lines of text separated by a line break and load it in your browser. Take note of how this renders in your browser. Now try removing the line break, encasing each line of text within its own paragraph element and load it in your browser.

Text Modifiers

Introducing the strong and em tags.
As you may have guessed, the strong tag is used to define important text and will render text as bold.
The em tag is a little harder to guess… The em tag renders text as Italic and is used to ’emphasize’
text. The Strong and em tags are both part of the Text Modifiers group.

Text modifiers can be a simple way to make certain text stand out or add character to a document.
Just like this!

Images

Images are an important part of any form of content, especially websites. As a web developer, you
will find it very helpful and necessary to be able to implement images onto a web page
The image tag can be used as follows:

We would then put the URL for our image inside the src (source) attribute. The URL could be
relative or absolute.

When Working in a Live or Development environment it is good Practice to use relative file Paths,
rather than absolute or full file Paths.

• A relative file Path can be defined as being a localised link; using the current directory
Structure as a means of navigation between files.
• An absolute file Path is a direct link or URL to a file.

If we had an image titled ‘logo.png’ in the Same folder or directory as our current html file, we
Could Simply link to that file just by using the files name:

If our image or file was in a directory titled “images” inside our Current folder or directory we
would then link to The Image using:

Some times we need to navigate downwards (as opposed to upwards) in our directory Structure.

If our directory Structure looked Something like:

/home/html/Public/Current/

and our Current html document is in our “current” folder, we could link to our image (which would be located at /home/html/public/images/) by using:

../images/logo.png basically tells the browser to navigate one directory down, into our images
directory and locate the file titled logo.png.

Alternate Text

When an image is unable to be displayed by a browser we need a fall-back method.

So the alt (alternate text) can be used as our fall-back method; meaning we will have some descriptive text to
display if the image itself is unable to be displayed for any reason.

An example of an image not displaying could be an HTML email (Gmail will, by default hide any
images and ask the user if they want to show images) or the results in a search engine.

Search Engines cannot “read” images, so they can only render “alternate” text in Search Engine Result
Pages (SERPs).

It is good to be descriptive and short with the alt attribute, like so:

Displaying Images

So lets try out our image tag with a real image!

Output:

html5-hive-square-144

Hmmm.. I feel as though it would be a better idea to have the image a little smaller, wouldn’t you agree?

Sizing an Image

We can specify both height and width attributes inside our image tag like so:

Note: The height and width values are in px (pixels).

So, lets try out this image with the height and width attributes specified.

html5-hive-square-72

I am going to guess… It looks a little more appropriate now!

Anchor Tags/ Hyperlinks

Now, lets move on to the ever-so important hyper links.

We use an anchor tags like so:

The above code will render as:

This is a link without a value for the href attribute.

Let’s try a simple link to google:

The above example will render:

Go To Google?

Type out the above code and Try it out, notice that the browser will now load Google’s homepage when you click on the link.

We have covered how to link to a page, but what if we want our users to go to our linked page, but in a new window (so they don’t leave our interesting website)?

The above example will render:

Go To Google?

Type out the above code and Try it out, notice that the browser will now load Google’s homepage in
a new window when you click on the link.

The most important attribute for the anchor tag is the href attribute. The href (Hypertext Reference)
attribute will tell the anchor tag where to link to, or where to send the user once clicked on.

Email Links

In HTML we can create a matilto: link, when the user clicks on this link, their email client will open
and the mailto: value (our email address) will be added to the TO: field.

This makes it easy and enticing for a user to quickly send us some email, regarding our web page.

Contact Us!

You may have noticed that I have added ‘?Subject=Email’, this will add “Email” to the subject field
within the email. You can change the mailto and Subject values to suit your needs.

Tables

Sometimes when we have some information to display on our web page, it makes sense to display
that information or data in a table. Tables in HTML are relatively simple. We have the Opening Table Tag and The closing Table tag. Inside of our Table element, we have table rows. Inside the table rows we have table data or cells. But, for our table headers, we will be using the table header
tags inside our table row.

Here is an example of a 3×3 table:

Output:

HeightWidthColor
20050Green
45025Black

Forms

One of the many things you may have noticed on a web page is a contact form, for example. We can create a form in HTML by using the form opening and closing tags. Inside of our Form element we have inputs and a submit button.

Some of our inputs will be of type text and our submit button will actually be an input of type submit. When we work with HTML forms in the real world, the are two attributes that we need to add to our opening form tag.

Method and Action:

The scope of this tutorial will not be covering server-side processing of HTML data, but it is helpful to know what these attributes do. For the action attribute, you would enter in the destination of the Form data.

The method will take either a POST or GET value. You would generally be using POST to submit most forms of data. The main difference between POST and GET is that POST sends data to the server ‘behind the scenes’, whereas GET will form a query string. A query string consists of name attribute values and the values input by the user. As you can imagine, if we were submitting sensitive data to the server we would definitely not use GET; in the case that we did, all information input by the user would be clearly visible in the URL address bar.

For the purpose of this tutorial, we will be taking a look at forming a query string, using GET. Type out the following code and enter and select some values from the form and click the submit button.

Output:


Remember Me?

After you fill in some of the fields and click the submit button, take a look in your URL Address bar; this is called a query string- the part following the ‘?’.

Published by

Ashley Menhennett

Ashley is a web designer + developer, programmer and technical author from Australia.Ashley holds certification in IT + Web Based Technologies and specializes in modern mobile and responsive web design, working with bleeding-edge web based technologies—including HTML5 and CSS3.

Share this article