Five Simple, Useful HTML Tags
Most people don’t need to know how an HTML document is formatted or structured. They don’t need to know what goes in the <head> and what goes in the <body> tags. If you have a WordPress site and work with the HTML of pages at all (if you click on the HTML tab on the visual editor), these tags will likely be all you need to know.
Five Useful HTML Tags
Minor note: This is a really simplified guide that does not account for differences between different types and standards of HTML. I’m delivering the most typical and relevant usage of the tags – which is the XHTML version.
<p> – The Paragraph Tag
The simplest and most common of the HTML tags. This tag describes a paragraph of text within a section of content on a web page. This very text here is wrapped in a <p> tag!
To use a <p> tag, simply wrap whatever text you want to make into a new paragraph like so:
<p>This is an example of how to use the paragraph tag.</p>
The text will show up like this:
This is an example of how to use the paragraph tag.
It’s just normal text content! Each use of the <p> tag creates a new line, a break between paragraphs.
Author’s note on line breaks: You may have also seen the <br /> tag used to break text between lines. <br /> is also a valid HTML tag, but it tends to be used incorrectly. <br /> is great when you want to separate specific lines of text – if you’re writing poetry, and you need to add a new line in the middle of the sentence. <p> is used when you want to start a new paragraph of text. The two tags have similar effects, but are usually styled and formatted differently with CSS. Generally it is best to use the correct tag for the correct situation.
If you switch to the HTML editor on a WordPress page or post you might not see the <p> tags wrapping each paragraph of text – they are generated later by WP.
<a> – The Hyperlink Tag
<a> is used to specify a section of text that will be displayed as a hyperlink in a browser window.
To create a hyperlink, wrap a section of text in <a></a> tags. You will also need to specify the destination of the hyperlink using the href parameter.
<a href=”http://www.epicwebsites.com”>This will turn into a hyperlink.</a>
Here’s what that tag will look like in your browser:
This will turn into a hyperlink. (http://www NULL.epicwebsites NULL.com)
<img> – The Image Tag
The <img> tag is used to insert an image into the page.
<img src=”logo.png” />
Here’s what that will look like:
Your image will have to already be on the internet. If you upload your image to a photo service, then use the URL to the image, you can use that URL as the src parameter.
If you’re clever, you can combine the <img> tag with the <a> tag to make a clickable image. Try this:
<a href=”http://www.epicwebsites.com”><img src=”logo.png” /></a>
<h1> – The Heading Tag
I consider heading tags to be one of the more important tags. There are six heading tags, ranging from <h1> to <h6>, in descending order of size.
Header tags are super important to organize content on a web page. Also, header tags are one major thing search engines look for for determining relevancy of a particular web page in search engine results. They’re really important!
To make some text a heading, surround it with the appropriate header tag.
<h1>This is an H1 tag.</h1>
Here’s what that will look like:
This is an H1 tag.
Different levels of header appearance is controlled by the CSS stylesheet of the website. For our site, specific headers are used for special types of text content. I’ll run through the different headers used on this site – but remember – it will look different on every website!
This is an h1 tag.
This is an h2 tag.
This is an h3 tag.
This is an h4 tag.
This is an h5 tag.
This is an h6 tag.
As you can see, each tag is different from the last! Some of them aren’t used on Epic Websites, though. I don’t ever use h6 tags, but that’s just my personal preference.
<strong> – The Strong Tag. (read: Bold Tag)
The strong tag bolds text contained within a <strong> </strong> tag pair.
<strong>This text will be bold.</strong>
This text will be bold.
Simple enough, yeah? Another one to play with is <em>, for italicized.
Interested in learning more about HTML?
w3schools.com (http://www NULL.w3schools NULL.com/html/) has an excellent tutorial on how to use HTML, and is a great resource for learning more about web design.