HTML Elements and Attributes
In our previous blog we discussed about HTML Tags. Now we are going to talk about HTML Elements and Attributes.
HTML Elements
The next thing
we’re going to learn about is HTML elements.
An element is an
opening tag, a closing tag, and all the content that is included between the
two tags.
Let’s take a look
at our previous example of how to use bold tags:
<b>This is
some text.</b>
In this example,
<b> is the opening tag, </b> is the closing tag, and “This is some
text.” is the content. When we put it all together, we have an element.
Elements are like
the puzzle pieces of HTML. You take a bunch of elements and fit them together
to make a complete picture. In its most basic form, a webpage is simply an HTML
document that is filled with complete HTML elements.
Sounds simple,
doesn’t it?
In most cases,
elements are simple. The tricky part comes when you start putting elements
within elements.
Let’s take a look
at the very first example we used:
<!DOCTYPE
html>
<html>
<head>
<title>Page
Title</title>
</head>
<body>
<h1>This is
a heading.</h1>
<p>This is
a paragraph.</p>
</body>
</html>
You can probably
recognize the h1 and p elements. If you look carefully, you may
notice that these two elements are actually nested within another element, the body
element. The body element is a special element that contains all the main
content of the document that we want displayed in the browser.
Above the body
element is another element, the head element. This is where we add
special information about the document that we don’t want displayed in the
browser, such as the document title and the document style.
The body element
and the head element are separate elements, but you may have noticed that these
two elements are actually nested inside another element, the html
element. The html element is the most basic element of all, and contains all
the other elements included in the document.
So if we go back
and look at the h1 element, we can see that it is actually an element (h1)
within an element (body) within an element (html).
When you start
writing very complex code, you might find yourself working with elements nested
ten, twenty or even one-hundred levels deep!
Let’s try a quick
quiz to see if you understand how elements work.
We’ll start with
a basic HTML document that has no content:
<!DOCTYPE
html>
<html>
<head>
<title>Page
Title</title>
</head>
<body>
<p></p>
</body>
</html>
We want to add
the sentence “This is a very difficult quiz.” between the two p tags (p
stands for paragraph), but we want to style it like the following image.
How do we write the HTML code so that the words “difficult” and “quiz” are in italics, and the word “very” is both bold and in italics?
Answer:
We need to put an
i tag around the words “very difficult quiz”, and a b tag inside
the i element and around the word “very”.
<!DOCTYPE
html>
<html>
<head>
<title>Page
Title</title>
</head>
<body>
<p>This is
a <i><b>very</b> difficult quiz</i>.</p>
</body>
</html>
In this example,
we have a b element inside an i element inside a p
element. It’s important that we remember to close both the i and b
tags or else the code won’t work.
HTML Attributes
The final piece
of HTML code we have to learn about is attributes.
Attributes
are used to define additional information about an element. They are located inside the opening
tag, and usually come in name/value pairs (name=“value”).
All HTML elements
can have attributes, but for most elements, we only use them when we need to.
Attributes can be
used to define things such as the height and width of an image, the style of an
element (eg. color, size, font) and the language of the document.
You may have
noticed that we’ve already used an attribute somewhere in this guide. Can you
remember where?
It was back when
we were looking at anchor tags and we created a hyperlink:
<a
href=“www.google.com”>This is some text.</a>
The anchor tag is
used to create a hyperlink, and the href attribute is to define the link
address. Without the href attribute, you can still click on the link but
nothing will happen.
There are three
main guidelines for using attributes. We use the word “guidelines”, because
these are not exactly rules. They are more like standards that almost everyone
has chosen to follow.
1.
Although
you can write attributes in upper case, it’s a good idea to write attributes
in lower case only.
2.
Although
it’s not strictly necessary, it’s a good idea to put quotation marks around
the value to make it easier to identify.
3.
Although
you can use single quotation marks (‘value’), it’s a good idea to put values
in double quotation marks (“value”).
So, when we put
together everything we know about tags, elements and attributes, we get a basic
template of how an element should be written:
<tag
attribute=“value”>Some content</tag>
I hope you like this post. Kindly don't forget to subscribe our YouTube channel too - Codin India
Comments
Post a Comment