HTML Attributes 

Author:

HTML Attributes 

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:

  1. The id Attribute
  2. The href Attribute
  3. The width and height Attributes
  4. The src Attribute
  5. The style Attribute
  6. The alt Attribute
  7. The title Attribute
  8. 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 HTMLCSS 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.

What is an Android Developer?

An Android developer is responsible for creating and maintaining applications for the Android operating system. These developers use programming languages like JavaScript, Java, Kotlin, and others to design and build mobile apps that run seamlessly on various Android devices, from smartphones to tablets. They collaborate with designers, product managers, and other team members to craft […]

Machine Learning Engineer: A Career Guide

Careers in the field of machine learning have taken centre stage. One such role that has gained tremendous prominence is that of a Machine Learning Engineer. With the world becoming increasingly data-driven, the demand for professionals who can harness the power of machine learning to create innovative solutions is skyrocketing. In this career guide, we […]

Software Developer vs Software Engineer: What's The Difference?

In the ever-evolving world of technology, the terms “software development” and “software engineering” are often used interchangeably. However, beneath their seemingly similar facade lie distinct approaches to creating software solutions.  In this article, we delve into the contrasting realms of software development and software engineering, shedding light on their unique methodologies, skill sets and objectives. […]