Today we’ll speak about most popular HTML tags. These are the tags that that you will find in almost any HTML template and these are the basic tags ( with the basic attributes) you should know and learn how to easily edit. Even if you have never edited HTML code, you will be able to easily make simple updates on your templates after reading this post. HTML <br> Tag Use <br> tag for a line brake. Use this tag at the end of the sentence if you need the new one to start from the new line. This tag has no end tag so it’s even easier to use. For example: The next line will start below.<br> New line. HTML Headings HTML headings are defined with the <h1> to <h6> tags. For Example: <h1>Welcome to my website</h1> HTML headings are meant to show what element on your page is the heading. Don’t use this tag to make some text bold. The headings are very important for the search engines, so use this tag attentively (it’s good to include your keywords to the headings). H1 headings should be used as main headings, followed by H2 headings and then by less important H3 headings accordingly.

HTML Paragraphs

HTML paragraphs are defined with the <p> tag. For Example <p>A new story starts below</p>.

This one is very simple, if you want the line to start from the paragraph, use <p> at the beginning of the phrase and </p> at the end.

HTML Links

HTML links are defined with the <a> tag. For Example <a href=”http://www.templatesheaven.com”>Home page</a>. The links are used in the menu to link to internal website pages and can be used anywhere on the template to link to external websites or pages. The text between >…< is the text that you website visitor will see as a link, while the the href attribute defines the link “address”.

HTML Images

HTML images are defined with the <img> tag. For Example: <img src=”templatesheaven.jpg” />. This tag shows the location of the image on your server or you can use it to show the image from some external location, for example if you want to add the logo of TemplatesHeaven on your website you should use
<img src=”http://www.templatesheaven.com/images/logo.png” />

HTML Text Formatting

<b> tag will make your text bold, for example <b>bold</b>
<i> tag will make your text italic <i>italic</i>
<strong> tag will make your text strong. Basically that’s the same bold tag but more more often used ourdays:
<strong>very strong</strong>

HTML Tables

If you need to add the table to you webpage you should use <table> tag. As any table, the HTML table is divided into rows (with the help of the <tr> tag) and the row is divided into cells accordingly (with the <td> tag). You can use text, links, images and even other tables as the content for the cell. That’s actually the way the HTML code was made long ago: the whole  page area  was divided into table cells and each one contained some layout elements accordingly. Here’s the simple sell example

<table border=”1″>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTML Lists

An option to make different types of lists in MS Word is one of the features I love most. And you can also make it in HTML code (for example when you need to list the services provided by your company) in many different ways. In our templates you may see the following types of listings: unordered list- <ul> tag, ordered list – <ol> tag, definition list- <dl> tag.

Example of unordered list:
<ul>
<li>Flash template</li>
<li>HTML template</li>
</ul>

Each item in the list should start with the <li> tag.

Example of the ordered list:
<ol>
<li>Flash template</li>
<li>HTML template</li>
</ol>

Definition list is more complicated, it uses 3 tags: <dl> to define this is the list, <dt> tag to show this is a definition and <dd> tag to show this is definition description.

<dl>
<dt>Flash template</dt>
<dd>The templates developed in Flash</dd>
<dt>HTML template</dt>
<dd>The template developed in HTML</dd>
</dl>

HTML Forms and Input

There’s no need to explain what a form is but there’s one thing we want to pay your attention to. The form in HTML is just the number of fields where you can type in the text, but that’s not the script that will send this info to your email or database. The <form> tag defines the form area. <input> tag is the field that has lots of the attributes depending on the content that should be entered to the field. For example just text info:

<form>
First name:
<input type=”text” name=”firstname” />
<br />
Last name:
<input type=”text” name=”lastname” />
</form>

HTML <textarea> tag

The <textarea> tag defines a multi-line text input control, for example it can be used as the field for the message in your contact form.
<textarea rows=”2″ cols=”20″>
Please enter your comments, we will be glad to hear your feedback.
</textarea>

HTML <div> tag

This is a more a less new tag and it doesn’t have a separate special definition like link tag for example.
The <div> tag defines a division or a section in an HTML document. If you’re just starting you won’t be able to use it properly on your own, however feel free to edit the elements inside the div section as most often they are the same that we already studied.

HTML <span> tag

same as <div> tag, the <span> tag is pretty new one. The <span> tag provides no visual change by itself but rather provides a way to add a hook to a part of a text or a part of a document. If all you need is changing several lines of text close your eyes on this tag, or if you want to apply that same “effect” to some other element, just copy the <span> tag and attributes to the place you’d like to.

HTML <select> tag

Use the <select> tag to create a drop down list with some options. For example list the locations where your offices are located for your customer to choose:

<select>
<option value=”aust”>Australia</option>
<option value=”uk”>UK</option>
<option value=”france”>France</option>
<option value=”poland”>Poland</option>
</select>

The <option> tag shows the options in the drop down lost accordingly.

This entry was posted on Monday, March 30th, 2009 at 6:16 pm and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.