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
style attribute is used to specify the styling of an element, like color, font, size etc.
<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
<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
The filename of the image source (or image’s URL ) is specified in the
<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.
<html> <body> <img src="https://nevci.com/images/img_girl.jpg" alt="Girl with blue eyes"> </body> </html>
İ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.
- All HTML elements can have attributes (even self closing ones)
- Attributes give additional information to HTML Elements
altattribute provides text for screen readers
- Attributes usually come in pairs like name=”value”.
styleattribute 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