×

☰

htmltags

WcCoder

HTML Tags And CSS Use/Value

Many HTML tags are given here, where and why they are used is also explained.

CSS and its Use/Value are also given here, after reading which you can learn to use it.

HTML tags help complete the structure of your HTML.

Tag Use

<!-- -->

This tag is used to apply comments in an HTML document.

<!DOCTYPE>

This tag is used to specify the version of HTML.

<html>

The entire HTML page.

<head>

The head, or prologue, of the HTML page.

<body>

All the other content in the HTMl page.

<title>

The title of the page.

<h1>

First-level heading.

<h2>

Second-level heading.

<h3>

Third-level heading.

<h4>

Fourth-level heading.

<h5>

Fifth-level heading.

<h6>

Sixth-level heading.

<acronym>

It defines an acronym for a word.

<p>

A paragraph.

<ol>

An ordered (numbered) list. Each of the items in the list begins with <p>...</p>.

type:

Specifies the numbering scheme to use in the list. Replaced with CSS in HTML5.

start:

Specifies at which number to start the list.

<ul>

An unordered (bulleted or otherwise marked) list. Each of the items in the list begins with < li >.

type:

Specifies the bulleting scheme to use in the list. Replaced with CSS in HTML5.

<li>

Individual list items in ordered, unordered, menu or directory lists.

type:

Resets the numbering scheme from the current list element. Applies only to <ul> and <ol> lists. Replaced with CSS in HTML5.

value:

Resets the numbering in the middle of an ordered ( <ol> ) list.

<dl>

A glossary or definition list. Items in the list consist of pairs of elements: a term and its definition.

<dt>

The term part of an item in a glossary list.

<dd>

The definition part of an item in a glossary list.
CSS Property Use/Values
list-style-type Used to specify the bullet style or numbering style for the list. Valid values are disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none.
list-style-image The image to use in place of the bullets for a list. The value should be the URL of the image.
list-style-position Defines the alignment of lines of text in list items after the first. Values are inside and outside.
list-style Enables you to set multiple list properties at once: list style type, list style position, and the URL of the bullet style.

<em>

This tag indicates that the characters are emphasized in some way. Most browsers display <em> in italics. For example:

<strong>

With this tag, the characters are more strongly emphasize that with <em>-usually in boldface. Consider the following:

<code>

 This tag indicates that the inside is a code sample and displays it in a fixed-width font such as Courier. For example:
<p><code>#include "trans.h"</code></p>

<samp>

 This tag indicates sample text and is generally presented in a fixed-width font, like <code>. An example of its usage follows:
<p> The URL for that page is <samp>http://www.wccoder.com/ </samp></p>

<kbd>

 This tag indicates text that's intended to be typed by a user. It's also presented in a fixed-width font. Consider the following:
<p>Type the following command: <kbd> find . -name "prune" -print </kbd></p>

<var>

 This tag indicates the name of a variable, or some entity to be replaced with an actual value. Often it's displayed as italic or underline and is used as follows:
<p><code>chown</code> <var>Your name for the_file</var></p>

<dfn>

 This tag indicates a definition. <dfn> is used to highlight a word (usually in italics) that will be defined or has just been defined, as in the following example.
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<dfn>logical styles</dfn></p>

<cite>

 This tag indicates the cited title of a work-usually displayed in italics. it is written as in the following:<p>"use the Force, Luke" <cite>"Star Wars"</cite> (1976)</p>

<abbr>

 This tag indicates the abbreviation of a word, as in the following:
<p>Use the standard two-letter state abbreviation (such as <abbr>CA</abbr> for California)</p>

<b>

 Text that is usually bold.

<i>

 Text that is usually displayed as italic.

<u>

 Text that is usually displayed as underline.

<small>

 Text that displays as small print.

<sub>

 Subscript.

<sup>

 Superscript.

<address>

A signature for each web page; typically occurs near the bottom of each document and contains contact or copyright information.

<b>

Bold text.

<blockquote>

A quotation longer than a few words.

cite

The URL that was the source for the quotation.

<cite>

A citation.

<code>

A code sample.

<dfn>

A definition, or a term about to be defined.

<em>

Emphasized text.

<i>

Italic text.

<kbd>

Text to be typed in by the user.

<pre>

Preformatted text; all spaces, tabs, and returns are retained. Text is printed a monospaced font.

<q>

An inline quotation.

cite

The URL that was the source for the quotation.

<samp>

Sample text.

<small>

Text in a smaller font than the text around it.

<strong>

Strongly emphasized text.

<sub>

Subscript text.

<sup>

Superscript text.

<u>

Underlined text

<var>

A variable name.

<span>

A generic tag used to apply styles to a particular bit of text.

<hr/>

A horizontal rule line of the given position the text. There's no closing tag in HTML for <hr>; for XHTML, add a space and forward slash ( /) at the end of the tag and its attributes (for example, <hr size="4px" width="79%" />) .

size

The thickness of the rule, in pixels (Obsolete in HTML5).

width

The width of the rule, either in exact pixels or as a percentage of page width (for example, 50%). (obsolete in HTML5.)

align

The alignment of the rule on the page. Possible values are left, right, and center. (obsolete in HTML5.)

noshade

Dispalys the rule without three-dimensinal shading. (obsolete in HTML5.)

<br>

A line break; starts the next character on the next line but doesn't create a new paragraph or list item. There's no closing tag in HTML for <br>; for XHTML, add a space and forward ( /) at the end of the tag and its attributes (for example, <br clear="left" />.
CSS Property Use/Values
text-decoration Specifies which sort of decoration should be applied to the text. The values are underline, overline, line-through, blink, and none.
font-style Specifies whether text should be italicized. The three values are ,normal, italic and oblique.
font-weight Specifies the degree to which text should be emboldened. Options are normal, bold, bolder, lighter, and 100 to 900.
font-family Enables you to specify the font used for text. You can choose families such as serif, sans serif, and monospace, or specific font names. You can also specify more than one font or font family.
font-variant Sets the font variant to normal, small-caps.
font-size Enables you to specify the font size in any unit supported by CSS.

<table>

Indicates a table.

<caption>

Creates a caption for the table (optional).

<colgroup>

Encloses one or more columns in a group.

<col>

Used to define the attributes of a columns in a table.

<thead>

Creates a row group that defines the heding of the table. A table can contain only one heading.

<tfoot>

Creates a row group that defines the footer of the table. A table can contain only one footer. Must be specified before the body of the table is rendered.

<tbody>

Defines one are more row groups to include in the body of the table. Tables can cantain more than one body section.

<tr>...</tr>

Defines a table row, which can contain heading and data cells.

<th>

Defines a table cell that contains a heading. Heading cells are usually indicated by boldface and centered both horizontally and vertically within the cell.

<td>

Defines a table cell containing data. Table cells are in a regular font and are left-aligned and vertically centered within the cell.
Table Attribute Applied to Element Use
border <table> Indicates whether the table will be drawn with a border. The default is no border. If border has a value, it's the width of the shaded border around the table. This attribute is nonconforming in HTML5.
span <colgroup> Defines the number of columns that a cell spans. Must be an integer greater than 0.
<col> Defines the number of columns that a cell spans. Must be an integer greter than 0.
colspan <th> or <td> Indicates the number of cells to the right of this one that this cell will span.
rowspan <th> or <td> Indicates the number of cells below this one that this cell will span.

<form>

Creates an HTML form. You can have multiple forms within a document, but you cannot nest the forms.
Form Attribute Use
action An attribute of <form> that indicates the server-side script (with a URL path) that processes the form data.
enctype An attribute of the <form> tag that specifies how form data is encoded before being to the server.
method An attribute of the <form> that defines how the form data is sent to the server. Possible values are get and post.

<input>

A <form> element that creates controls for the user input.

<button>

Creates a button that can have HTML content.

<textarea>

A text-entry field with multiple lines.

<select></select>

A menu or scrolling list of items. Individual items are indicated by the <option> tag.

<option>

Individual items within a <select> element.

<progress>

Progress bar to measure the progress of a task.

<meter>

Gauge to show a scalar measurement within a known range.

<label>

Creates a label associated with a form control.

<fieldset>

Organizes form controls into groups.

<legend>

Displays a caption for a <fieldset> element.

type:

An attribute of <input> that indicates the type of form control. Possible values are shown in the following list:

text Creates a single-line text entry field.
color Creates a color entry field.
date Creates a date picker.
datetime Creates a date and time picker.
datetime-local Creates a lical date and time picker.
email Creates an email entry field.
month Creates a month picker.
number Creates a number picker.
range Creates a range slider.
search Creates a search entry field.
tel Creates a telephone entry field.
url Creates a URL entry field.
week Creates a week picker.
password Creates a single-line text entry field that masks user input.
submit Creates a Submit button that sends the form data to a server-side script.
reset Creates a Reset button that resets all form controls to their initial values.
checkbox Creates a check box.
radio Creates a radio button.
image Creates a button from an image.
button Creates a pushbutton.The three types are Submit, Reset,and Push, with no default.
hidden Creates a hidden form control that cannot be seen by the user.
file Creates a file upload control that enables users to select a file with the form data to upload to the server.

<audio>

Embeds audio files into web pages for native playback by the browser.

<embed>

Embed objects into web pages.

<object>

Embeds objects into web pages.

<param>

Specifies parameters to be passed to the embedded object. Used in the object element.

<source>

Points to a source audio or video file to be played by an <audio> or <video> tag.

<video>

Embeds an audio file into a web page for native playback.

<script>

It declares the JavaScript within an HTML document.

<optgroup>

It is used to group related options in a drop-down list.

<a>

This tag creates an anchor link.

<link>

It helps link to external resources.

<base>

It defines the base URL for all relative links on the page.
Text and Image Alignment
baseline Aligns the bottom of the image with the baseline of its parent. This is the default.
top Aligns the top of the imags with the top of the line (which may be the top of the text or the top of another image).
middle Aligns the center of the image with the middle of lowercase letters in the parent element.
bottom Aligns the bottom of the image with the bottom of the line.
text-top Aligns the top of the image with the top of the parent element's font (whereas top aligns the image with the top most item in the line).
text-bottom Aligns the bottom of the image with the bottom of the parent element's font.
sub Aligns the element as if it were a subscript.
sup Aligns the element as if it were a superscript.
length Raises or lowers the element by the specified length. Negative values are allowed.
% Raises or lowers the element in a percent of the line-height property. Negative values are allowed.
left Break to an empty left margin, for left aligned images
right Break to an empty right margin, for right aligned images.
both Break to a line clear to both margins.
Attribute Applied to Element Use
border <table> Indicates whether the table will be drawn with a border. The default is no border. If border has a value, it's the width of the shaded border around the table. This attribute is nonconforming in HTML5.
span <colgroup> Defines the number of columns that a cell spans. Must be an integer greater than 0.
<col> Defines the number of columns that a cell spans. Must be an integer greter than 0.
colspan <th> or <td> Indicates the number of cells to the right of this one that this cell will span.
rowspan <th> or <td> Indicates the number of cells below this one that this cell will span.
Tag Description
<header> Represents the header of an HTML document. Excluded from the page outline.
<footer> Represents the footer of an HTML document. Excluded from a page outline.
<nav> A section containing navigation elements. Included in the page outline.
<section> Represents a section of a page. Included in the page outline.
<article> An article. Included in the page outline.
<aside> An aside, sidebar, or other supplemental content. Not included in the page outline.
<video> Attribute Description
src The URL for the video to be played.
height The height of the element.
width The width of the element.
controls Boolean attribute that indicates that the browser should supply its own controls for the video. Default is to leave out the controls.
autoplay Boolean attribute that indicates that the video should play immediately when the page loads.
loop Boolean attribute. If present, the video will loop when it reaches the end, replaying until user manually stops the video from playing.
preload Boolean attribute. If present, the browser will begin downloading the video as soon as the page loads to get it ready to play. Innored if autoplay is present
poster Image to show prior to starting playback.
muted Boolean attribute. If present, the video will have no sound.
_
<object> Attributes Description
data The URL for the data that will be presented in the <object> element. Flash uses a <param> to specify this instead.
form Enables the element to be associated with a specific form.
height The height of the element.
width The width of the element.
name A name for the element.
type The MIME type of the content to be displayed in the object.
usemap The URL of a client-side image map to be applied to the object.
_
<embed> Attributes of Internet Explorer
<embed> Attribute Description
height The height of the element.
src The URL of the multimedia file.
type The MIME type of the multimedia file indicated by the src attribute.
width The width of the element.
_
<embed> Attribute Description
allowfullscreen Specifies whether the embedded element can occupy the full screen. Values are true and false.
allowscriptaccess Determines whether the embedded object can communicate with external scripts or link to external pages. Values are always, samedomain, and never.
flashvars Used to pass configuration parameters to the Flash player. only used if the embedded object is Flash.
plug-inspage The URL of the page where you can download the plug-in used to view this object.
_
<audio> Attribute Description
src The URL of the audio to be played.
controls Boolean attribute that indicates that the browser should supply its own controls for the file. The default is to leave out the controls.
autoplay Boolean attribute that indicates that the audio should play immediately when the page loads.
loop Boolean attribute. If present the audio will loop when it reaches the end, replaying until the user manually stops the file from playing.
mediagroup Group media elements with an implicit media controller.
muted Boolean attribute. If present, the audio file will be silent.
Boolean attribute. If present, the browser will begin downloading the video as soon as the page loads to get it ready to play. Ignored if autoplay is persent.
Tag Use
<header> Represents the header of an HTML document. Excluded from the page outline.
<footer> Represents the footer of an HTML document. Excluded from a page outline.
<nav> A section containing navigation elements. Included in the page outline.
<section> Represents a section of a page. Included in the page outline.
<article> An article. Included in the page outline.
<aside> An aside, sidebar, or other supplemental content. Not included in the page outline.
Tag Use
<audio> Embeds audio files into web pages for native playback by the browser.
<embed> Embeds objects into web pages.
<object> Embeds objects into web pages.
<param> Specifies parameters to be passed to the embedded object. Used in the object. element.
<source> Points to a source audio video file to be played by an <audio> or <video> tag.
<video> Embeda an audio file into a web page for native playback.