HTML 5 Attributes
Html 5 attributes are a pair of names and values used to control some aspect of a given tag. I know that is a super vague definition so let’s try an example.
<tag name="value">
As you can see in our above example our tag has a name, an equals sign and a value. Take note that the value will always be surrounded by quotes (single or double) but the name will not. Don’t worry if your still a little confused we will take a look at a few more examples and it will all start to make sense.
<img src="http://www.example.com/images/mypicture.png" />
Look at the above example of an image tag. The tag name is src and the value is a url. Src can be thought of as “source” and it gives the web browser the exact location of the image. All together the img tag tells the browser we want an image. The attributes that we used, tells the web browser exactly where the image is located. Attributes are the reason why we do not need a closing tag for images. Where most elements require that you place the content between an opening and closing tag, in the case of the image tag, the content of the element is controlled by the attributes. In most cases however the attributes will only be used to control aspects of the element and not for delivering the content.
Links and Their Attributes
The “Anchor” element is a great example to show an element with both attributes and content. The “Anchor” element or “a” tag is used to display links to other websites or webpages within a webpage. Links are also used to create navigation menu’s on websites. The “Anchor” element is easy to write, you start with an opening and closing “a” tag:
<a></a>
Then you place your content between the opening and closing tags:
<a>Blog</a>
Then you assign your attribute, in the case of anchor tags your first attribute should be the href . Then on the right side of the equals sign (between quotation marks) you would place the URL or link to the website or web page.
<a href="http://www.example.com/blog/">Blog</a>
Conclusion
Any HTML element can have attributes assigned to it. The attributes pass along additional information to the element and can be used to control the elements behavior on a page. By adding attributes we can change the size, shape, position, color etc… of any given element.
Remember this is a beginner tutorial, try not to worry if you feel a little lost or confused. This will all start to make sense with a little practice.
Since there are so many different attributes and so many variations of each one, do not worry about trying to memorize all of them. Even the best developers don’t have everything memorized. The important thing here is that you know what attributes are, what they look like and have a general understanding of how they work.
In the next tutorial we will show you step by step how to make your first complete web page.
-
Previous:
-
Next: