Top HTML5 Tags You Must Learn

Share This Post!
Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Email this to someone

Let’s learn HTML tags! This is the third module in the How to Make Your Own Website Tutorial.

In module two, I introduced the “Hello World!” example using basic HTML tags together with the tools and process enabling you to make your first website! It was only one page, but it’s a start! I introduced you to a free advanced text editor and HTML5 tags. We also learnt that tags are defined by W3C and learnt a few basic ones such as <title>, <h1> and <p>.

You are now ready to learn the most common HTML5 tags enabling you to add more content into your web pages and bring them to life! The reason I say the most common, is that W3C defines a pretty big set of HTML tags but you rarely need to use all of them. It is sufficient to learn the most commonly used ones and then later pick-up a few more additional ones as needed. Most tags may also have attributes associated with them and again we will learn the most common ones to get you started in no time!

Remember, the key take-away from the previous lesson, your HTML code is written in a text editor, saved to an HTML file which has a .html extension and then the results can be viewed in a web browser.

So let’s continue learning and discover the top HTML5 tags you must learn. Let’s jump in!


Enter your email below and receive everything you need
to get started with coding! ALL 100% FREE!

Watch Supporting Video on YouTube

HTML Tags

All HTML tags take the form:

<tag>content</tag>

Think of <tag> as marking the start of the content and </tag> as marking the ending of the content. The tag describes or marks your content to tell the browser how to show it. That is why HTML is known as a mark-up language. Notice how the actual <tag> is only visible in HTML code and only the content of the tag is visible when you view the web page in a web browser!

HTML Tag Attributes

Tags may also have attributes. HTML attributes are coded like this:

<tag name="value">content</tag>

Think of an attribute as a name/value pair associated with the tag. It usually tells the browser additional information about how that tag should be displayed or how it should behave! The attribute value is enclosed in double quotes.

A tag may also have many attributes associated with it, not just one attribute. In such cases, HTML tags with several attributes look like this:

<tag name1="value1" name2="value2">content</tag>

This will become clearer once we learn about the link tag below!

The Header Tag

As we covered in module 1, the header tag is used to defined titles inside the HTML document. <h1> all the way through to <h6> are available to create titles and sub titles!

Example:

<h1>1. This is a title</h1>
<h2>2. Sub title</h2>
<h3>3. Sub sub title</h3>
<h4>4. And so on</h4>
<h5>5. One more sub title</h5>
<h6>6. All the way to header 6</h6>

This is how it looks on a web page:

1. This is a title

2. Sub title

3. Sub sub title

4. And so on

5. One more sub title
6. All the way to header 6

 

The Link Tag

This tag defines a hyperlink or link for short which points to another web page. It is also sometimes called an anchor. In HTML it is abbreviated to just <a>. The anchor may point to another of your own web pages or a web page created by someone else.

The basic structure of an anchor tag looks like this in HTML code:

<a href="http://www.learn-to-code-london.co.uk">Homepage</a>

Notice how the href part above is an attribute to the anchor tag.

On a web page the link would then appear as:

Homepage

When you click the link, the browser will take you to that web page.

The HTML tag may also have an attribute called target. This attribute can be used to tell the browser to open the linked web page in a new window.

<a href="http://www.learn-to-code-london.co.uk" target="_blank">Homepage</a>

The Image Tag

As you may have guessed, the image tag inserts a picture into your web page! In HTML, the tag is abbreviated to <img>.

<img src="HTML5_Logo_512.png" title="HTML5" alt="HTML5">

Notice anything funny about the <img> tag? Look closely! It is one of the few tags that does not have a closing mark-up tag! An eagle eyed reader may have spotted that it does not end in </img> as you may expect. This is an exception to the usual tag structure and is this way for historical reasons.

The src attribute tells the browser which image file to download and show. This image file must be stored on your web server such that it can be accessed worldwide. The src tag can be relative or absolute. Relative simply means that the image is found with respect to the HTML page. So in the example above, the image file HTML5_Logo_512.png is expected to be available on the web server along side index.html file. If we specify an absolute path we would have the full web address (or URL) of the image file inside the src attribute.

<img src="http://www.learn-to-code-london.co.uk/blog/wp-content/uploads/2017/02/HTML5_Logo_512.png" title="HTML5" alt="HTML5">

The <img> tag also has a title attribute which will be shown when the mouse is hovered over the image on the web page. The alt attribute defines the alternative text to display if for some reason the image cannot be displayed by the web browser.

Modern browsers can display images in many different formats, but as a general guideline it is best to stick with PNG and JPEG formats.

On a web page the image tag would then appear like this:

HTML Tags

 

The Line Break Tag

It is useful to break up text on a web page with a line break and of course there is a tag defined for that:

<br></br>

But it seems silly to just open and then immediately close the tag with no content. So for such empty tags (without content) there is a short hand syntax.

<br />

The Horizontal Rule Tag

Notice how some web pages break up the paragraphs using a faint line? Thats the horizontal rule tag in action and it looks like this:

<hr />

In a browser it would be displayed like this:


The Div And Span Tags

The <div> tag defines a division in an HTML web page. It is particularly useful for formatting separate parts of a web page differently. Here is an example:

<div>It's really useful to learn HTML</div>
<div>Because it allows you to build your own web site!</div>

In a browser it would be displayed like this:

It’s really useful to learn HTML
Because it allows you to build your own web site!
A <span> tag is very similar to a <div> but it is usually used to surround a smaller amount of content. The key difference is that <div> will always be followed by a line break whereas <span> will be inline.

The List Tag

The list tag, abbreviated to <ul> allows us to have a list of items displayed on a web page using bullet points. <ul> stands for unordered list.

<ul>
  <li>Monday</li>
  <li>Tuesday</li>
  <li>Wednesday</li>
</ul>

In a browser it would be displayed like this:

  • Monday
  • Tuesday
  • Wednesday

We can also have an ordered list:

<ol>
  <li>Monday</li>
  <li>Tuesday</li>
  <li>Wednesday</li>
</ol>

And in a browser it would be displayed like this:

  1. Monday
  2. Tuesday
  3. Wednesday

The Pre Tag

The <pre> tag is used to mark-up pre-formatted text. It is great for showing code in a web page for example. It can also be used as a neat way to show footer text too.

<pre>2017 Learn To Code London</pre>

And in a browser it would be displayed like this:

2017 Learn To Code London

Yes, we have been using the <pre> tag in this web page to format the code examples all along!

Blockquote

This tag is used for indicating long quotations:

<blockquote>You affect the world by what you browse</blockquote><p>- Tim Berners-Lee</p>

And this is how it would appear on a web page:

You affect the world by what you browse

– Tim Berners-Lee

Bringing It All Together

We have now covered the most common HTML tags and attributes, let’s bring it all together in one example web page! Remember, that HTML documents have hierarchy and we can nest our tags how we please to get the result we want!

Let’s take a look at an example – I like skateboarding so I’m going to setup a simple landing page for a made up website called RetroSkatr.com!

See the Pen XpQqWj by Learn To Code London (@learntocodelondon) on CodePen.

In the advanced editor:

HTML Tags
It’s easier to read HTML using an advanced editor

And in the browser it looks like this:

HTML Tags
Our example web page selling skateboards

Take a bit of time to step through the code line by line. This will probably be your first hurdle that will require persistence. Try to see through the wall of code. There is structure, a hierarchy which simply brings everything together that we have covered so far into one big example. The best way to read it is in sections. Identify the <head> and <body>. Then look at each one at a time.

Our web page is good, but still looks pretty boring! Don’t worry, we will bring it to life over the next few modules! So stay tuned.

Exercises

1. Try playing around and changing the example. Grab the code, copy it into your text editor, save it to your computer in a file called index.html and then open that file in a web browser to get started.
2. Try setting up a new web page about a topic that interests you!

New Terminology You Learnt In This Module!

Anchor

An anchor is just another name for a link.

Short Hand

A short hand is an abbreviation that programmers use to make their code more concise.

Relative Path

A relative path starts from some given working directory, avoiding the need to provide the full absolute path.

Absolute Path

An absolute or full path points to the location in a file system, regardless of the current working directory

Syntax

Syntax is the structure of code in a language. We are learning HTML syntax. Syntax can also be applied to natural language. For example, the syntax of English is the arrangement of words and phrases to create well-formed sentences.

Landing Page

A landing page is a simple web page which serves as the primary entry point for a website. It’s aim is to catch the attention of the visitor and get them interested in a particular product or service.

Summary

That’s the end of “Top HTML5 Tags You Must Learn” module. We learnt the most commonly used HTML tags and combined them into a simple web page selling skateboards! We also saw HTML attributes in action.

Next Module: The Secret Most Programmers Won’t Tell You!

If you have any questions please use the form below to comment!

Share This Post!
Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Email this to someone

One Reply to “Top HTML5 Tags You Must Learn”

Comments are closed.