What Are The Basic HTML Elements? Basic HTML Formatting Tags

In this tutorial you will learn the basics of HTML. A basic run-through of tags, declaration and how to setup your first page will be explored. If you have any questions, please do not hesitate to !

Understanding and Declaring HTML

Understanding the basic foundations of html is very important, as you will need this knowledge to enhance your website. Once you have mastered the basics, HTML is actually a very easy language to write. All HTML files are made up of tags. A tag is a piece of data (usually text) which is contained in an opening tag and a closing tag, shown below:

Opening Tags – An opening tag opens a command on a page. For example if you use <strong>, this will make everything after the tag bold.

Closing Tags – Now say you only want a few words in bold, you will have to stop the command, by closing the tag. This is done like so – </strong>.

Basically, anything you place in between an opening and closing tag, will have the trait (determined by your tag choice) applied to them. It is important to note that almost all tags have closing tags, but some do not, which we will explain in later tutorials.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> – Now that we understand what tags are, we must understand how to declare html. By declaring the HTML for your web page, you are telling the browser what language or version of HTML is being used for the page. This is not necessary for a page to render, but it is required according to W3C Standards. While there are various types of declarations, strict and transitional are the two most commonly used types.

Setting Up Your First Page / Basic Tags

At this time, please open a new (blank) HTML document in your HTML editor. Once opened, please copy and paste the below tags into your HTML Editor (explored in our getting started tutorial). Save this file as “index.html” and do nothing else with it for now. Below, the various tags used will be described!

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Title of your Website</title>
</head>
<body>
</body>
</html>

<html>

The html tag tells the web browsers exactly what language is being used for your page.

<head>

The head tag could be compared to the header in a word document. It contains the configuration options for your web page, such as the title.

<title>Title of your Website</title>

This tells the web browsers what you would like the title of your page to be displayed as. The title appears at the top of the web browser in FireFox, IE, et al… Enter the name of your web page in between the <title> tags at this point.

</head>

This simply closes your header tag, since you are done with it.

<body>

This opens the body section of your page. While we won’t be discussing the body tag in-depth in Part One, we can explain it briefly. The body tag is where all of the text, tags, scripts, etc… that you want seen on your web page will go. This is where all information goes and layout information will be contained (for basic html purposes only).

</body>

Once you are done with your body section, you must close it.

</html>
Once you are done with your html page, you must close the html tag.

Summary

In conclusion we have learned what tags are and how they help us build web pages. We have also learned about declaring html and why it is important. Finally, we covered all of the basic html tags required to make a standard, blank html page. Be sure to check out Part Two in this series!