Introduction

HTML (Hypertext Markup Language) is the foundation of a website. While you may see file extensions like php, cfm, asp, etc., these files will still contain HTML tags in order to display content. An HTML file is placed on a server and when requested by a user, it is read into the user’s browser and displayed as a web page.

The standards and practices for writing HTML are set by the World Wide Web Consortium (W3C) and there are multiple versions of HTML. Since this is more of an introduction to HTML, we will not go into detail about the various versions like XHTML, HTML 4.01, and HTML 2.0. We also won’t go into classifications of standards like strict, traditional, and frameset.

HTML is a very easy language to learn and super simple to write (not that I would necessarily call HTML a language so to speak). A Markup Language is defined as transporting data, not acting upon the data itself. The “code” is encapsulated in a skeleton like the example below.

<html>
   <head>
     <title> </title>
   </head>
   <body>
   </body>
</html>

HTML Skeleton

Example

As you can see, the language uses words contained inside <>, known as tags or elements. You also might notice that every tag is almost duplicated, but the second tag has a / before it. These are referred to as opening and closing tags and are required by most HTML elements. The important tags here are <html>, <head>, <body>. The <html> simply tells the browser, “Hey, this is html code.” While the <head> tells the browser specific things about the document, it does not display anything on the web page. Finally, anything inside of the <body></body> tags will display in the web page. We will go into more detail about the <head> and <body> later.

References

Attributes

HTML element attributes infinitely add to the power of your content. They permit you to customize each element or groups of elements. For this tutorial to remain simple, we will not cover the majority of attributes because they are quite numerous. A full list can be found on w3.org’s list of Attributes. We will only cover the 5 most common attributes that the vast majority of HTML elements allow. All attributes should be written in lowercase to be compatible with future versions of xhtml/html.

Common HTML Attributes

  • id – gives each element a unique identifier to be selected with CSS or JavaScript
  • name – gives each element the ability to have a special name or a “group” identifier to be selected with CSS or JavaScript
  • class- assigns an element to a class to be selected with CSS or JavaScript
  • style – assigns CSS styles to the element
  • title – gives a cool hover feature that displays text over an element
Example

<p id=”p1Id” name=”example” class=”pFirstClass” style=”color:#900;” title=”I am a title”>
Hover over me to see the title
</p>

Result

Hover over me to see the title

We now have an element that we can select individually by its id attribute. Don’t use the same id for multiple elements (id’s are made to be unique). We also added a name attribute, which can be used like an id or like a group to help with handling things in forms like radio buttons. Our paragraph now has a class that we can use to reference it in our CSS, which we will learn in the CSS category tutorials. Then, we embedding a style attribute in our tag. Finally, we have the cool but not so frequently acknowledged title tag.

Now that you know a basic overview of the HTML attributes, you are well on your way to being able to understand and write quality HTML documents.

References

Head Tag

The head tag in HTML is the way to tell the browser a few things before it starts rendering the page. You can put your CSS, JavaScript, Meta information, and more in this tag. Like I said earlier, the head tag will not actually display any content on the page itself. However, you can place content between the <title> </title> tags that will show content in the page tab in the browser. If you look on the tab now you can see that I have put content in the title tag.

Example
<html>
    <head>
        <title>HTML Head Tag</title>
    </head>
    <body>
    </body>
</html>

Boom! You just set a page title. Never forget to set the page title! It helps users who have multiple tabs open to understand what your tab is all about. It also is the displayed text in the search results. So, if you want people to consider clicking your link in the search results, you must have a title tag. How many links do you click on without a title tag?

Meta Tags

Aside from the title in the head tag, HTML pages have the ability to use Meta tags. While not explicit to the user, search engines crawl through these Meta tags to help display the best information possible for the user. Quite a few Meta tags exist, but only a few are commonly used:

  • <meta name=”description” content=” A description about your HTML page goes here”/>
  • <meta name=”keywords” content=” Keywords, about, your, content, goes here”/> (Notice the commas to separate keywords.)
  • <meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />

Now, I said at the top of this page that you can embed CSS and JavaScript in the head tags (not in the title tags), but we will get to those in their separate tutorial categories. Well, that pretty much concludes foundation of the head tag.

References

Headings

Arguably the most powerful element in the HTML arsenal, is the various HTML heading tags. Not to be confused with the head tag, heading tags are organized in a hierarchy where the lowest number is the more important tag, which is generally demonstrated by font sizes and margins. A heading tag is written with an opening <h1> and a closing </h1> with content in between the opening and closing tag.

You might have noticed I have said headings, but have only referred to one. Well, there are actually h1-h6 headings. Let’s see how the tags show up in a browser.

Example
<html>
    <head>
        <title>HTML Head Tag - Tutorial and Reference</title>
    </head>
    <body>
        <h1> I am very very important </h1>
        <h2> I am very important </h2>
        <h3> I am important </h3>
        <h4> I am kind of important </h4>
        <h5> I am somewhere below important </h5>
        <h6> I am near the importance and size of a paragraph tag </h6>
    </body>
</html>
Result

I am very very important

I am very important

I am important

I am kind of important

I am somewhere below important
I am near the importance and size of a paragraph tag

The vast majority of web sites will stop after the <h4> tags because they are virtually useless. One practical rule is to use the h1 tag once and only once to signify the most important content. Try to make sure your value of your content is truly portrayed correctly by using the right heading tag. While evaluating your web page, search engines give extra weight to the heading tags based on the importance of each tag. It makes a lot of sense, right? When writing a paper, you title(s) or headings will be a shortened and accurate representation of the content following the title.

Another important rule is to stack your headings in an appropriate order. You should never have an h3 directly following an h1. Why? Well, you just defeated the purpose of the h2 tag. You shouldn’t want to have a hole in your hierarchy. Also, visually impaired users that read with a screen reader cannot see the tag following the “hole”. Always structure your tags to have the next larger tag before it. Of course, you can have an h2 tag with a paragraph following it and then placing a h3 tag. You just have to be certain that your tags follow the hierarchy with no gaps.

Browsers already have a default style for each one of the headings. I have superimposed styling on each one, but typically, you will see that the majority of these headings have a proportional margin and font size. Also, they are considered block elements, which means they will take up a whole “line” in your document forcing the following content to be positioned below them. However, you can always modify them using CSS, but we’ll get to that later.

References

Paragraph Tag

The HTML paragraph tag is the most often used because the majority of content on a web will be in this tag. The paragraph tag is very similar to your expectations of a paragraph when writing a paper. It separates itself from the other paragraphs to form a well-organized document. Much like the other tags it has an opening tag, <p>, and a closing tag, </p>. There really is not too much else to say about the standard paragraph tag, so let’s go to an example. From now on, unless otherwise told, the following tags will be in the body tag as well as an HTML skeleton.

Paragraph Tag in Action

Example
<p> I am a paragraph. </p>
<p> I am another paragraph. </p>
Result

I am a paragraph.

I am another paragraph.

As you can see, the paragraph tags have their own default margins and font size already set by the browser by default. Another important point here is that our paragraph tags are not on the same line. They are block elements, which means you do not need to worry about overcrowded text. While you can still write content without using paragraph tags, it is considered to be great practice to attempt to place all of the text inside the paragraph tags or heading tags. You might notice that some website wrap them in a div tag, but really you add more meaning to the browser by placing the text in a paragraph tag.

References