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.
What’s the Problem?
Think of it this way:
Basic HTML is like wearing a plain white tee shirt and basic jeans every day of your life. It covers your body and 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.
Why This Sucks
The biggest problem with how prevalent HTML (and CSS) are in blogging is that not everyone has a degree in computer science or years of coding experience. Most bloggers are subject matter experts who are only on the seedy internet to help convey this knowledge to others and possibly earn a living in the process.
So why do I need to learn about all this tech jargon?!?!?! Why can’t I just write my blog in peace?!?
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 that 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, and 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.
How to Handle It
Let’s start out with some basics…
Some Basic Vocab
Here are the basic vocab terms you’ll need for all your HTML-related needs:
HTML Tags: 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.
HTML Element: 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:
<h1>My Blog's Amazing Title<h1>The contents will be a big heading with the words “My Blog’s amazing Title”.
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?
HTML Attribute: 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 (this is a sample…there isn’t actually a tag called <tag> in the wild):
<tag attribute="value">Content</tag>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 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. <p style="color: red">) 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 from 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 it 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:
<img src="https://donelikeamother.com/wp-content/uploads/2020/08/cropped-DoneLikeAMother_Logo_500x500.png" />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. (And if not, it’s always only a short Google away.)
In other words, when you’re typing a paragraph, what attributes can you use to make it prettier? Different color? Font? Text size?
What attributes do you use for an image? You need to put the source for the image (aka where the computer can find the file) and maybe 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 know how you want 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.
We’ll go over the most commonly used 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 below).
If you’re looking for a complete list of the terrifying array of possibilities for any given tag, doing the Googlies on a tag (i.e. Google “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 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.
Instead 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:
<p class="my-paragraph-class">Paragraph goes here.</p>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:
<p id="one-specific-paragraph">Paragraph goes here</p>There’s a whole lot more to classes and IDs, but we’ll stick to Attributes for now.
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 (well, one required and one highly recommended) 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 the one that isn’t technically required, but is very highly recommended.) 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.
Optional Attributes for Image Tags
There are also many optional attributes that can help you style and customize your images.
The height or width attributes assign a height or width to your image in pixels.
You will still see this in many websites or blogs, but it is increasingly common for an image’s dimensions to be set using CSS (aka cascading style sheets) and classes or ids with a style attribute, which is a hacky* way of letting you put CSS right into your HTML document rather than a separate document. This has the advantage of letting you declare width in pixels or as a percentage of your screen’s total width (rather than a set width), which is a key tenet of responsive design (aka design that works equally well on multiple screen sizes and devices of different widths).
*Hacky. Adjective. A way of coding that achieves the goal, but isn’t pretty or in accordance with best practices. In this instance, using style attributes rather than separate CSS stylesheets is considered “hacky”, but you’ll still see it from time to time.
As mentioned above, the style attribute can be used to apply CSS styling directly to your image, but it’s not considered best practices to do so within your HTML.
There are some other attributes that can be applied to image tags, but those are the main ones you’ll see in the average blog post.
HTML Attributes for Text Tags
Text tags are things like headings, paragraphs, spans, and so forth.
There are no required attribute tags for text tags, but there are a ton of attributes that apply to them nonetheless. The most common tag you’ll see on paragraphs are classes and ids that help with CSS styling (like changing colors, fonts, etc.).
If you want more information, you can see an entire list of the global attributes (aka attributes that can be applied to any tag).
HTML Attributes for Div Tags
Div tags are most often used to create layout elements like columns, colorful boxes, backgrounds, and all the other snazzy styling we’ve come to take for granted on a web page.
As was the case with text tags, there are no required attributes for a div tag, and most of the ones they do use come in the form of classes and IDs to facilitate CSS styling. However, they also take the global attributes that can be applied to any tag.
Free HTML Cheatsheet for Bloggers
Coding may not be your thing but bloggers need to use HTML here and there. Use this cheatsheet to save yourself from Googling every time you need to remember how to create a hyperlink.
Skimmer’s Guide
In a nutshell, HTML attributes are little bits of code that go inside the opening tag of an HTML element. These attributes can take a number of forms, but give their entire HTML element whatever properties, behaviors, or characteristics they entail.
HTML attributes are the key to transforming a blog post from boring, black-and-white text to a dynamic and engaging web page.
If you have any questions feel free to leave a comment and I’ll do my best to answer ASAP!
And don’t forget to download your free HTML cheatsheet below. It has a quick and easy guide to all this and more.
Your friendly neighborhood nerd,
Liz Bayardelle, PhD
Liz is the mom of three human(ish) kids, three furkids, three businesses, and eight blogs. She also has a PhD in Business Psychology, several published books on parenting psychology, and a serious Chick-fil-a addiction. Hobbies include color coding anything that will hold still, reading textbooks for fun, swearing at her herd of dustbunnies, and nodding off mid-sentence at the dinner table.