HTML #10 - <span> tag Introduction, uses, how to use and it's attributes

Hello friends, welcome to the another tutorial of Programming Infinity. In this tutorial, we will know about the <span> tag. We will also know about its commonly used attributes. So friends let's begin...

Introduction

<span>Welcome to the Programming Infinity</span> 

The <span> tag is a commonly used tag, when customizing/designing text in HTML. We can easily understand from here, that, it also has a ending tag, because it contains some text as its content, so it is a container element.
It is used to customize/design the inline text means the part of a paragraph or any text type resource. We can also use it for large part of a text, but for that, there is an another element in HTML called <div> element. We will know about this in the upcoming tutorials.
There are a lot of attributes to be use with the <span> tag for customizing it, but here, we will know about some of it's common attributes. So friends, let's know about the attributes.

Attributes

There are 3 common attributes of the <span> tag :-
1. "class" -

<style>
.style1{
font-size:25px;
}
.style4{
color:yellow;
}
</style>
<span class="style1 style4"> Have a good life :) </span>

It is a global attribute, means, that it can be accessed anywhere within the HTML Code, just like variables. We will know more about the global attributes in the upcoming tutorials. The "class" attribute is used to define the class of the <span> tag. We can define 2 or more than 2 classes for the same <span> tag. We can simply understand about class as the category, which is applied to the <span> tag, and the properties defined to the category is applied automatically to the class like text color, font-size etc. We will clearly know about it in the upcoming tutorials. The syntax of defining the property and also of using the "class" attribute is given above.

2. "id" :-

<style>
#style2{
font-size:25px;
}
</style>
<span id="style2"> Have a good life :) </span>

It is also an global attribute, used to define a unique id for a <span> tag. Now we can use this "id" for applying property to the <span> tag. Remember that, the ID is unique, so if we define it, it should not be defined. If we define two or more property with the same "id" , both the property will merge together and will be applied. Here, the "property" means the CSS property, that we will define in the <style> tag with the unique id. The syntax of defining property and also of defining id is given above.

3. "style" :- It is a widely used attribute across all the elements un HTML. For detailed information of style Attribute, please read this tutorial. The basic introduction, that we can give to this attribute, is that, it applies the CSS property to any particular element for designing it. The syntax of it is given above.

So friends, that's all for this tutorial. Hope u enjoyed it. If u have any problem/question regarding this tutorial, then ask me in comment box. Till then, Have a good life... And
Thanks -
Programming Infinity (Samridh Sharma)