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<sub>
subscript</sub> and <sup>superscript</sup></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!
|
<!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>
