Hand Coding .websdiy



Commonly Used HTML Tags

These are some of the HTML tags that are used in almost every web page.

HTML tags for every web page

Except with some modifications.

<html>

<head>

</head>

<body>

</body></html>

The Headings

h4 - h6 are used only occasionally. However I usually code the font-size of all headings when preparing the template.

<h1></h1> - <h6></h6>

Paragraph

This tag is used in almost every web page.

<p></p>

LIne Break

Break is not used alone, but within a heading or paragraph.

<br />

<h1> Heading here <br /> Remaining heading here </h1>

<p> Some test here <br />

Remaining text here </p>

Horizontal Rule

<hr />

Image Source

Like the line break, the horizontal rule and tags in the metadata, the img is a self-closed tag. The / for close is not required in HTML5, but it is something I had been doing when coding for xHTML which was required then.

<img src="" alt="" width="" />

Anchor Hypertext Refererence

<a href="">anchor text here</a>

<a href="" target="_blank"> anchor text here</a>

Division

IDs and Classes

<div id=""> </div>

<div class=""> </div>

<span class=""></span>

Lists

Another commonly used elements; for list, for navigation and other uses which are not common.

Ordered List

<ol>

<li></li>

<li></li>

</ol>

Unordered List

<ul>

<li></li>

<li></li>

</ul>

Definition List

I use Definition List mainly for sitemaps and on sidebar. Sometimes when a list does not requred nested list or need longer expanation, I'll opt for definitaion list.

<dl>

<dt></dt>

<dd></dd>

</dl>

Commenting

<!-- Text within this tag will not be visible in your web pages -->

Unlike other tags which are how you want your web pages to look like, this tag is to comment out a text so that it will not show up in your web pages.

See my incomplete Lorem Ipsum - Lorem Ipsum Formatting