What is HTML? HTML Basics for Bloggers
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 <strong> tag.
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 <strong> tag.
Italics are much the same except the <em> tag is used instead.
Example:
Result:
Heading Tags
Another important tag is the <h1> tag. H1 tags are used to indicate the heading of a web page. Example:
<h1>HTML Basics</h1>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 ( <h1>– <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…
HTML Structure
Moving on, every web page written in HTML shares a common structure, an example of which is below:
<html>
<head>
<title>A Simple Web Page</title>
</head>
<body>
<h1>A Simple Web Page</h1>
</body>
</html>
<!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> and <body>.
<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
Title Tag
You probably noticed that there is a <title> tag and that it has the same contents as the <h1> tag. What’s the difference?
While <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.
Nesting Tags
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!
Uh i really needed this lection, i am starting the web development, as a fronted developer. I find it very interesting soo i will follow up your blog for more lessons!
Have a nice day.
I really like the simplicity with which you explain these topics.
This is super helpful to have the basics broken down! Bookmarking your site for the next time I need some code!
Great info in layman’s terms (which I truly need!)
I love that you make coding look easy and fun. Thank you so much!
It is easy since I do think it is fun! It isn’t always easy but when it works I still get excited about it.
You’re such a great teacher! I’ve learned so much. I’ll be coming back for more.
Very well said and easy to understand. I know a little bit about html but it is helpful to have someone who really knows what they’re talking about explain it clearly 🙂
It seems fairly easy when you explain! I believe I can do what you taught because you did such a excellent job! I am looking forward to see more!
This is a very clear explanation. The tech side of blogging is hard for me to wrap my brain around. When I see something I’d like to add, and see those words “just add this little bit of code, and . . .” I’m like, should I panic now? Ha. Thanks for making it less intimidating.
Cool!! Thanks for sharing you! You will have to let me know when you are teaching more coding topics. I’m interested in learning how to make digital stickers for keyboard and texting but do not understand what to do that past the Adobe Illustrator side. I do not understand what coding I need to learn. I love HTML I started learning it 20 years ago but never got past the basics but find I do still use what I know when working on my blog. Wow, times have changed learning Html was not as common as learning to type. Wow, times have really caught up with everyone.
I love what you are doing. This will help so many people