PROWAREtech

articles » current » html » tutorial » page-2

Hyper-text Markup Language: Tutorial

A tutorial of HTML5 - Page 2 - HTML Tags.

HTML Tags

<address> is used not for postal addresses but for email and website addresses. It is rarely used.

<cite> can still be used to cite some work but it cannot be used to mark up a person's name any more.

<h1>, <h2>, <h3>, <h4>, <h5> and <h6> all denote headers with <h1> being the largest and the one commonly used to identify the main topic of a document.

<blockquote> is used to quote some text as a block (meaning it puts a line break before and after it) and <q> is used to quote some text inline, as part of a block of text.

<code> is for programming code inline with the a block of text while <pre> is used for a block of programming code.

<ol> is used for an ordered list with each bullet being defined by a <li> element.

<ul> is used for an unordered list with each bullet being defined by a <li> element. With CSS, it is also commonly used to create a menu.

<a> is very common and used to link to other documents. It has two attributes, href, which determines where the document is to link to, and target which specifies the frame to target (_blank is a common value).

<img /> is used for placing an image in the document. It has a src (source) attribute used to point to the link that contains the JPEG, GIF or PNG image. It is a void element.

<br /> and <hr /> are line break and horizontal rule respectively. Both are void elements.

<del> and <ins> are for ~~deleted~~ and inserted text, respectively. This is to mark up document changes.

<u> is to underline text.

<form> is used to create a form for collecting data from the user. It has several attributes like action which is the address that the form will submit to and method which will be either method="get" or method="post". Typically, a post changes the state of the server like when adding items to a shopping cart and a get does not change the state of the server like when submitting a search.

<fieldset> defines a related set of fields in a <form>.

<legend> labels the <fieldset>.

<input> defines input fields of the <form>. These input fields can be text boxes, password fields, file upload fields, check boxes, and various buttons. Attributes include spellcheck=true/false, autocomplete=on/off, which can turn off the autocomplete-form feature in most browsers, readonly, which makes a field read-only, size, which determines how big the field is, maxlength, which sets the maximum number of characters a field can have, and multiple, which specifies that a file upload control allow multiple files to be uploaded.

<label> defines labels for the <input> fields.

<select> creates a selection input field of a <form>. The multiple attribute here specifies that it allow multiple selection and the size field specifies that it be a dropdown when set to 1 or a listbox when set to greater than 1.

<optgroup> groups options of a <select> input field.

<option> creates options for the user to select in a <select> element.

<textarea> creates a multi-line input field of a <form>.

The <table> tag is used to show tabular data. Use the <caption>, <colgroup> <col>, <thead>, <tr>, <th> <tbody> and <td> tags to manipulate the tabular data.

<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8" />
	<title>Example Table</title>
	<style type="text/css">
		td {
			padding: 5px 5px 5px 5px;
		}
	</style>
</head>
<body>
	<table border="1">
		<caption>Table Caption</caption>
		<colgroup>
			<col />
			<col />
			<col />
		</colgroup>
		<thead>
			<tr>
				<th>Book</th>
				<th>Description</th>
				<th>Price</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>ASP.NET MVC 1.0</td>
				<td>Learn the first version of ASP.NET MVC from the pros.</td>
				<td>$49.99</td>
			</tr>
			<tr>
				<td>ASP.NET MVC 2.0</td>
				<td>Learn the second version of ASP.NET MVC from the pros.</td>
				<td>$45.99</td>
			</tr>
			<tr>
				<td>ASP.NET MVC 3.0</td>
				<td>Learn the third version of ASP.NET from the pros.</td>
				<td>$48.99</td>
			</tr>
		 </tbody>
	</table>
</body>
</html>

<<<[Page 2 of 8]>>>

Comment