You Only Need

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.

I am going to continue to carry on where I left off in the first tutorial:

HTML is Easy. If you havent done so yet, I recommendreading it.

The 10 HTML tags in the list below are for formatting content. If you read thelast 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. Dont 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:

Lets start with something very common. Creatingboldanditalicwords. Open the example document from the first tutorial – example1.doc in your favorite word processor (Microsoft Word or other). Go ahead and make a coupleboldwords in your paragraphs and make a fewitalicwords too. You already know how to do this. Your document should look something like the example below:

As you can see, I have created 3boldwords and 2italicwords in our document. the HTML tags forboldanditalicare very easy to remember. Use theb/btag for bold, and use thei/itag 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 HTMLa/atag. Lets add a line to our webpage.html file like line 9 in the example below:

h1My First Web Page/h1 h2Headings Are Great Fun/h2 pThis is my first bparagraph/b in my new iwebpage/i. This is going to be great. I am so excited I can hardly contain bmyself/b. Dont you just love paragraphs? I find them very useful. /p h2Web Pages Are Exciting Too/h2 pYes, thats right – web pages can be a lot of fun. Learning how to create web pages is easy and bentertaining/b. This is my second iparagraph/i. I hope you like it./p aLink 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 pressCONTROL + R(Windows) orCMND + 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 addeda/atags around the wordsLink to Google, we didnt actually tell our link where to go. So, the link in our example will do nothing. Dont worry, we can fix that by adding a little bit more information to oura/atag. We can customize HTML tags and provide them with more information by usingattributes. 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:

Add the attribute to yourtag 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 HTMLlitag is for creating list items. We are going to surround each item on our list inli/litags. The next step is to surround our list of items with the HTMLul/ultag. The Unordered List tag groups all our list items together in a single list. Follow the example below:

ul liApples/li liBananas/li liPears/li liOranges/li liGrapes/li /ul

Save your webpage.html file and refresh your web browser. You should be seeing something like the image below:

The HTMLblockquote/blockquotetag is really straight forward. Its for creating quotes on the page nothing more. Why is this important? Well, its great to use in an article when you have to quote someone else or someones 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.

blockquoteA 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 thats it! You have just mastered the HTML blockquote tag. (pretty easy stuff isnt it.)

The HTML horizontal rulehr /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 selfclosing tag. View the example below:

Horizontal rules are a great way to divide a web page. Go ahead and add anhr /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 thehr /tag, the HTML image tag is self-closing and does not have a closing tag. View the example below:

Just like thea/atag (for creating links), the HTMLimg /tag needs anattributeto tell it what image to show on your web page. View the example below:

src=myimage.jpgThis part of the image tag the attribute, says that this image tag has a source (src) ofmyimage.jpg. So now we need a JPEG image namedmyimage.jpg. You can make an image with that name, or you will see amyimage.jpgimage included in the example files for this tutorial.

Place themyimage.jpgfile in the same folder/directory on your computer as yourwebpage.htmlfile. Add the HTMLimg /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. Dont 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, its just like ap/pparagraph tag. The difference with this HTMLdiv/divtag 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:divThis is a DIV container/div

Add an HTMLdiv/divtag 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 thediv/divtag is for creating sections or blocks of content. They are the building blocks of the web.

You can put any type of content in adiv/divtag even other HTML tags! View the example below:

The example above is just to illustrate that I can place anything in an HTMLdiv/divtag. Dont 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 eversoimportant 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!