5 Easy HTML Tags Anyone Can Code and Every Webpage Needs

Published 2016-06-20, updated 2023-03-27

Summary - A lot of people think learning HTML is a long and difficult process that requires formal training. HTML goes hand in hand with popular website building platforms such as WordPress, Squarespace, Drupal and Wix. These platforms are definitely necessary for the non-tech savvy business owner and writer, but what a lot of people don’t realize is that these platforms do not replace

A lot of people think learning HTML is a long and difficult process that requires formal training. In reality, the basics of HTML can be learned on the go with the help of online resources like W3Schools. I developed a basic understanding of HTML while designing a website on WordPress. Since then, I have always found it easier to optimize and customize web pages manually as opposed using CMS editors. Another thing I’ve noticed, my pages get better SEO traffic.

HTML can feel repetitive, and frustrating, especially when that single comma out of place turns an entire webpage upside down. To ease our pain, WYSIWYG (what you see is what you get - pronounced “wizzy wig”) editors like WordPress’s Visual Editor were created. “Great!”, we all thought, “finally I can build a website without all the stress and complexity of code.” Stylistically, WYSIWYG editors are meant to make your life simpler, but without the basic knowledge of HTML, any user could mistake important SEO opportunities like header type (H1, H2, etc.) and placement, for visual design decisions like text size. What a lot of people don’t know is that Google isn’t impressed by aesthetics: it doesn’t judge the legitimacy and quality of a website based on how good (or bad) a page looks.

HTML is essential for strong Search Engine Optimization (SEO).

If you’re like me, going past page 2 or 3 of search results is rare when looking for a service, business or even general information. SEO is how websites attract organic search traffic by maintaining a high ranking on search engines such as Google, Bing, Yahoo and others.

HTML goes hand in hand with popular website building platforms such as WordPress, Squarespace, Drupal and Wix. These platforms are definitely necessary for the non-tech savvy business owner and writer, but what a lot of people don’t realize is that these platforms do not replace the importance of HTML. The following are a few of the HTML tags that demonstrate the language's importance to SEO, for both manual and website building platform users:

Page Title

<title>Search Engine Optimization (SEO) : Getting Started - HTML Goodies</title&gt

The Page Title tag provides the search engine with the most relevant keywords for the page, to improve SEO keyword ranking . This tag does not appear on your actual web page. A tip from <HTML Goodies/&gt is to make your titles relevant and use as many of your most important keywords as possible; but don’t be overly repetitive or long winded. Search Engines consider being too repetitive a “cheat” which devalues your page. Remember that this is the title that will appear in search engines, so it’s also your users first impression of your page.The title tag creates value in terms of relevancy, browsing and in the search engine results page. For Google, titles will be shortened and show “...” if they exceed 50-60 characters. That doesn’t necessarily mean search engines won’t use the words past 50-60 characters, but be mindful of how the title appears from a user perspective. Best practice: write a great title that converts. Ask yourself, would you open it?

Meta Description

<head&gt
<meta name="description" content="This is an example of a meta description. This will often show up in search results."&gt
</head&gt

Under your title tag lies your page Meta Description. The Meta Description does not appear on your actual page. This is where those keywords live that your potential visitor wants to see when they know exactly what they’re looking for, and when they don’t. The description should be between 150-160 characters. As Moz puts it, These short paragraphs are a webmaster’s opportunity to advertise content to searchers and to let them know exactly whether the given page contains the information they're looking for.

Heading Tags

<header&gt
    <h1&gtMost important heading here</h1&gt
    <h2&gtLess important heading here</h2&gt
</header&gt

The heading tag is one of the most straightforward HTML tags because it’s one of those instances where the search engine thinks like us. Heading tags are labeled by importance: h1, being your main page header, therefore the most important, followed by, h2, h3, h4, h5 and h6. First understanding this tag can be frustrating considering you may have to give up some stylistic ideas because the size of the headings don’t always look the best on your page. Keep in mind that h1 is also important from a user perspective because it must be inviting and relevant so people click-through and read your content.

Depending on the platform you are using to build your website, this HTML tag may or may not be on your radar. If it’s a WYSIWYG platform you may not even see this code; that’s why some experts say that the downside of visual website building tools is that many important HTML tags are hidden beneath layers of code. However, even if that's the case, you can still reveal heading tags. Right-click any section of your web page online and select ‘Inspect’ to see the elements of your page. If it’s not coming out as the heading tags you intended, consider writing the code manually in your platform. It takes no time and will definitely improve your SEO visibility.

Image Alt Tags

<img src="imagebeingused.png" alt="Image Alt Tag" height="desired height" width="desired width"&gt

The Image Alt Tag is extremely important and one of those tags that can be easily overlooked. The Image Alt Tag tells the search engine what the imagine is. One of the reasons this tag improves your SEO is because it is how your images end up on image searches.

Important: Do not use Image Alt tags for decorative images. Use them for: Images of merchandise (especially e-Commerce businesses), diagrams, infographics, your website logo, screenshots, photos of team members and others where appropriate. When users scroll over the image, the Image Alt Tag is what appears.

Anchor Text

<a href="https://www.klipfolio.com"&gtVisit Klipfolio!</a&gt

There are a number of reasons why simply posting a link on a web page is a bad idea. The first, from a user perspective it’s super unappealing. Second, anchoring text allows you to hyperlink a keyword or phrase which is ultimately better for SEO because search engines use this text to understand where you are linking to. Link relevancy, one of the metrics search engines use to identify page rankings, is directly related to how you anchor text because it uses these keywords to determine what the target page is about, and thus, which queries it should be relevant for.

Keep in mind where you position links on a webpage matters for SEO. Moz experiments have shown that if two links are targeting the same URL, only the anchor text used in the first link is counted by Google. Learn more: link building metrics.

Every digital marketer needs a working knowledge of HTML to improve fundamental aspects of your brand's SEO which makes you discoverable for both potential and existing customers. Track your improvements on a SEO performance dashboard and see the impact these easy HTML tags will have on your website traffic. To quote Michael King, “Building a user experience without SEO in mind is like building a car with no engine”.

Also see: The marketer's guide to APIs

Topics:Design How To