Hyperlink

In itself, an HTML hyperlink is one of the most useful distinctions between the internet and a standard text file. Linking is the foundation of the internet and this is the little tag that got a majority of the ball rolling. You can employ links to provide navigation to other content, which allows fantastic organization and eliminates the fear of the user becoming claustrophobic with too much content on one page. Before we go any farther, hyperlinks are often referred to as anchor tags. However, some people talk about anchor tags in their use as a table of contents where you click the link and it navigates you further down the page. Technically, it is a hyperlink that links the certain content of the same page. Finally, the last important note about hyperlinks is that they contain urls, which can be relative and absolute.

Relative and Absolute Links

Absolute links are generally used for navigation outside your website. For example, http://www.afterhoursprogramming.com/index.php is an absolute link. However let’s say I have an HTML document called index.php and it is in my root directory (www.afterhoursprogramming.com/) I can link to that same index.php file by using a link has a reference to “index.php”. That is all you would need to put in the href attribute, no http://www.afterhoursprogramming.com/ because you are in that same directory. That my friend is a relative link.

Example
<a href="http://www.afterhoursprogramming.com/"> Absolute Link</a>
<a href="/"> Relative Link</a>
Result

Absolute Link from index.php Relative Link

The href is actually an attribute of the <a> tag. Well will discuss attributes later because almost all HTML tags have attributes and there are numerous amount of them.

Now, if my index.php file moved to another folder, let’s say it moved to http://www.afterhoursprogramming.com/newFolder/. If I were to use a relative link from that index.php, I would use a reference or source of newFolder/index.php because I am still in the root folder, but I need to get to the newFolder to access the index.php.

Internal Anchor Tags

Quite often, people love to create massive pages with a table of contents. While I strongly argue against this, I will explain how to create internal page linking. Almost every HTML element has a id attribute, which is a unique identifier. All that is required to have this collection of internal anchor tags is to simply link to this element on the page. Then add a # sign plus the id of the element. While it is somewhat confusing to explain with words, it is easier to show with an example.

Example
<a href='pageName.html#sampleId'>Go to element with id of sampleId</a>
<p id='sampleId'>Some text</p>

Whenever a user clicks the top link in the example, the browser scrolls to the bottom link no matter how much content is in between the two links. So, if we wanted to link to a few lines of text, we could place a container element (like the paragraph tag) around the lines of text with a unique id that we could link to using hyperlinks. Like the example above, we can place our text in the paragraph tag with an id of sampleId and then link to it with a hyperlink pointing to #sampleId using the hyperlink’s href attribute.

References

Formatting Tags

Formatting tags can be very useful when writing HTML and are more specific than creating general CSS classes for HTML elements. Formatting tags are primarily for modifying the way text appears. We can make the text bold, in italics, or even define them as a superscript or a subscript. There are a whole bunch of these so we will just focus on a few of the most often used formatting tags. These tags are just like any other HTML element in that they have closing and starting tags.

Example
<p>
    <b>I am bold</b>
    <i>I am in italics </i>
    <sub>Last</sub>, but not <sup>least</sup>
</p>
Result

I am bold I am in italics Last, but not least

While these formatting tags don’t make any major changes, it is nice to use them to accent text to help user understand your point. Like I said, there are quite a few of these, but the vast majority are never used anywhere because custom CSS classes have taken over. Basically, try to stick to only using these four formatting tags, unless you absolutely need to use another formatting tag. Also, you should research these tags before using them as some of them are going to become extinct with HTML5.

References

Image Tag

Unlike most elements, the image tag is a specific reference in your HTML document to an image on your website. It is more like an advanced link to an image file. The HTML image tag actually retrieves the image and displays it in your web page. However, unlike most elements, the image tag requires an attribute in order to display an image. The opening and closing tags are a unique case in the sense that they are combined, <img />. The primary attribute of the img tag is src=””, where you would put the link to the image in between the quotation marks. Of course, the image tag has many other attributes, but this is the most important one you need to know to get started.

Show an Image

Example
<img src="/images/smiley2.jpg" width="200"/>
Result

Pretty cool huh? Now, you might be wondering what is this width=”200″. The width and height are both attributes of the HTML image tag. I try to only use one or the other as this permits the browser to resize the image correctly. If you used them both at the same time and they are not the proper dimensions, it will stretch or shrink the image. The src is the attribute we set to the link to our image, /images/smiley2.jpg

Important Alt attribute

The second most important attribute for an image is called the alt attribute. The alt attribute is only activated when an image fails to load. If you ever remove or lose an image from your website, the alt attribute will step up and display its value to the browser. Additionally, search engines cannot read what an image is all about, so search engines use the HTML image alt attribute to “understand” it. In conclusion, always set the alt attribute and set it to a value that tells the user about the image.

Example
<img src="/images/smiley2.jpg" alt="A smiley face I created" width="200"/>

References

Table Tag

The HTML table tag has done wonders for the internet as a whole. However, tables are often used as grids or containers, which is not the appropriate use of HTML tables. Tables are not very flexible and are primarily intended to show tabular data. The tags of a table require more opening and closing tags than the average HTML element. Let’s look at an example to see:

Example
<table>
    <tr>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
    </tr>
    <tr>
        <td>Row 2 Column 1</td> 
        <td>Row 2 Column 2</td>
    </tr>
</table>
Result
Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2

Three separate tags are involved in creating an HTML table, <table>, <tr>, and<td>. The <table> is simply the encasing of a table. To identify a new row, which must come first, you should use the <tr> tag. Inside of the table row tag, you can specify columns by using the <td> tag. Remember that you can access all of the accepted HTML attributes of every element by clicking the w3.org reference in the HTML Attributes references.

It’s worth mentioning that you must structure the table and table tags properly. All tr must be opened and closed inside the <table></table> tags. The th and td tags must be opened and closed inside the tr tags. If you do this incorrectly, you will have one messed up looking table.

Table Headers

Sometimes when creating an HTML table, you might want the top row to stand out from the rest as a heading. All you need to do is replace the HTML table column tag, <td>, with a table header tag, <th>. It is entirely possible to use these multiple times different rows to have multiple “sections” in your table. Table headers also permit you to have better control of your CSS.

Example
<table>
    <tr>
        <th>Row 1 Column 1</th>
        <th>Row 1 Column 2</th> 
    </tr>
    <tr>
        <td>Row 2 Column 1</td> 
        <td>Row 2 Column 2</td> 
    </tr>
</table>

Merging Columns

Sometimes, you might want to merge two columns to display your data correctly in a row. All we need to do is use the colspan attribute of the HTML table. Let’s merge two columns in one row.

Example
<table>
    <tr>
        <td colspan="2">Row 1 Column 1</td>
    </tr>
    <tr>
        <td>Row 2 Column 1</td> 
        <td>Row 2 Column 2</td>
    </tr>
</table>
Result
Row 1 Column 1
Row 2 Column 1 Row 2 Column 2

References

List Tags

When writing any document, lists provide quick bursts of information in the most efficient manner. HTML Lists are no different when used in an HTML document. In a browser, there are only two types of lists, ordered and unordered. Ordered lists obviously have a predictable layout such as numbers or roman numerals. The standard for ordered lists is numbers, but you can always modify that in the CSS. Unordered lists are generally small black dots that can also be changed in the CSS. Lists require two sets of tags. The encapsulating tag is <ol> for ordered lists and <ul> for unordered lists. The element inside that tag is the <li> where your content will go in between the opening and closing tags of the that li element.

HTML Ordered Lists

Example
<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
</ol>
Result
  1. List Item 1
  2. List Item 2

HTML Unordered Lists

Example
<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
</ul>
Result
  • List Item 1
  • List Item 2

Pretty easy to understand there, but what if we wanted to have another level in the list? You can create lists inside lists. You would simply just start putting <ul> with internal <li> inside the previous <li> elements. Alright, maybe that is somewhat complicated… example please!

HTML Multiple Level Lists

Example
<ul>
    <li>List Item 1 
        <ul>
            <li>List Item 1 Sub 1</li> 
            <li>List Item 1 Sub 2</li>
        </ul>
    </li>
</ul> 
Result
  • List Item 1
    • List Item 1 Sub 1
    • List Item 1 Sub 2

References