HTML Tutorial - HTML Elements

The following code shows a simple example of an HTML element applied to some text.

I like <code>web</code> and CSS.

The start tag is <code>, and the end tag is </code>. Between the tags is the element's content, which is web. Together, the tags and the content form the code element.

Note

We use the elements to do the following:

Elements tell the browser about your content.
The effect of the element is applied to the element contents.
Each of the HTML elements has a different and specific meaning. The code element, for example, represents a fragment of computer code.

Note 2

Element names are not case sensitive.

The browsers will recognize <CODE> and <code>, and even <CoDe>, as start tags for the code element.

In general, the convention is to adopt a single case format and stick to it. The more common style has been to use lowercase characters throughout.

Note 3

HTML defines different types of element that fulfill various roles in an HTML document.

The code element is an example of a semantic element. Semantic elements allow us to define the meaning of our content and the relationships between different parts of the content.

Empty Elements

You are not required to place any content between the start and end tags.

If you don't, you create an empty element, like the one shown in the following code.

I like <code></code>  HTML and CSS.

Not all elements make sense when they are empty, but even so, this is still valid HTML.

Self-Closing Tags

You can express empty elements more concisely by using a single tag, as shown in the following code.

I like <code/>  HTML and CSS.

You combine the start and end tag into one-the stroke character (/) It is used to signify the start of the end tag.

The code above has the same meaning with the following code.

I like <code></code>  HTML and CSS.

The single tag is a more concise way of expressing the empty element.

Void Elements

There are some elements that must be expressed using a single tag. These are known as void elements.

One such element is hr.

hr is a grouping element and is used to denote a paragraph-level break in the content.

You can use void elements in one of two ways-the first is to specify only a start tag as shown in the following code.

I like HTML.
<hr>
I like CSS.

The browser knows that hr is a void element and therefore doesn't expect to see a closing tag.

You can make the element consistent with empty elements, as shown in the following code.

I like HTML.
<hr/>
I like CSS.

HTML Comments

Comments are useful information about the HTML elements. Comments makes the HTML document more readable and understandable.

The comments in HTML begin with the tag .

The browser will ignore anything you put inside these tags.

The following code has a HTML comment.

<!DOCTYPE HTML>
<html>
    <head>
        <!--  metadata goes here   -->
        <title>Example</title>
    </head>
    <body>
       This is the <code>content</code>.
    </body>
</html>