HTML Attributes

HTML Attributes

HTML Attributes provide additional information about HTML elements.

We Elaborate as:

HTML Attributes

• HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like: name="value"

Attribute Example

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

Example

<a href="http://www.abc.com">This is a link</a>

We Always Quote Attribute Values

Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed. Remember: In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes: name='John "ShotGun" Nelson'

HTML Tricks and tips: Use Lowercase Attributes

Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation. Newer versions of (X) HTML will demand lowercase attributes.

HTML Attributes Reference

Below is a list of some attributes that are standard for most HTML elements:

Attribute	Value	Description
class	classname	Specifies a classname for an element
id	id	Specifies a unique id for an element
style	style_definition	Specifies an inline style for an element
title	tooltip_text	Specifies extra information about an element (displayed as a tool tip)

HTML Headings

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Note: Browsers automatically add some empty space (a margin) before and after each heading.

Headings Are Important

Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Search engines use your headings to index the structure and content of your web pages.

Since users may skim your pages by its headings, it is important to use headings to show the document structure.H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.

HTML Lines

The <hr /> tag creates a horizontal line in an HTML page.

The hr element can be used to separate content:

Example

<p>This is a paragraph</p>

<hr />

<p>This is a paragraph</p>

<hr />

<p>This is a paragraph</p>

HTML Comments

Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.

Comments are written like this:

Example

<!-- This is a comment -->

Note: There is an exclamation point after the opening bracket, but not before the closing bracket.

HTML Tip - How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did they do that?"

To find out, we will right-click in the page and select "View Source" (IE) or "View Page Source" (Firefox), or similar for other browsers. This will open a window containing the HTML code of the page.

HTML Paragraphs

HTML documents are divided into paragraphs. Paragraphs are defined with the <p> tag.

Example

<p>This is a paragraph</p>

<p>This is another paragraph</p>

Note: Browsers automatically add an empty line before and after a paragraph.

Don't Forget the End Tag

Most browsers will display HTML correctly even if you forget the end tag:

Example

<p>This is a paragraph

<p>This is another paragraph

The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors.

Note: Future version of HTML will not allow you to skip end tags.

HTML Line Breaks

Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:

Example

<p>This is<br />a para<br />graph with line breaks</p>

The <br /> element is an empty HTML element. It has no end tag.

<br> or <br />

In XHTML, XML, elements with no end tag (closing tag) are not allowed.

Even if <br> works in all browsers, writing <br /> instead works better in XHTML and XML applications.

HTML Output - Useful Tips

You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.

The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space.

EXAMPLE

<!DOCTYPE html>

<html>

<body>

<p>

    My Bonnie lies over the ocean.

    My Bonnie lies over the sea.

    My Bonnie lies over the ocean.

  

    Oh, bring back my Bonnie to me.

</p>

<p>Note that your browser ignores the layout!</p>

</body>

</html>

HTML Text Formatting

HTML Text Formatting

This text is bold

This text is big

This text is italic

This is computer output

This is _subscript and ^superscript

EXAMPLE:

<!DOCTYPE html>

<html>

<body>

<p><b>This text is bold</b></p>

<p><strong>This text is strong</strong></p>

<p><big>This text is big</big></p>

<p><i>This text is italic</i></p>

<p><em>This text is emphasized</em></p>

<p><code>This is computer output</code></p>

<p>This is_subscript and ^superscript</p>

</body>

</html>

HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.

These HTML tags are called formatting tags (look at the bottom of this page for a complete reference).

Often <strong> renders as <b>, and <em> renders as <i>. However, there is a difference in the meaning of these tags: <b> or <i> defines bold or italic text only. <strong> or <em> means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!

Preformatted text Example:

<!DOCTYPE html>

<html>

<body>

<pre>

This is

preformatted text.

It preserves      both spaces

and line breaks.

</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>

for i = 1 to 10

     print i

next i

</pre>

</body>

</html>

Computer output tags Example:

<!DOCTYPE html>

<html>

<body>

<code>Computer code</code>

<br />

<kbd>Keyboard input</kbd>

<br />

<tt>Teletype text</tt>

<br />

<samp>Sample text</samp>

<br />

<var>Computer variable</var>

<br />

<p><b>Note:</b> These tags are often used to display computer/programming code.</p>

</body>

</html>

Address Example:

<!DOCTYPE html>

<html>

<body>

<address>

Written by Mr abc<br />

<a href="mailto:us@example.org">Email us</a><br />

Address: Box 564, Disneyland<br />

Phone: +12 34 56 78

</address>

</body>

</html>

Abbreviations and acronyms Example:

<!DOCTYPE html>

<html>

<body>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>

</body>

</html>

Text direction Example:

<!DOCTYPE html>

<html>

<body>

<p>

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):

</p>

<bdo dir="rtl">

Here is some Hebrew text

</bdo>

</body>

</html>

Quotations Example:

<!DOCTYPE html>

<html>

<body>

A long quotation:

<blockquote>

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.

</blockquote>

<p><b>Note:</b> The browser inserts white space before and after a blockquote element. It also inserts margins.</p>

A short quotation:

<q>This is a short quotation</q>

<p><b>Note:</b> The browser inserts quotation marks around the short quotation.</p>

</body>

</html>

Delete and Insert Text

If you want to Deleted and inserted Text Examples

<! DOCTYPE html>

<html>

<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>

</body>

</html>