What is HTML?
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages
HTML Tip: Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML
tags.
W3Schools use lowercase tags because the World Wide Web Consortium (W3C) recommends
lowercase in HTML 4, and demands lowercase tags in XHTML.
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.
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 Comments
<!-- This is a comment -->
Note: There is an exclamation point after the opening bracket, but not before the closing bracket.
Even if <br> works in all browsers, writing <br /> instead is more future proof.
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!
Abbreviations and acronyms
The title attribute is used to show the spelled-out version when holding the mouse pointer over
the acronym or abbreviation.
<abbr title="World Health Organization">WHO</abbr>
<acronym title="as soon as possible">ASAP</acronym>
If your browser supports bi-directional override (bdo), the next line will be written from the right
to the left (rtl):
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
Deleted and inserted text
browsers will strikethrough deleted text and underline inserted text.
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
HTML Links - The name Attribute
<a href="#tips">Visit the Useful Tips Section</a>
<a name="tips">Useful Tips Section</a>
Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
Note: Spaces between words should be replaced by %20 to ensure that the browser will display
the text properly.
<a href="mailto:[email protected]?Subject=Hello%20again">
Send Mail</a>
<a href="mailto:[email protected]?
[email protected]&[email protected]&subject=Summer
%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">Send mail!</a>
Tip: It is a good practice to specify both the height and width attributes for an image. If these
attributes are set, the space required for the image is reserved when the page is loaded. However,
without these attributes, the browser does not know the size of the image. The effect will be that the
page layout will change during loading (while the images load).
IMAGE MAP:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
</map>
HTML Lists
unordered list
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Ordered List
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
