What exactly is HTML?
HTML for bloggers explains what exactly HTML is, what it looks like and how it works. Many bloggers are intimidated by code but it really doesn’t need to be something complicated or scary.
The Basics of HTML for Bloggers
HTML stands for Hyper Text Markup Language.
It is the code that all web pages are written in. The best way to think of what HTML is is to think of it as a way of ‘marking up‘ (or annotating) a bunch of plain text so that it can become a web page. The markups or annotations describe each and every part of the page’s structure.
The ‘hypertext’ part means the text can include links (or ‘hyperlinks’) to other resources.
All of your blog posts and pages already include HTML that WordPress has put there for you.
What does HTML look like?
In HTML, tags are placed at the beginning and at the end of the plain text (or content) that they are structuring and tells that text it is a paragraph or a heading or whatever. A tag is a word or an abbreviation surrounded by angled brackets. These tag-content-tag combinations form HTML elements, or nodes. Here’s what an element looks like:
Note that the closing tag includes a forward slash immediately inside of the opening bracket. Closing tags are very important since they mark where the element ends.
OK, enough of the theory of HTML! Let’s check out some real-world HTML tags.
Common HTML Tags
To make text bold, websites use the
Here’s an example:
Closing tags are <strong>very</strong> important.
Here’s the result:
The word ‘very’ has been bolded because it is surrounded by the
Italics are much the same except the
<em> tag is used instead.
Another important tag is the
<h1> tag. H1 tags are used to indicate the heading of a web page. Example:
Each web page usually has one set of
<h1> tags that are reserved for the page title. This page’s
<h1> is the heading at the top of the page that reads ‘HTML Basics for Bloggers.’
There are six levels of subheadings (
<h6> ), from largest to smallest in size.
ppssstt…don’t look now…
but there is an
<h2> coming up on this page right now…on the next line…
Moving on, every web page written in HTML shares a common structure, an example of which is below:
<!DOCTYPE html> is the first and most important line of an HTML document. It ensures that web browsers will correctly read the HTML that follows. If you visit a page that doesn’t include it, the page might not display as the owner intended.
Next, there is an
<html> tag that contains the entire contents of the page. There are only two tags immediately inside of
<html>, and they are
<head> is the place for any special information about the web page – the title, a description, its correct URL, keywords to describe the page etc.
<body> is where you will find all the content that shows up on the page itself. This includes headers, main content, sidebars and footers.
Download a FREE Cheat Sheet Here
You probably noticed that there is a
<title> tag and that it has the same contents as the
<h1> tag. What’s the difference?
<h1> is what appears on the page itself,
<title> is used as the title of the browser window or tab.
<title> is also used in search engine results. The contents of these two tags do not need to be identical, however, sometimes they are.
When you are considering the HTML structure, it is very important to understand that you can have tags inside tags (nesting), but you can’t have them overlap.
So this is fine:
<strong><em>Bold and italic</em></strong>
But this is not:
<strong><em>Bold and italic</strong></em>
Note the different order that the tags are closed.
Learn More HTML
This HTML for bloggers is just the very basics of HTML. Hopefully, it has helped you have a better understanding of what HTML is and how it is used to structure your site.
But if this tutorial about what is HTML has inspired you to learn more about it, I encourage you to check out this post about creating text boxes with some basic HTML and CSS because I always enjoy learning by putting this information into action and seeing it work.
There are lots of great resources online for learning about what is HTML and basic HTML training and tutorials, like Treehouse, Udemy, and Codecademy. There are also plenty of great books on HTML, from Beginning HTML5 & CSS3 for Dummies (I am a huge fan of the For Dummies books!!) and even HTML for Babies.
Share with me in the comment below and let me know what sparks you to learn to code!