In the previous articles of the HTML Web Page Coding Series, the basic structure of an HTML document and the basic formatting codes used in HTML were discussed. This article will explore the advanced HTML tags that can be used to give a more professional look to your HTML documents.
slide 1 of 3
In the latest article we have seen how anchor tags can be used to link text and images to another document by creating a single hypertext-related link using the <a> tag (anchor tag).
In an HTML document, anchor tags are also used to create page sections that serve as a bookmark within a document. Such anchor tags take the readers to a particular section in a document. These anchor tags are referred to as named anchor tags since the HTML code includes user-created HTML names created within the document.
Anywhere in a document, you can specify a named anchor using the following HTML code:
Via the above code, a user can link to the specified section in a web page either from the same document or from another document:
To link to a specified section from the same document the following code is used:
<a href="#section">Link to section</a>
To link to a specified section within a document from another document, a normal link needs to be specified followed by a section:
<a href="../misc/page.html#section">Link to section in document</a>
Page sections are also used to create internal hyperlinks within a document. These codes in fact are often used to create a “Table of Contents" within a document which lends a professional look to documents along with ease of navigation. Such internal hyperlinks enable the user to move from one location to another within the same document.
slide 2 of 3
In an HTML document, images are defined with the <img> tag, whereas the src attribute is used to identify the source from where the image will be displayed.
The src attribute can either point to the URL of the image to be displayed on the HTML document or otherwise give an indication of the filename of the image if it is stored locally on the server.
When uploading images, we can also use the alt attribute to define the image with an "alternate text" that is pre-defined by the author.
<img src="boat.gif" alt="Big Boat">
The alt attribute is useful to describe the image that is displayed on the HTML document. The alt attribute is extremely useful for those users who use text-only browsers and it is generally recommended that the alt attribute is always included when uploading images.
slide 3 of 3
An unordered list is a list of items where the listed items are marked with bullets. The HTML code to create an unordered list starts with the <ul> tag, whereas list items starts with the <li> tag:
In an ordered list, the items listed are marked with numbers. The code for an ordered list starts with the <ol> tag, whereas list items starts with the <li> tag:
A definition list is used to create a list of terms and their respective definitions. To create a definition list the <dl> tag is used. This is then followed with a definition-list term tag, <dt> and its corresponding definition-list definition tag, <dd>.
<dt>Definition-List Term 1</dt>
<dd>Defintion-List Definition 1</dd>
<dt> Definition-List Term 2</dt>
<dd> Defintion-List Definition 2</dd>
In the next installment of the HTML Web Page Coding Series we will cover how to create HTML forms in your HTML document.
This series will guide users through a number of articles that explain basic HTML web page coding starting from the basic elements of an HTML document to advanced HTML coding that includes how to insert a table and build forms in a web page with HTML code.