Like learning to speak a new language, there are some serious ups and downs when learning HTML basics.
Learning a new language is fun, exciting, and opens new doors of possibilities, but it also can have a steep learning curve.
Chances are that if you’re dipping your toes into the pool of programming languages, you’re starting with hypertext markup language (HTML).
Here, we’ll look at some of the core concepts of HTML tags and elements to get you on your way.
What Is HTML?
HTML is a language used on the Internet to create web pages and applications. If you’ve browsed the web at any point in your life, you’ve “seen” HTML.
In fact, you’re seeing its results right now.
It was developed in the 1980s by Tim Berners-Lee and first released in 1993.
It has expanded and evolved over the years, but the basic elements still remain true today.
Some HTML Basics
If you’ve browsed a book on the subject or even peaked into the HTML view of a WordPress page, then it may have seemed rather daunting.
The basics are easy, though, and we’ll start by look at some overarching concepts first.
Tags in HTML
Tags are the first thing to take into consideration. They are the building blocks for displaying web content.
Tags are usually words or abbreviations contained within carrots, such as “.” An ending tag will use a backward slash within the carrots, such as “.”
Tags determine what will happen: the text will appear, the text will format, images will appear, videos will play, words will link, etc.
Finish What You’ve Started
In general, an element begins with a start tag and ends with an end tag.
This isn’t always true, such as in the case of empty elements, but by and large, if you open a tag make sure to always close it.
Lose the Caps
It’s a rather simple concept here: use all lowercase letters.
Up until the turn of the century, some tags used all capitalized letters, but that no longer applies.
First In, Last Out
You ever hear the term “FIFO”? First in, first out usually means something to people who work in the food industry.
If you put certain food in storage first then you take it out to use first so that nothing goes bad.
When talking about tags in HTML, the opposite is true.
Nested tags are tags that build upon each other. It’s possible to have multiple tags surrounding content. The way you close many tags, though, is to close the tag that was last used first and close the first tag used last.
For example, if your code says:
THESE ARE IMPORTANT WORDS
Then you would close it like this:
….THESE ARE IMPORTANT WORDS
You end your tags in the opposite order that you started them in.
When talking about specific tags, let’s start with a basic one: the paragraph tag.
Simply put, paragraph tags form, well, paragraphs!
You start a paragraph with a ”
” tag and end it with a ”
” tag, and next thing you know you have a fully formatted paragraph of text.
Within a paragraph you can adjust the text in many ways.
- “TEXT” will make the word “TEXT” bold
- “TEXT” will make the word “TEXT” italicized
This is good to know if you need to emphasize certain words.
Especially if you’re creating web content for a blog or a business, it’s important to get a handle on header tags as well.
Paragraphs are fine and all, but you usually want to start with some kind of heading. Search engines will identify the words in header tags as important, and on a user level, it creates a good introduction to your content.
Headers start with an “” tag, with the “X” being a number, and end with an “” tag.
The numbers used indicate the type of header, and they go as follows:
main header (and the biggest one)
subheader that’s smaller than h1
even smaller subheader than h2
even smaller subheader than h3
It can keep on going smaller from there, but generally speaking, those are going to be the main header tags you will use.
Image tags can get a little complicated depending on what exactly you want to do with the image.
Basically speaking, an image tag starts with “” in the same tag. You could technically refer to this as an empty tag since the tag ends within the same carrots.
Within the image tag will be “src=” which is where you will insert the file path that determines where the image is.
You can also manually set the width and height of the image in pixels using “width=” and “height=,” respectively.
And you can even add alternative keywords using “alt=” to the tag for SEO purposes.
HREF or Linking Tags
Sometimes, you want certain text (or even images) to be able to link out elsewhere.
For that, you would use what’s called an HREF tag. These tags start with “” and ends with “.”
In place of “URL” above you would use whatever link you would like the text or image to link out to. For example, http://www.google.com if you wanted the user to link to Google’s homepage.
According to Tim Berners-Lee, the “a” stands for “anchor” and “href” stands for “hypertext reference” if you’ve ever wondered why the tag looks so odd.
An example of a linking tag might look like this:
Seeking More HTML Help
Hypertext markup language isn’t as complicated as you might think. HTML basics are easy to grasp, and hopefully you got an idea of where to start here.