Lesson 1: Definitions of Terms Used In Web Design (HTML)

For a start, let’s define some terms used in HTML so as to make our learning easy.


When we talk about elements, this includes the opening tags, closing tags and the contents in between.


&ltp&gt This is an element&lt /p&gt

The whole of &ltp&gt This is an element&lt /p&gt is an element A typical webpage consists of many different types of element. The example code above is not the only type we can have.

&lth1&gt This is also an element&lt /h1&gt

The above line code is also an element. Now that we have that covered, let’s define some more terms.


 Tags are used to state the type of elements present in a web page. There are two types of tags: Opening tags: This is used at the beginning of an element Closing tags: This is used to declare the end of an element. Considering the same codes written earlier

1.&ltp&gt This is an element&lt /p&gt

2.&lth1&gt This is also an element&lt /h1&gt

Code explained:

&ltp&gt in the first line of code is the opening tag while in the second line of code &lth1&gt is also the opening tag The corresponding &lt /p&gt and &lt /h1&gt are the closing tags. Let’s preview the output of the two codes:

Code Output

element preview picture


This gives more information about an element in a webpage. An element can contain one or more than one attributes.

Attributes are written usually in pairs of NAMES and VALUES. They are written in the opening tags.


<html> <div style="color: red;"> This is an element with an Attributes</div> </html> In the above code, style is the attribute of the element.

Code Output:

html sample 2


This is used to define or identify the type of attribute an element is carrying. The name could be color, height, width, etc.

<html> <div style="color: red;"> This is an element with an Attributes</div> </html>
From the code above, the name there is Color.

Let’s see another example

Code Output:
html sample 3

From this code, the name here is font-size


This is used to specify the attribute the element is having. Value could be red, green, blue, 30px, 100%, etc.

Example 1:

<html> <div style="color: red;"> This is an element with an Attributes</div> </html>

Example 2:

<html> <div style="font-size: 160%;"> This is another example</div> <div style="font-size: 300%;"> This is another example</div> </html>
The value in example 1 is red, while in example 2, the value is 160% in the first element and 300%in the second element.


Element is a line of code consisting an opening tag, a closing tag and the content between the two tags.

Attribute holds more information about an element and it is written within the opening tag and comes in a pair of name and value.

We have come to the end of this tutorial, more coming in the next post.

Ps: Output is how the code will appear when previewed.

No comments:

Post a Comment

Contact Form


Email *

Message *

Follow by Email

Popular Posts