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.google.com">This is a link</a>
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.
Tip:
In some rare situations, when the attribute value itself contains
quotes, it is necessary to use single quotes: name='John "ShotGun"
Nelson'HTML Tip: 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 can be used on any HTML element:| Attribute | Description |
|---|---|
| class | Specifies one or more classnames for an element (refers to a class in a style sheet) |
| id | Specifies a unique id for an element |
| style | Specifies an inline CSS style for an element |
| title | 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>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
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>
<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:
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, 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 Tag Reference
You will learn more about HTML tags and attributes in the| Tag | Description |
|---|---|
| <html> | Defines an HTML document |
| <body> | Defines the document's body |
| <h1> to <h6> | Defines HTML headings |
| <hr> | Defines a horizontal line |
| <!--> | Defines a comment |
HTML Paragraphs
Paragraphs are defined with the <p> tag.Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is another paragraph</p>
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
<p>This is another paragraph
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>
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.
(The example demonstrates some HTML formatting problems)
HTML Tag Reference
W3Schools' tag reference contains additional information about HTML elements and their attributes.| Tag | Description |
|---|---|
| <p> | Defines a paragraph |
| <br> | Inserts a single line break |
HTML Text Formatting
This text is bold
This text is italic
This is subscript and superscript
This text is italic
This is computer outputThis is subscript and superscript
HTML Formatting Tags
HTML uses tags like <b> and <i> for formatting output, like bold or italic text.These HTML tags are called formatting tag
 |
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! |
|---|
HTML Text Formatting Tags
| Tag | Description |
|---|---|
| <b> | Defines bold text |
| <em> | Defines emphasized text |
| <i> | Defines a part of text in an alternate voice or mood |
| <small> | Defines smaller text |
| <strong> | Defines important text |
| <sub> | Defines subscripted text |
| <sup> | Defines superscripted text |
| <ins> | Defines inserted text |
| <del> | Defines deleted text |
HTML "Computer Output" Tags
| Tag | Description |
|---|---|
| <code> | Defines computer code text |
| <kbd> | Defines keyboard text |
| <samp> | Defines sample computer code |
| <var> | Defines a variable |
| <pre> | Defines preformatted text |
HTML Citations, Quotations, and Definition Tags
| Tag | Description | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <abbr> | Defines an abbreviation or acronym | |||||||||||||||||
| <address> | Defines contact information for the author/owner of a document | |||||||||||||||||
| <bdo> | Defines the text direction | |||||||||||||||||
| <blockquote> | Defines a section that is quoted from another source | |||||||||||||||||
| <q> | Defines an inline (short) quotation | |||||||||||||||||
| <cite> | Defines the title of a work | |||||||||||||||||
| <dfn> | Defines a definition term |
