html-attributes
Share on facebook
Share on twitter
Share on pinterest

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:

element content

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:

element content

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

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 id attributes or 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 (For more info on this, check out our article on CSS basics.)

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 (Headings, Paragraphs, spans, etc.)

There are no required attribute tags for text tags, but there is a crazy number 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 which 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 in 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 class and ID attributes to facilitate CSS styling. However, they also take the global attributes that can be applied to any tag.

HTML Attributes in Short

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.

Where do I go from here?

If you want to learn more, check out these articles to get to the next level:

  • HTML Basics: Need a refresher on HTML tags? Look no further.
  • Classes versus IDs: More info about the specific class and ID attributes
  • CSS Basics: Want to see how attributes enable CSS styling? Here ya go.


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.

Want to Dive Deeper?

How to Install Pinterest on Your Blog

In just a few minutes we can get you up and running to the point where you have Pinterest “installed” on your blog and your users can start pinning your content.

Read More »

Keep Your Tech Up to Date

Want updated doses of tech wisdom to your inbox?  Our (infrequent) newsletter gets you immediate access to all the latest guides, tutorials, and freebies so you can focus on creating.

Want more tutorials and wisdom with our (infrequent) newsletter?

Questions? Comments? Urgent Plea for Help?

14 comments on “What are HTML Attributes

  1. Kristine Nicole Alessandra

    I am bookmarking your page. This is a great resource for technologically challenged bloggers (that’s me!) You may be hearing from me sometime soon and I hope you don’t get tired of providing answers to my questions.

    • Not at all! I know better than anyone how irritating it is to have to spend time dealing with a tech issue when all you want to do is run your business! That’s literally why I’m here!

  2. LuciWest

    This is a brilliant lesson! I’ve been dabbling in building simple websites and then blogging for over 10 years – and I have acquired what you describe as the important skill of googling how to do certain html things. But what I’ve been missing was a post like this that gives me the whole rundown and an understanding how it all correlates. Saved the post to Pinterest to revisit again when I need a refresher. That’s when I noticed that when clicking your pin button, there are options to pick the image to pin. On my site (happier.place) it seems that I can only assign one image for the button. Currently I use social warfare. Any tips on how I can add more choices to that action? Thank you!
    xx Luci

    • So glad it was helpful! I can’t tell you how much I wanted a common-English translation of all the tech stuff I had to learn when I started coding. It seemed like everything was aimed at complete morons or people who already knew what they were doing…not much for the rest of us.

      As for the Pin button, I use Social Warfare here as well (I coded my other blog from scratch so I’m actually more familiar with doing things the hard way). The pinterest button should pick up on any images you have on the page, even if they’re hidden. Since I have all four of my pin options displayed, it automatically gives you the choice of all of them. However, if you wanted to add some hidden pins that get picked up by Pinterest (but not shown on the page) all you have to do is add a style attribute inside your image tag like this:

      <img src=”…” style=”display:none” />

      This makes your image load (to computers…and your pin button) but not display (to human users). Feel free to comment again or shoot me an email if you have any trouble with it!

      • LuciWest

        Thank you so much for getting back to me. As soon as I read your comment I suspected, and just confirmed, that I have been selecting one “featured” pin image within the Social WF module. So of course, when someone clicks the pin button only that one image is the option. I must have thought that through when I started using Social WF – that it would be better if people just see the one image they can pin directly instead of adding that extra step of choosing which image to pin. But I’m second guessing that choice now. Wonder if there are any statistics on that.

        And thank you for the extra info about the hidden image. That could come in very helpful, too!
        You totally rock!

        xx Luci
        (Just subscribed, too.)

  3. I’m a computer science graduate but graduating in 2004, technology has changed a lot. this refreshed me on my programming days. I can relate on some of the terms but I admit I still need this and I would need this in my blogging career. Thank you for sharing.

  4. Wow! This is all the stuff I am really bad at! I find coding and all things technological really hard! This is such a great breakdown of what I need to know! I’ve bookmarked it too! Thanks so much for sharing!

  5. Tech issues like this give me headache. I can’t even comprehend how you’re able to do this (obviously you love what you do). Glad to know that there’s a blog to check out when faced with such issues.

  6. Knowing how to Google what you don’t know is very important. I love all your tips here.

  7. This is very informative. I definitely need to step up my game and learn about all these HTML info. Thanks for sharing.

  8. A good primer about learning some of the basics in HTML. i know I took a class before I started blogging. But there is always a ton to learn.

  9. Pingback: HTML Basics: The Anatomy of a Blog | Scary Tech for Bloggers

Questions? Thoughts? Comments?

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: