HTML Attributes 

Author:

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.

How Much Do Full Stack Developers Make?

Technology is always changing. It’s ever-evolving and advancing, and one clear thing is that it is essential to every industry. As a result, the demand for full-stack software developers is always growing, which means better wages for those people with the right skills. Earning a solid living is always excellent, but how much do full-stack […]

Front-End Developer Career Paths

Front-end developers are essential to designing and developing websites and web apps. They are in charge of designing and implementing the visual components with which users interact, such as layouts, buttons, and forms. Front-end development may be an exciting and lucrative career path, with the opportunity to work in various industries and on multiple projects.  This […]

Community Stories: Fiona’s Story

Below is an extract from Code Institute’s recent e-Book entitled, “Community: your key to career change success -Tips from students who have worn your shoes and from employers that want to hire you”. In this story, we read about Fiona. Fiona had a successful career in the pensions industry but knew she did not want […]