WWW… Wednesday! HTML Tags Everyone Should Know

by Margaret Penney | February 15, 2017

The World Wide Web is home to content around the globe and likely anyone who publishes content in any media will publish to a website, at one point or another. If you’re posting to a website you’re also probably using some kind of content management system like WordPress.

WordPress has a visual editor which simplifies adding text and image for publishing, but occasionally it is helpful to also use HTML code, to include additional style elements to a page or delete extra tags. With that in mind, here are the basic HTML tags that every blogger, writer, publisher, videographer, director, maker, designer stylist, creative entrepreneur and etc. should know.

Paragraph Tag

The paragraph tags are put around a selection of text that is a paragraph. If you put these tags around a selection of text the text will be styled on the web page as if it were in a paragraph — with a line-break and space before and after the paragraph.

Here is an example of what that looks like:

<p>It was a beautiful morning and all the birds were chirping. Mom was downstairs cooking a great breakfast and I could hear it sizzling on the stove. Life was good and I was happy. </p>

The ‘p’ tags denote that the information between them is a paragraph. The  greater than and less than signs are called carats or ‘carrots’ and you put them around your tags, to show that they are tags. The first paragraph tag is called the ‘opening’ tag and the one at the end of the paragraph is called the ‘closing tag’.

You can tell a closing tag because it has a slash in front of the HTML tag, like this: </p>

Header Tags

Header tags are how you code a header area in a text. In basic HTML there are six header tags and they look like this:

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

<h1> tags are the largest headers and they go down from there. To use them around an area of text that you want to be a header, you add them as you would the paragraph tags:

<h1>My Great Headline</h1>

Image Tags

Image tags allow the display of images on a web page. You write an image tag like so:

<img src=”mygraphic.jpg”>

The HTML is saying ‘Image Source” where it says ‘img src’. Image source is equal to the file name that is included within the quotes, which is a JPEG image file. The Img tag is less easy than some of the others since it involves including a ‘string’ which is the information included between the quotes. If you translate it as you go, as stated above, it can make it easier to remember the code and understand what it is saying.

“What is the image source equal to?” It asks. It is equal to the file ‘mygraphic.jpg.’

Line Break Tag

The line break tag is handy when you want your content to go to the next line only, without a full paragraph space.

If the font in your website or blog has a line-height that is fairly high, you may want to use a line break tag over a paragraph tag for some new content, regardless.

A line break tag is one of the few HTML tags that you only need to write once—it does not have an open and close tag.

<br/>

The line break tag is self-closing though, which means it has a slash after the tag.

Space Tag

The space tag is another useful tag that can be a stopgap for presenting information when other tags don’t work as well. The space tag simple adds a little space in the content. The tag is written like so:

&nbsp;

It’s one of the more wacky HTML tags and there isn’t much to explain that, so just remember how to write it.

Bold Tag and Italic Tags

The bold and italic tags are the most common way to style your text, so good to know. Here is how you write them:

<b>This text is bold now.</b>

<i>This text is italic.</i>

Link or HREF Tag

The link or HREF tag makes it possible to link a section of text or an image to an address on the world wide web. Similar to the image tag, the link tag is a little more complicated, but once you know it, you know it!

<a href=“http://www.google.com”>Google</a>

The link tag above links to Google. What it says is “What is the href linking to?” It is linking to the website url in the quotes: ‘http:www.google.com’.

The tags are placed around the text that one wants to link, in this case that text is “Google.”

So, those are the basics and good to know if you want to add some elements to your webpages on the fly without having to always use a visual editor. If you want to take a look at the HTML on any page you are working on in WordPress, you can also click the tab in the upper right of the visual editor that says “Text” — that is the HTML view.

Margaret Penney is the Managing Editor of Notes on Design. Margaret is a teacher, designer, writer and new media artist and founder of Hello Creative Co.

Recent Articles

Best Graphic Design Conferences in 2024

How Much Do Graphic Designers Make? 2024 Guide