Web Developer Class Learn the Basic HTML Tags!

Application Security Testing: An Integral Part of DevOps

Hello and welcome to our next class, learning the basic Hypertext Transfer Markup Language (HTML) tags! No doubt youve attempted to write a small document in your favorite text editor, such as Windows Notepad, and saved it as TEXT for MAC or TEXT for your PC. You also remembered to save the document with the .htm or .html suffix, Im sure. Good, now lets move on to todays lesson, for today we actually write some HTML code!

HTML works in a very simple, very logical, format. It reads like you do, from top to bottom, and left to right. Thats important to remember. HTML is written with normal old text. What you use to set certain sections apart as headings, subtitles, bold text, underlined text, etc is a series of what we call tags.

Think of tags as making your structure. Lets say you want a heading. You will put a tag at the exact point you want the heading to start and another tag where you want the heading to stop. If you want a specific word to be emphasized, you will place a start emphasis tag at the beginning of the word and an end emphasis tag at the end of the word. Is this making sense so far? Later we will discuss usingCascading Style Sheets(CSS) to do the same thing, but for now we are concentrating on HTML, so back to the lesson!Tag FormatAll tag (I sometimes call themcommand) formats are the same. They begin with a less-than sign: and end with a greater-than sign: . Always. No exceptions. What goes inside the and is the tag. Learning HTML is learning the specific tags needed to perform whatever command you want to do. Heres an example:

The tag for a paragraph is p. That makes sense. For example:

In the old HTML standards, we used to use B for bold, and I for italics, etc. With the latest standards it is now accepted practice to separate content from presentation – by which we mean you set out thestructureof your document in HTML, and control how it displays using a CSS file (again, more on CSShere!)

This means we can mark our keywords usingstrongandemtags, which have the same effect, but comply with the latest standards.


strong is the beginning strong tag.

Joe is the word being affected by the strong tag.

/strong is the end strong tag. Notice it is exactly the same as the beginning tag except there is a slash in front of the tag command.

This is what the strong tags above produced:

Is the end tag for other commands simply the begin tag with the added slash?

A.No. As long as your commands are inside the and marks, the tag is used to alter the text, but the actual code is hidden from the viewer.

Q.Do I use capitals or lower case? Ive seen people using both.

A.In HTML, the browser doesnt care. However, should you move on to XHTML, they will have to be lower case, so you may as well just use lower case–it cant hurt and can only help.

Q.Must everything have a tag to show up on the page?

A.No. If you just type in text, itll show up. But it will not have any special look.

Q.What if I forget to add the end tag or forget to add the slash to the end tag command?

A.Thats trouble, but easy-to-fix trouble. It will be obvious if youve not placed an end tag when you look at the document in your browser. The entire document will be affected after the point where you forgot the end tag. Just go back into the document, add the slash, and reload the document into the browser.

Q.Do all HTML tags require both a begin and end tag, like above?

A.No. There are exceptions to the rule, such as break BR tags and image tags IMG, but lets stay on the ones that do require both tags to work for now. Moving along…Open and Close TagsThe majority of HTML tags do require both an open and a close tag (a begin and end tag). Most are very easy to understand because the tag is obvious. Here are a few and what they do to text:

Note: the strong and em tags are normally found inside a paragraph. There is a technical reason for this which well cover later.

Yes. Just make sure to begin and end both. Like so:

strongemStrong and emphasis/em/strong gives youBold and Italic

If you do use multiple tags to alter text, make a point of not getting the end tags out of order. Look at this:

strongemStrong and emphasis/strong/em

In terms of format, the example above is not correct. The end tags are out of order in relation to the start tags.

Always set the beginning and end tags at the same time, always placing them on the farthest end of the item being affected.

Here, again, is the example above in correct form:

strongemStrong and emphasis/em/strong

Notice the strong tags are on the far ends. Next in line are the emphasis tags. Just keep setting commands at the farthest ends each time you add them and youll stay in good form.Single TagsThe open and close tag format dominates the majority of the available HTML tags, but there are tags that stand alone. Here are two useful ones:

This command gives you a line across the page. (

stands for Horizontal Reference.) The line right above the words Single tags was made using an HR tag.

eaks the text and starts it again on the next line. Remember you saved your document as TEXT so where you hit ENTER to jump to the next line was not saved. In an HTML document, you need to denote where you want every carriage return with a BR.

So, here we go… youre going to write your first HTML page using what you have learned above plus a few other items. And these other items are important to every page you will ever write. Why? Because they will be on every page you ever write.

For a properly formed document, you need a doctype. For example:


This tells the browser exactly what version of HTML you are using. While this wont make any difference to you early on, when you get into CSS and positioning it will have a huge impact, so get into good habits now to avoid the problems later!

You will always have this tag: HTML

That makes sense. You are denoting that this is an HTML document.

Your next tags will always be these: TITLE and /TITLE

See the very top of this page? I mean way up top. Above the FILE — EDIT — VIEW menus. The colored bar up there. Right now it reads Web Developer Class: Learn the Basic HTML Tags Thats the title of the page and thats what you are denoting here. Whatever you put between these two tags will show up in the title bar way at the top.

Finally, youll end every page you write with this tag: /HTML

Get it? You started the page with HTML and you will end the page with /HTML. That makes sense again.So, Here We Go!

I want you to play around with these commands. Just remember that HTML reads like you do, top to bottom, left to right. It will respond where you place the start tag and stop where you place the end tag. Just make sure your tags are within the and items.

Heres a sample page to show you what I mean for you to do tonight:!DOCTYPE HTML PUBLIC-//W3C//DTD HTML 4.01//EN

titleMy first HTML document/title


pThis is my very first HTML page.p

Notice I only used the tags I showed you on this page. Yes, its a simple page, but youre just starting out. Notice the HTML and /HTML. Notice the TITLE and /TITLE. See how theres a beginning and end tag when I alter the text and that the P and BR commands are used to go to new lines?

Look at the program above and then what it produced. Look at the source code when you open the page. See how the HTML tags denoted where text was affected? Good! I knew you would. Now go! Go into the world — or at least to your text editor — and create. Follow the instructions inHTML Primer 1to help you save and then display your first HTML page.


Searching our resource databaseto find your matches…

By submitting your information, you agree that m may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with theQuinstreet Privacy Policy.

HTML Class: Creating Links to Other Pages

Web Developer Class: Installing and Setting Up a Free Discussion Forum–SMF

Web Developer How To: Upload Images Using PHP

Web Development 101: Opaque Images, Text and Hover Effects Using CSS3

Web Developers Guide: How to Speed Up Your Website

Web Development 101: Using CSS3 To Create Rounded Corners

Web Developers Guide to Selecting Domain Names

Web Developer Class: Using Forms for Feedback or Contact Pages

Web Developer Class: How to Hide your Source Code

Web Developer Class: Embedding a Flash player in Your Web Site

Thanks for your registration, follow us on our social networks to keep up-to-date