So today, in this chapter we will discuss what are HTML attributes and how to use them in HTML? Then, we will discuss HTML headings quickly.
So Let’s Start:
Basically, HTML attributes are special words used inside opening tags to control the behaviour of the elements. For example, changing styles, size, alignment, weight etc. Also, it provides additional information about HTML elements.
Attributes are very important part of the HTML. We use it apply different types of features to our HTML element. So, go ahead and see how to use attributes in HTML tags.
How to use attributes?
The syntax of attributes is, attribute name and their value like in this example below:
The example below contains two attributes
style attribute in <p> tag & href attribute in <a> tag
<p style="color: blue;"> this is paragraph tag and an attribute in opening tag </p> <a href="www.google.com"> google </a>
Remember: attributes always use in opening tags. Also, some HTML tags can have more than one attributes. See in this code below
HTML Tags with more than one attributes:
In this example, <a> tag has href and style attribute and <img> tag has src, width and height attribute.
<!DOCTYPE html> <html> <head> <title> HTML Tutorials </title> </head> <body> <p style="display: block;"> this is paragraph text </p> <a href="https://www.google.com" style="text-decoration: none;"> google </a> <img src="images/photo.jpg" width="400px" height="400px"> </body> </html
In the above image ‘p tag’ have style attribute, then ‘a tag’ have href for links and in the last ‘IMG tag’ I use src attribute, width attribute and a height attribute. So, I hope you have been understood clearly that what are attributes and how to use them in HTML tags.
I am going to tell you one of the most important attributes which I will recommend you to use always when you start your HTML.
We use this inside HTML tag. Basically, we use the lang attribute to declare the language of a webpage. That’s mean to assist the browser that what should be the language of the webpage. Likewise in this code below, I gave the English language to lang attribute with the US country code:
<!DOCTYPE html> <html lang="en-US"> <head> <title> HTML Tutorials </title> </head> <body> <p style="display: block;"> this is paragraph text </p> <a href="https://www.google.com" style="text-decoration: none;"> google </a> <img src="images/photo.jpg" width="400px" height="400px"> </body> </html>
Lowercase Attributes and Double or single quotes:
Always use the lowercase attribute. Also, we can use both single and double quotes around attribute values. But it is recommended to always use double quotes attribute. Visit this site link to check all language codes.
Let’s Talk about HTML Headings:
HTML has its own predefined heading tags. So, you don’t have to need the styles to make headings bigger or more visible. Headings are essential. Headings make the content more clear and readable. So, here are six types of predefined headings as give below:
<h1> heading 1 biggest heading </h1> <h2> heading 2 smaller then 1 </h2> <h3> heading 3 smaller then 2 </h3> <h4> heading 4 smaller then 3 </h4> <h5> heading 5 smaller then 4 </h5> <h6> heading 6 smallest heading all </h6>
Furthermore, headings are a very important part of HTML. We often use headings in HTML for formatting text. Also, we can use the font-size property in a CSS style sheet for text formatting. But the headings in HTML are very important. Because SEO uses the headings to index the structure and content of the webpage. Headings attracts the attention of readers.
So, finally, we have learnt about HTML attributes and headings. In our next lesson, we will discuss text formatting and then paragraph tag.
I hope you understood well. If you have any question related to this topic then please feel free to ask.