HTML Attributes

HTML Attributes


Attributes give additional information to HTML Elements


All HTML elements can have attributes. They are special words that provide additional information about an element. Attributes are always specified in the start tag (or opening tag) . Attributes usually come in pairs like name=”value”.
Different attributes do different things. Most HTML elements (or HTML tags) can have the same attribute. But some attributes are required for certain elements.
Don’t worry if you are confused, by the time you start learning CSS which works with HTML. You’ll use attributes all the time. And then they make more sense, once you start learning CSS.
Enough explanation. let’s see how it works in action.


The style Attribute

The style attribute is used to specify the styling of an element, like color, font, size etc.

Example Code:

<html>
   <body>

      <p style="color: red;"> My first paragraph </p>
   
   </body>
</html>

You will learn more about this styling in upcoming tutorial, and our CSS Tutorial


The href Attribute

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

Example Code:

<html>
   <body>

       <a href="https://www.nevci.com">This is a link</a>
   
   </body>
</html>

You will learn more about links and the <a> tag in upcoming tutorial.


The src Attribute

HTML images are defined with the <img> tag.
The filename of the image source (or image’s URL ) is specified in the src attribute:

Example Code:

<html>
   <body>
 
     <img src="https://nevci.com/images/img_girl.jpg">

   </body>
</html>


The alt Attribute

The text inside an altattribute specifies an alternative text, which is used for screen readers to improve accessibility and is displayed only if the image fails to load.

Example code:

<html>
   <body>
  
     <img src="https://nevci.com/images/img_girl.jpg" alt="Girl with blue eyes">
 
   </body>
</html>

Note:
İt’s important to have an alt attribute for screen readers, and if the image’s url is incorrect.
You will learn about accessibility in upcoming chapters.


HTML lang Attribute

The lang attribute specifies the language of the document. And can be declared in the opening  <html> tag like so:

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

The first two letters specify the language (en). If there is a dialect like “American English”, add two more letters (US).
Some more example with other languages:
“en” for English, “tr” for Turkish , “es” for Spanish, “fr” for French, and so on.


We suggest writing HTML attributes in lowercase

The HTML5 standard does not require lowercase attribute names. İt means they can be written in both uppercase and lowercase. Like title or TİTLE .
But World Wide Web Consortium (W3C) recommends lowercase for attributes values in their specification.

At nevci.com we always use lowercase attribute names.


Quotation marks in attributes ” ” and ‘ ‘

The HTML5 standard does not require quotes around attribute values.  
Both single and double quotes can be used to quote attribute values. However, double quotes are most common. W3C recommends quotes in HTML. Sometimes it’s even required.

Chapter Summary

  • All HTML elements can have attributes (even self closing ones)
  • Attributes give additional information to HTML Elements
  • The alt attribute provides text for screen readers
  •  Attributes usually come in pairs like name=”value”.
  • The style attribute is used to specify the styling of an element, like color, font, size etc.
  • Use lowercase for attributes names.
  • Use ” double quotes ” for attribute values


Comments are closed.