Attributes in HTML
Ferenc Almasi • 2019 August 09 •
6 min read
Often times, a document’s larger part is made up of attributes rather than the individual tags themselves. Of course in order to add attributes to tags you would need some tags in the first place. In part 2 we’ve made an example document that can serve as a base for demonstrating what are attributes suppose to do. In case you missed that one, you can reach it here.
So what are attributes? — Attributes basically provide additional information about html elements. Some things worth to mention: All html elements can have attributes and they are always specified in the start tag. They are usually come in name/value pairs like importance="super important" . Just like for the previous part, I’m going to include the whole code example first and walk through the different tags used in it after.
<!DOCTYPE html>
<html lang="en">
<head>
<title>App-aratus 2000</title>
</head>
<body id="app-body">
<!-- heading -->
<header>
<h1 class="heading heading-h1">HTML Basics</h1>
</header>
<!-- body -->
<article>
<h2>The Strcture of HTML</h2>
<p>
<strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</strong>
<br /> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<a href="https://medium.com/@ferencalmasi/introduction-to-html-cc381fe616cd" target="_blank" title="Not another tutorial about html" data-link-type="external">Ut enim</a> ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<img src="https://i2.wp.com/puppytoob.com/wp-content/uploads/2017/03/Black-Pug.jpg" alt="Nice image about puppy" />
</article>
<!-- footer -->
<footer>
</footer>
</body>
</html>Let’s start with the anchor, because we left off there. We wanted to specify a url which we can do with the href="" and specify a url between the quotes. If you were to click on the link, you would get redirected on the same tab however. Since we don’t want to do that, we want our visitors to stay on our page and get redirected in a new tab, which we can do by specifying another attribute which is the target. By saying _blank it will open the link in a new tab so people can keep on browsing on your page when they close the newly opened tab. We can also see a third one called title. The title acts as a simple tooltip, anything specified between the quotes will be displayed whenever you hover over the a tag. Lastly, there’s only one attribute left specified in the a tag we haven’t talked about yet. These are special attributes called data attributes. They are used for storing custom data which can be targeted and used by javascript. Data attributes are defined by data- followed by a custom attribute name, eg.: data-link-type="external" . They can’t contain upper-cases and must be at least one character long after the data-, otherwise it can be any string.
Let’s move on to the image tag, same as for the anchor, it needs an attribute for the image source, but instead of using href here you need to use src instead. Note that image tags are also self closing tags. You can also define an alternative text for the image in case it cannot be displayed, using the alt tag.
There’s two more important attributes we need to cover and they are classes and ids, which you are going to come across a lot. Like for same pages in every element. Hopefully not for ids but for classes. So what are they? — They are identifiers for elements so they can be used for various tasks in css and javascript. They are essentially there to name elements and used as hooks. You can have multiple space separated classes on the same element like we do for the h1 in the example above, but you can only have one id for one element and they must be unique, so you can’t have the same id twice on the same page, just like we do for the body.
It’s also worth to note, you can use - and _ and the english alphabet for naming, you can also use number but you can’t start a name with a number.
And last but not least, a bonus one, we haven’t talked about yet is the lang attribute defined in the html tag. Specifying a language is good practice for accessibility applications like screen readers and search engines.
There’s a lot more of course but these are the most common ones. Hope you found this little article useful, You can reach the first two part below:
TOC
Access exclusive interactive lessons- Unlimited access to hundreds of tutorials
- Remove ads to learn without distractions
