Attributes are the way to boring HTML into a beautiful blog.
If you read the post on HTML basics you learned all about the different HTML tags that are used to make a blog post (or any website, really).
However, simple HTML tags unfortunately can’t create all the fancy shenanigans we have come to expect from the internet.
Think of it this way:
Basic HTML tags are like wearing a plain white tee shirt and nondescript jeans every day of your life. It covers your body, you are “officially” dressed, but there’s no real style, personality, or ability to change from situation to situation.
It’s the same with HTML. The basic tags and the content they contain will convey all your information, but it does so in boring, black and white, Times New Roman. It’ll get your point across, but if you want things to look cool or have more functionality, you have to get a little more in depth.
The Most Important Skill
The first thing I want to do is go over the basic vocab you’ll need to sound “fluent in computer-ese”.
This isn’t just to make you sound smart (though it will). The real reason you need to know these terms is that if you ever get stuck or have a question, you need to know how to Google what you need to know.
The most important skill in any code-related profession (cough, cough, blogging) is knowing how to Google what you don’t know.
The great thing about coding is everything you need to know is on the internet, for free, right now. If you talk to any proficient coder, they’ll tell you not to trust books because by the time something makes it to publication it’s already outdated. (In my opinion, this is more true for bleeding-edge technologies than the basics, but it’s still a decent point.)
If you have a computer with an internet connection, you can answer any coding-related question you have. 99.9% of the time you can do so without paying a cent.
The only thing you need to get these answers is enough knowledge to be able to proficiently Google your problem. If you can describe your question, you will be amazed at how quickly you can find answers.
Some Basic Vocab
Here are the basic vocab terms you’ll need for all your HTML-related needs:
HTML Tags are the things that go inside of the < > or < />. This is telling you what type of thing is being created. Is it a paragraph? A table? A bulleted list? The tag is what tells your computer what type of thing is being created.
An HTML Element is the entire line of code, starting with the opening tag, including the stuff between the tags, and ending with the closing tag. This grouping (i.e. an “element”) is often referenced when you Google the answers to your problems, so it’s one of the more important terms to know.
An HTML element’s Contents is just what it sounds like, the stuff that is contained between the opening and closing tags. For instance, if you have a heading element like this:
My Blog’s Amazing Title
, the contents will be the words “My Blog’s amazing Title”.
So here’s the basic structure of an HTML element:
And finally we get to HTML Attributes. We’ve talked about just how boring HTML would be if it was just black and white, Times New Roman text with no formatting or variation whatsoever. HTML Attributes (and the many wonders they enable) are how you get there.
What is an HTML Attribute?
An HTML Attributes is something that gets added to the opening HTML tag to give the entire element some kind of property, characteristic, or behavior.
To update our recent example of the basic structure of an HTML element with an attribute, it looks like this:
HTML attributes are incredibly versatile and are the gateway to doing all the fun colors, styles, animations, and other creative things that turn your website into the living, internet art it is.
Whenever you insert an attribute to an element’s opening tag, whatever attribute that is gets applied to the entire element. If you put a style attribute that sets the text color to red (i.e.
) into the opening tag of a paragraph, that entire paragraph will have red text. If you put that same attribute into your opening body tag (i.e.) then all the text on your entire website will be red.
(Check out this article on basic HTML tags and structure if you need a quick review.)
Quick Summary of HTML Attributes: HTML attributes are pieces of code that go inside the opening tag of an HTML element to give that entire element a certain property, characteristic, or behavior.
What are the different HTML Attributes?
Unfortunately, it’s not as simple as giving you a giant list of HTML attributes that you can use.
Each HTML attribute has a set of tags that it can be used with. Some HTML attributes can only be used by one tag type (though this is rare), while others can be used with a wide variety of HTML tags. Basically, the first thing you need to know about an attribute is which tags it is compatible with.
For instance, the src attribute (aka source attribute) tells your code where to fetch a certain element. You see it when you want to use an image. An image tag by itself wouldn’t do much good at all, as would tell your computer that there was an image, but not what it was or where to find it.
When you add in a source attribute, you get this:
This basically tells your computer that there will be an image and the exact URL where that image can be found. (That one is for our logo, FYI.)
However, before you break out the flashcards, it makes very little sense to memorize (or even spend time studying) all the different tags that each attribute likes. Usually, you will need to know which attributes you need for a particular tag you’re using.
In other words, when you’re typing a paragraph, what attributes can you use to make it prettier (e.g. a different color, font size, or font)? What attributes do you use for an image (e.g. to declare the source, make it a certain width, or even make image overlays or animations)?
In the “real world”, you will use HTML attributes when you’re using a specific tag and you want to know how to fancy it up, so it makes more sense to learn about them in that context. In the next sections, we’ll go over some of the most common tags and their respective attributes, but this is by no means a comprehensive guide.
I’ll go over the top 10% here, these are the ones that you’ll definitely run into on your blog. There’s a much more comprehensive list in the free HTML cheatsheet (which you can download here).
If you’re looking for a comple list of the terrifying array of possibilities for any given tag, doing the Googlies on a tag (i.e. “html attributes for image tag”) will give you way more information than you could ever want.
Classes and IDs (The Most Used HTML Attributes)
Classes and IDs are probably the most important and useful attributes.
As such, we have an entire article about classes versus IDs to go over their magical powers in depth. For now, here’s an insultingly brief summary.
Class or ID attributes can be added to almost any HTML tag. That means they can be used on paragraph tags, heading tags, div tags, image tags, and many more. They’re incredibly versatile, which is why they’re so important to understand.
Instad of having specific set values, you can set classes and IDs to be whatever you want (as long as it’s just letters, numbers, hyphens, and underscores and it follows some basic naming rules).
The purpose of IDs and classes is to let you refer to individual HTML elements or groups of HTML elements in CSS. (If that term sounds unfamiliar, check out the basics of CSS here).
Classes can happen multiple times in a page so you can refer to groups of elements. (You can do stuff like make any paragraph with that class into a different font.)
Classes look like this:
Paragraph goes here.
Any given ID can only happen once per page and is used to reference a specific element that is unique. (You can do stuff like giving your bio image a special border.)
IDs look like this:
Paragraph goes here.
There’s a whole lot more to classes and IDs, so I do highly recommend you check out the classes versus IDs article, but this should give you enough of a clue as to how they work in the context of HTML attributes.
HTML Attributes for Image Tags
Images are absolutely essential for good websites, so it’s necessary to understand the different attributes that apply to image tags.
Required Attributes for Image Tags
There are two required attributes that must be in an image tag in order for it to function properly: src and alt.
The src (or “source”) attribute tells the computer where to find the image that is supposed to be displayed. This takes the form of the URL address to the image by itself (not a website containing the image, just the image only).
Useful Hack: If you right click on almost any image on almost a webpage and select “Copy Image Address” you will get the source URL for that image. You can use this to use images on your blog, but do be careful of permissions, copyright, and other legal considerations before doing so.
The alt (or “alternate text”) attribute gives the computer a text description of what the image shows. This is used to describe the image if there’s an error that makes the image source unaccessible (or a really slow connection) and by screen readers for the visually impaired.
The alt tag is also a factor in SEO rankings, so make sure you don’t neglect them. You can read more about alt tags and SEO in our articles on how to optimize your entire blog for good SEO and how to optimize a specific blog post for SEO.
Optional Attributes for Image Tags
Need a Reminder? Pin It for Later:
Free Printable HTML Cheatsheet
Get a quick reference guide for all things HTML.
Printable, readable, easy to understand, and completely free.