HTML Tags
In our previous blog we talked about basics of HTML. Now we are going to discuss about HTML tags.
There are three
components that form the basic building blocks of HTML code: tags, elements and
attributes. Once you’ve learned the rules for how each of these components
function, you should have no trouble writing and editing HTML.
HTML Tags
You might
remember we mentioned that the most notable feature of HTML code was the use of
angle brackets. These angle brackets (and the code inside them) are called tags.
Tags
are used to separate HTML code from regular text.
Any text written
inside the angle brackets will not be displayed in the browser. The text inside
the angle brackets is just used to tell the browser how to display or transform
regular text located between the opening tag (also called the start tag)
and the closing tag (also called the end tag).
Tags usually come
in pairs, and the difference between an opening tag and a closing tag is that
the first symbol inside the brackets of a closing tag is a slash “/“ symbol.
For example,
here’s a pair of h1 tags (used to identify heading text), with some content
in-between:
<h1>This is
some content.</h1>
In this example,
the <h1> is the opening tag and the </h1> is the closing tag.
How To Use Tags
Here’s an example
of how we can use tags to transform text.
If we add the sentence
“This is some text.” to our HTML file, it will simply display as regular text
like this:
This is some
text.
But if we want to
have the sentence display in bold text, we can add a <b> opening tag
before the text, and a </b> closing tag after the text. The “b” in the
tag stands for “bold”.
If we add
<b>This is some text.</b> to our HTML file, it will display like
this:
This
is some text.
If we want to
have the sentence display in italic text, we can add an <i> opening tag
before the text, and an </i> closing tag after the text. As you’ve
probably guessed, the “i” stands for “italic”.
If we add
<i>This is some text.</i> to our HTML file, it will display like
this:
This
is some text.
If we want to
have the sentence display as a hyperlink, we can add an <a href=“www.google.com”>
opening tag before the text, and an </a> closing tag after the text.
Can you guess
what the “a” stands for? This one’s a little harder… it stands for “anchor”.
If we add <a
href=“www.google.com”>This is some text.</a> to our HTML file, it will
display like this:
If we click on
this hyperlink, it will take us to a different webpage. If you take a look at
the code, you can probably guess which page this text links to.
Let’s put these
three examples in to a simple HTML document:
<!DOCTYPE
html>
<html>
<head>
<title>Page
Title</title>
</head>
<body>
<b>This is
some text.</b>
<i>This is
some text.</i>
<a
href=”www.google.com”>This is some text.</a>
</body>
</html>
If you save this
file and open it in a browser, it should look like this:
Two Important Rules For Using Tags
There are two
main rules you need to follow when using tags.
1.
You
must always use angle brackets for tags. Square brackets and round brackets are used
for different purposes in other programming languages. If you try to use square
or round brackets in HTML, the browser won’t understand your code.
2.
Tags
almost always come in pairs. This means that (except for a few special
examples) you must always close a tag after opening it. If you forget to
add a closing tag, the element you are trying to transform won’t display
properly. In the worst case scenario, forgetting to close a tag may cause your
page to crash. Many text editors will automatically add a closing tag, but it’s
a good idea to start getting into the habit of writing tags in pairs. The best
way to do this is to write the opening tag first, the closing tag next, then
add the content between the tags last.
In our next blog we will discuss about HTML elements and attributes.
I hope you like this post. Kindly don't forget to subscribe our YouTube channel too - Codin India
Comments
Post a Comment