This tutorial is an introduction to the 10 most common HTML tags. HTML is a very simple markup language. Even though there are close to 100 tags in HTML5, you usually only end up using a handful 99% of the time. I am going to teach you 10 HTML tags you need to markup almost all content and anything else you can think of when creating a web page.
The 10 HTML tags in the list below are for formatting content. If you read the last tutorial, you already know how to use heading and paragraph tags, so I am going to teach you the remaining 8 HTML tags that you need. Don't worry, even though it looks like a lot of new tags to learn, they are easy to remember and they all work the same way. Here are the 10 HTML tags I am going to teach you:
| ||Unordered List & List Item|
Let's start with something very common. Creating bold and italic words. Open the example document from the first tutorial - example1.doc in your favorite word processor (Microsoft Word or other). Go ahead and make a couple bold words in your paragraphs and make a few italic words too. You already know how to do this. Your document should look something like the example below:
As you can see, I have created 3 bold words and 2 italic words in our document. the HTML tags for bold and italic are very easy to remember. Use the
<b></b> tag for bold, and use the
<i></i> tag for italic. The next step is to add our HTML tags to the document around the bold and italic words. Your document should look like the example below:
Open your webpage.html file from the last tutorial in your favorite text editor (Notepad for Windows & TextEdit if you are using a Mac). Copy all the content from your example1.doc document and replace the content in your webpage.html file. Save this file and open it in your web browser by double clicking it. It should look something like the example below:
By now, you should be getting pretty familiar with using your text editor (NotePad or TextEdit). From now on, we are going to do all our examples directly in the text editor instead of copy and pasting our content back and forth from your word processor.
Links are one of the most important part of any web page. You have probably visited thousands and thousands of links as you have browsed the internet. Links are easier to create than you think. We can create links (hyperlinks or "anchors") by using the HTML
<a></a> tag. Let's add a line to our webpage.html file like line #9 in the example below:
<h1>My First Web Page</h1> <h2>Headings Are Great Fun</h2> <p>This is my first <b>paragraph</b> in my new <i>webpage</i>. This is going to be great. I am so excited I can hardly contain <b>myself</b>. Don't you just love paragraphs? I find them very useful. </p> <h2>Web Pages Are Exciting Too</h2> <p>Yes, that's right - web pages can be a lot of fun. Learning how to create web pages is easy and <b>entertaining</b>. This is my second <i>paragraph</i>. I hope you like it.</p> <a>Link to Google</a>
Once you have added the link HTML to your webpage.html file, save your file.
To view the changes that you just made to your webpage, you can click the "refresh" button on your web browser. Or you can press
CONTROL + R (Windows) or
CMND + R (Mac). This will "refresh" the view of your web page in the browser and you will be able to see the new changes. You will be doing this a lot as you make changes to your web page.
Even though we added
<a></a> tags around the words
"Link to Google", we didn't actually tell our link where to go. So, the link in our example will do nothing. Don't worry, we can fix that by adding a little bit more information to our
<a></a> tag. We can customize HTML tags and provide them with more information by using
attributes. To make our link to google work, we need to add an attribute with the address of the web page we want our link to go to. View the example below:
<a href="http://www.google.com">Link to Google</a>
Add the attribute to your
tag in your webpage.html file like the example above. Save your file and refresh your web browser. You should see a link to google at the bottom of the page. Go ahead and click it! Congratulations, you now know how to make links! You can wrap any word in your web page in "anchor" tags and create a link. You can make links to any webpage on the internet. You can add as many links as you like. Experiment and have fun. You are well on your way to becoming an expert at working with HTML.
We are going to learn how to create a list. We are going to create a bulleted list. You are probably very familiar with bulleted lists like the example below:
In your webpage.html file, type a list of fruits like the example above. Next we are going to turn our plain text list of fruits into a real HTML list. The HTML
<li> tag is for creating "list items". We are going to surround each item on our list in
<li></li> tags. The next step is to surround our list of items with the HTML
<ul></ul> tag. The "Unordered List" tag groups all our list items together in a single list. Follow the example below:
<ul> <li>Apples</li> <li>Bananas</li> <li>Pears</li> <li>Oranges</li> <li>Grapes</li> </ul>
Save your webpage.html file and refresh your web browser. You should be seeing something like the image below:
<blockquote></blockquote> tag is really straight forward. It's for creating quotes on the page – nothing more. Why is this important? Well, it's great to use in an article when you have to quote someone else or someone's writing or and excerpt or for client testimonials or just plain old quotes in general. You already know how to wrap content with HTML tags and these are no different. See the example blow:
“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.”Saint Exupery
<blockquote>“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” - Saint Exupery</blockquote>
Create a blockquote in your webpage.html file and save it. Refresh your web browser – that's it! You have just mastered the HTML blockquote tag. (pretty easy stuff isn't it.)
The HTML horizontal rule
<hr /> tag is a way to create a break in your web page content and draw a line across the page. Unlike the other tags you have learned, the horizontal tag does not have an open an closing tag and does not wrap around content. You may have noticed that this tag has a
/ forward slash in it just before the closing angled bracket. This is called a self–closing tag. View the example below:
Horizontal rules are a great way to divide a web page. Go ahead and add an
<hr /> tag to your webpage.html file, save it and refresh your web browser to view the results.
Most web pages on the internet have some type of image content on the page. Images in HTML are easy to use. Just like the
<hr /> tag, the HTML image tag is self-closing and does not have a closing tag. View the example below:
Just like the
<a></a> tag (for creating links), the HTML
<img /> tag needs an
attribute to tell it what image to show on your web page. View the example below:
<img src="myimage.jpg" />
src="myimage.jpg" This part of the image tag – the attribute, says that this image tag has a source (src) of
myimage.jpg. So now we need a JPEG image named
myimage.jpg. You can make an image with that name, or you will see a
myimage.jpg image included in the example files for this tutorial.
myimage.jpg file in the same folder/directory on your computer as your
webpage.html file. Add the HTML
<img /> tag to your web page like the example above. Save it, refresh your web browser and view the results. You should be seeing something like the example below:
Congratulations! You just learned how to add images to your web page. There is a lot you can do with images, like wrapping text around them, resizing them, adding borders to them, etc. Don't worry, I am going to show you how to do all that in a later tutorial. For now, all we needed to learn was how to put an image in our web page – and you have learned that. Great job!
You only have one more tag to learn and you will know all the most important HTML tags there are to know. You are well on your way to becoming an HTML expert. Way to go!
I saved this last HTML tag for last for a reason. This tag is a lot like the other HTML tags you have just learned. In a lot of ways, it's just like a
<p></p> paragraph tag. The difference with this HTML
<div></div> tag is that it is not for a specific type of content. This tag is for creating structure in your web page. You can think of it like a container or a building block. View the example code below:
<div>This is a DIV container</div>
Add an HTML
<div></div> tag like the example above to your web page, save it, and refresh your browser.
DIV is short form for 'division' and that is exactly what this tag is for. It is for dividing your web page content into containers. You have probably seen a lot of websites with "boxes" of content on the screen. This is a very common style of web design. That is what the
<div></div> tag is for – creating sections or blocks of content. They are the building blocks of the web.
You can put any type of content in a
<div></div> tag even other HTML tags! View the example below:
<div> <h2>A Title</h2> <a href="http://www.google.com">A link</a> <p>Some example text</p> </div>
The example above is just to illustrate that I can place anything in an HTML
<div></div> tag. Don't worry if the example looks complex. You will learn how to use these. I just wanted to show you an example of mixed content.
I will be showing you how to use these tags build your web page designs and how to position and structure your web pages. But for now, all I wanted to do was introduce you to this simple but ever–so–important HTML tag. This tag will become your best friend – trust me ;)
In this tutorial I introduced you to the 10 HTML tags that you will use 99% of the time when creating web pages. Experiment with these new tags in your web page – arrange and combine them in different ways. These tags will pave the way for you as you go forward learning how to build and design web sites like a pro. Congratulations!
This website was made on a 13" MacBook Pro and 23" ACD, hand–coded in Coda, designed in the browser (Safari 5.03 to be exact) using CSS3, HTML5, and jQuery 1.5. © Copyright Joshua Gatcke http://www.99lime.com 2011–2012. All Rights Reserved.