HTML is probably one of the easiest programming languages to learn and adapt quickly. All you will have to know is the usage and application of several HTML tags, and voila, your code is ready. Until now, you will have probably gone through a variety of HTML tags like <body>, <p>, <a> and many more. However, they are not the only important aspects of HTML.
HTML is a frontend language that focuses on laying the foundation for a website. It comprises tags and extra parameters called attributes that allow for more sophisticated code to be written.So what are attributes, and how are they beneficial for coding in HTML.
What are HTML Attributes?
The HTML elements are used in creating content and structure for the website. However, only using HTML elements enclosed in starting and ending tags would create an arbitrary website structure.
HTML also uses attributes for a more appealing and customised appearance and elements.
Attributes are used to define an element’s distinctive qualities. This can be demonstrated further using the following example:
For instance, you are going to write a neat paragraph. The default colour of the paragraph would be black; however, you prefer a different colour. How would you change the colour of the fonts? Simple through attributes.
Here is an example on changing the font colour:
<p style="color:blue;">This is a blue paragraph.</p>Like the above example, using HTML attributes are used in codes to specify more custom characteristics of the code.
HTML Attributes List
Fortunately, HTML has a vast range of attributes that are profoundly useful in creating more efficient codes and results. Here is the list of HTML attributes that you will find helpful to apply to your codes:
- The id Attribute
- The href Attribute
- The width and height Attributes
- The src Attribute
- The style Attribute
- The alt Attribute
- The title Attribute
- The lang Attribute
1. The id Attribute
The id attribute is used to provide the element with a unique identifier. The id attribute is very significant in frontend web development because it allows the CSS style to apply to elements effectively.
Example:
<p id = "html">This para explains what is HTML</p>2. The href Attribute
To specify or include a link to the code, use the anchor or <a> tag. However, as you may know, the <a> tag is used in conjunction with an attribute called href, which is utilised to incorporate a website’s link. So that when a user clicks on the link, they are taken to that specific page.
Example:
<a href="https://codeinstitute.net/global/ie/blog/what-is-html-and-why-should-i-learn-it/">What is HTML</a>Note:- Whenever mentioning links, make sure they are enclosed within quotes so that the link will appear as a link to the visitors.
3. The width and height Attributes
Instead of just adding photos, it is preferable to add them along with their proportions so that the image appears more elegantly without taking up additional space, which is why the width and height attributes are for.
Example:
<img src="img_name.jpg" width="500" height="600">4. The src Attribute
The src attribute is also a special attribute with the <img> tags. The src or source attribute is used to indicate the source from which the image was taken.
Example:
<img src="img_name.jpg">(Or)
<img src="https://www.w3.org/html/logo/"> Here,
- The first example, src, is a relative URL that cites that the image belongs to the website itself.
- The second example is an absolute URL which means the image was borrowed from another site.
5. The style Attribute
The style attribute is used to mention the style in which you would like the font to appear on the website. It can be colour, font style, size, anything.
Example:
In an HTML application, the style attribute can be used in a variety of ways.
// For background Colour
<body style="background-color:powderblue;">// For Font Style
<h1 style="font-family:verdana;">This is a heading</h1>// For Text Alignment
<h1 style="text-align:centre;">Centred Heading</h1>6. The alt Attribute
The alt attribute is another attribute mainly used for <img> tags. The alt or alternate tag is used to include the alternate text of the image so that alt text will appear and convey what the image is about to the visitor if it doesn’t load quickly or at all.
Example:
<img src="img_girl.jpg" alt="Girl with a jacket">7. The title Attribute
The title attribute gives extra information about specific elements. This information is displayed to the visitor hovering over a specific element.
Example:
<p title="I'm a Paragraph">This is a paragraph.</p>8. The lang Attribute
The lang attribute is an essential attribute that should be mentioned in every HTML code since it is essential to mention the language in which the website’s contents will appear.
Example:
<!DOCTYPE html>
<html lang="en-US">
<body>
</body>
</html>Conclusion
HTML properties are essential for making web content more intelligible and appealing. We hope you now have a better understanding of the importance of HTML characteristics to build a more user-friendly website foundation.
If you have no coding experience and you’ve read this post and think that you need to start learning about code for your next career move, try our free 5 Day Coding Challenge. With this challenge, you will learn the basics of HTML, CSS and JavaScript. After just one hour a day over the five days, you will build your first ever webpage. Register now through the form below.
Try our Free 5 Day Coding Challenge 
Take our full stack course 
