You may think you can avoid learning HTML for all time and eternity, but if you’re serious about starting a blog or website – you’ll need to know the basics. Knowing basic HTML codes can help you properly format your site’s content in a way that is easily readable and more likely to be picked up by search engines.
Many people think HTML sounds too confusing or too hard to learn, but it’s actually easier than most would think. HTML is simple to learn once you understand what each code means and how to recognize specific codes among fields of text. This guide will take you through the most commonly used HTML codes, their designated purpose, and how to use them on your blog or website.
Introduction to HTML
HTML stands for Hyper Text Markup Language and is the standard language developers use to create websites. Each code adjusts the formatting of text, photos, and other page elements by having an effect on size, font, color, graphics, and hyperlinks.
HTML codes are surrounded by two keywords called HTML tags in angle brackets that look like this:
It’s important to note that any variation in the spelling or characters of a specific code could result in a code that doesn’t work. If your photo isn’t centered or your text doesn’t appear the way it should, there is most likely a problem with your code. HTML codes are not case-sensitive, so <tag> means the same as <Tag>.
In WordPress, you can use HTML to edit your posts, pages, and sidebar text widgets directly from the site. However, it is recommended that you edit HTML codes in a text editor like Notepad for Windows users or TextEdit for Mac users. It’s easy to make mistakes, but it’s not as easy to correct them when your code is buried among pages of text.
Here are some common HTML codes that would be useful for any website owner or blogger to know. Bookmark this page in your browser for a quick list to use when necessary.
<p>this is a paragraph.</p>
<h1>This Is A Heading</h1>
<br /> = line break (no closing tag)
<b>bold</b> = bold
<i>italic</i> = italic
<u>underlined</u> = underlined
<s>strikethroughtext</s> = strikethroughtext
To embed an image:
<img src=”photoURL” alt=”keywords describing image”>
To specify width and height:
<img src=”photoURL” alt=”keywords describing image” width=”230” height=”128”>
To specify alignment:
<img src=”photoURL” alt=”keywords describing image” align=“center, left, right, or justified”>
- Alternatively, you can also use <center> and </center> before and after the embed code if you wanted to align the image in the center of the page. This also works for text, videos, and other elements.
To use an image as a link:
<a href= “linkedURL”><img src=”photoURL” alt=”keywords describing image” width=”230” height=”128”></a>
In HTML, links are followed with the <a> tag.
<a href=”URL”>Displayed Hyperlink Text</a>
Adding a target attribute can specify how the link is opened:
<a href=“URL” target=“_blank”> = Opens in a new window or tab
<a href=“URL” target=“_self”> = Opens in the link in the same frame within the site that it was clicked on
<a href=“URL target=“_parent”> = Opens the linked document in the same window
For a bullet point/unordered list:
And for a numbered/ordered list:
Master HTML Basics
You can also use their Tryit Editor to test out different codes to see the effect of each one. It may take some getting used to, but once you master the basics of HTML you’ll come across less roadblocks when it comes to designing and formatting your content.
What HTML codes do you find the most interesting or useful? Let us know in the comments and thanks for reading!