HTML Tutorial Part-5: HTML Paragraph and HTML Text Formatting

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>

he <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.

HTML Text Formatting:

This text is bold

This text is big

This text is italic

This is computer output

This 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 tags (look at the bottom of this page for a complete reference).
Remark     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
<big>	Defines big text
<em>	Defines emphasized text
<i>	Defines italic text
<small>	Defines small text
<strong>	Defines strong 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
<tt>	Defines teletype text
<var>	Defines a variable
<pre>	Defines preformatted text

HTML Citations, Quotations, and Definition Tags

Tag	Description
<abbr>	Defines an abbreviation
<acronym>	Defines an acronym
<address>	Defines contact information for the author/owner of a document
<bdo>	Defines the text direction
<blockquote>	Defines a long quotation
<q>	Defines a short quotation
<cite>	Defines a citation
<dfn>	Defines a definition term

[Read More...]

HTML Tutorial Part-4

HTML Headings

Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
<h1>HTML Headings H1</h1>
<h2>HTML Headings H2</h2>
<h3>HTML Headings H3</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:

<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:
<!-- This is a comment -->

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.

[Read More...]

HTML Attributes Reference:

A complete list of legal attributes for each HTML element is listed in our:
DTD: indicates in which HTML 4.01 / XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset

Tag	Description	DTD
<!--...-->	Defines a comment	STF
<!DOCTYPE>	Defines the document type	STF
<a>	Defines an anchor	STF
<abbr>	Defines an abbreviation	STF
<acronym>	Defines an acronym	STF
<address>	Defines contact information for the author/owner of a document	STF
<applet>	Deprecated. Defines an embedded applet	TF
<area />	Defines an area inside an image-map	STF
<b>	Defines bold text	STF
<base />	Specifies the base URL/target for all relative URLs in a document	STF
<basefont />	Deprecated. Specifies a default color, size, or font for all the text in a document	TF
<bdo>	Overrides the current text direction	STF
<big>	Defines big text	STF
<blockquote>	Defines a long quotation	STF
<body>	Defines the document's body	STF
<br />	Defines a single line break	STF
<button>	Defines a clickable button	STF
<caption>	Defines a table caption	STF
<center>	Deprecated. Defines centered text	TF
<cite>	Defines a citation	STF
<code>	Defines a piece of computer code	STF
<col />	Defines attribute values for one or more columns in a table	STF
<colgroup>	Specifies a group of one or more columns in a table for formatting	STF
<dd>	Defines a description of an item in a definition list	STF
<del>	Defines text that has been deleted from a document	STF
<dfn>	Defines a definition term	STF
<dir>	Deprecated. Defines a directory list	TF
<div>	Defines a section in a document	STF
<dl>	Defines a definition list	STF
<dt>	Defines a term (an item) in a definition list	STF
<em>	Defines emphasized text	STF
<fieldset>	Groups related elements in a form	STF
<font>	Deprecated. Defines font, color, and size for text	TF
<form>	Defines an HTML form for user input	STF
<frame />	Defines a window (a frame) in a frameset	F
<frameset>	Defines a set of frames	F
<h1> to <h6>	Defines HTML headings	STF
<head>	Defines information about the document	STF
<hr />	Defines a horizontal line	STF
<html>	Defines the root of an HTML document	STF
<i>	Defines italic text	STF
<iframe>	Defines an inline frame	TF
<img />	Defines an image	STF
<input />	Defines an input control	STF
<ins>	Defines text that has been inserted into a document	STF
<kbd>	Defines keyboard input	STF
<label>	Defines a label for an <input> element	STF
<legend>	Defines a caption for a <fieldset> element	STF
<li>	Defines a list item	STF
<link />	Defines the relationship between a document and an external resource	STF
<map>	Defines a client-side image-map	STF
<menu>	Deprecated. Defines a menu list	TF
<meta />	Defines metadata about an HTML document	STF
<noframes>	Defines an alternate content for users that do not support frames	TF
<noscript>	Defines an alternate content for users that do not support client-side scripts	STF
<object>	Defines an embedded object	STF
<ol>	Defines an ordered list	STF
<optgroup>	Defines a group of related options in a drop-down list	STF
<option>	Defines an option in a drop-down list	STF
<p>	Defines a paragraph	STF
<param />	Defines a parameter for an object	STF
<pre>	Defines preformatted text	STF
<q>	Defines a short quotation	STF
<s>	Deprecated. Defines strikethrough text	TF
<samp>	Defines sample output from a computer program	STF
<script>	Defines a client-side script	STF
<select>	Defines a drop-down list	STF
<small>	Defines smaller text	STF
<span>	Defines a section in a document	STF
<strike>	Deprecated. Defines strikethrough text	TF
<strong>	Defines strong text	STF
<style>	Defines style information for a document	STF
<sub>	Defines subscripted text	STF
<sup>	Defines superscripted text	STF
<table>	Defines a table	STF
<tbody>	Groups the body content in a table	STF
<td>	Defines a cell in a table	STF
<textarea>	Defines a multiline input control (text area)	STF
<tfoot>	Groups the footer content in a table	STF
<th>	Defines a header cell in a table	STF
<thead>	Groups the header content in a table	STF
<title>	Defines a title for the document	STF
<tr>	Defines a row in a table	STF
<tt>	Defines teletype text	STF
<u>	Deprecated. Defines underlined text	TF
<ul>	Defines an unordered list	STF
<var>	Defines a variable	STF
<xmp>	Deprecated. Defines preformatted text

Tag	Description	DTD
Basic
<!DOCTYPE>	Defines the document type	STF
<html>	Defines an HTML document	STF
<body>	Defines the document's body	STF
<h1> to <h6>	Defines HTML headings	STF
<p>	Defines a paragraph	STF
<br />	Inserts a single line break	STF
<hr />	Defines a horizontal line	STF
<!--...-->	Defines a comment	STF
Formatting
<acronym>	Defines an acronym	STF
<abbr>	Defines an abbreviation	STF
<address>	Defines contact information for the author/owner of a document	STF
<b>	Defines bold text	STF
<bdo>	Overrides the current text direction	STF
<big>	Defines big text	STF
<blockquote>	Defines a long quotation	STF
<center>	Deprecated. Defines centered text	TF
<cite>	Defines a citation	STF
<code>	Defines a piece of computer code	STF
<del>	Defines text that has been deleted from a document	STF
<dfn>	Defines a definition term	STF
<em>	Defines emphasized text	STF
<font>	Deprecated. Defines font, color, and size for text	TF
<i>	Defines italic text	STF
<ins>	Defines text that has been inserted into a document	STF
<kbd>	Defines keyboard input	STF
<pre>	Defines preformatted text	STF
<q>	Defines a short quotation	STF
<s>	Deprecated. Defines strikethrough text	TF
<samp>	Defines sample output from a computer program	STF
<small>	Defines smaller text	STF
<strike>	Deprecated. Defines strikethrough text	TF
<strong>	Defines strong text	STF
<sub>	Defines subscripted text	STF
<sup>	Defines superscripted text	STF
<tt>	Defines teletype text	STF
<u>	Deprecated. Defines underlined text	TF
<var>	Defines a variable	STF
<xmp>	Deprecated. Defines preformatted text
Forms
<form>	Defines an HTML form for user input	STF
<input />	Defines an input control	STF
<textarea>	Defines a multiline input control (text area)	STF
<button>	Defines a clickable button	STF
<select>	Defines a drop-down list	STF
<optgroup>	Defines a group of related options in a drop-down list	STF
<option>	Defines an option in a drop-down list	STF
<label>	Defines a label for an <input> element	STF
<fieldset>	Groups related elements in a form	STF
<legend>	Defines a caption for a <fieldset> element	STF
Frames
<frame />	Defines a window (a frame) in a frameset	F
<frameset>	Defines a set of frames	F
<noframes>	Defines an alternate content for users that do not support frames	TF
<iframe>	Defines an inline frame	TF
Images
<img />	Defines an image	STF
<map>	Defines an image-map	STF
<area />	Defines an area inside an image-map	STF
Links
<a>	Defines an anchor	STF
<link />	Defines the relationship between a document and an external resource	STF
Lists
<ul>	Defines an unordered list	STF
<ol>	Defines an ordered list	STF
<li>	Defines a list item	STF
<dir>	Deprecated. Defines a directory list	TF
<dl>	Defines a definition list	STF
<dt>	Defines an item in a definition list	STF
<dd>	Defines a description of an item in a definition list	STF
<menu>	Deprecated. Defines a menu list	TF
Tables
<table>	Defines a table	STF
<caption>	Defines a table caption	STF
<th>	Defines a header cell in a table	STF
<tr>	Defines a row in a table	STF
<td>	Defines a cell in a table	STF
<thead>	Groups the header content in a table	STF
<tbody>	Groups the body content in a table	STF
<tfoot>	Groups the footer content in a table	STF
<col />	Defines attribute values for one or more columns in a table	STF
<colgroup>	Defines a group of columns in a table for formatting	STF
Styles
<style>	Defines style information for a document	STF
<div>	Defines a section in a document	STF
<span>	Defines a section in a document	STF
Meta Info
<head>	Defines information about the document	STF
<title>	Defines the document title	STF
<meta>	Defines metadata about an HTML document	STF
<base />	Specifies the base URL/target for all relative URLs in a document	STF
<basefont />	Deprecated. Specifies a default color, size, or font for all the text in a document	TF
Programming
<script>	Defines a client-side script	STF
<noscript>	Defines an alternate content for users that do not support client-side scripts	STF
<applet>	Deprecated. Defines an embedded applet	TF
<object>	Defines an embedded object	STF
<param />	Defines a parameter for an object	STF

[Read More...]

HTML Tutorial Part-3

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:
<a href="http://www.webtutorial2.blogspot.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.

[Read More...]

HTML Tutorial Part-2

Editing HTML

HTML can be written and edited using many different editors like Dreamweaver and Visual Studio.
However, in this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe using a plain text editor is the best way to learn HTML.

Use Your Test Web For Learning

We suggest you experiment with everything you learn by editing your web files with a text editor (like Notepad).
Note: If your test web contains HTML markup tags you have not learned, don't panic. You will learn all about it in the next chapters.

HTM or .HTML File Extension?

When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links

HTML links are defined with the <a> tag.
<a href="http://webtutorial2.blogspot.com/">This is a link</a>

HTML Images

HTML images are defined with the <img> tag.
<img src="webtutorial2.jpg" width="104" height="142" alt="webtutorial" />

HTML Elements

An HTML element is everything from the start tag to the end tag:
Start tag *     Element content     End tag *
<p>     This is a paragraph     </p>
<a href="default.htm">     This is a link     </a>
<br />          

* The start tag is often called the opening tag. The end tag is often called the closing tag.

HTML Element Syntax

    An HTML element starts with a start tag / opening tag
    An HTML element ends with an end tag / closing tag
    The element content is everything between the start and the end tag
    Some HTML elements have empty content
    Empty elements are closed in the start tag
    Most HTML elements can have attributes

Tip: You will learn about attributes in the next chapter of this tutorial.

Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements).
HTML documents consist of nested HTML elements.
HTML Document Example:
<!DOCTYPE html>
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>
The example above contains 3 HTML elements.
1. The <p> element.
2. The <body> element.
3. The <html> element.

Don't Forget the End Tag

Some HTML elements might display correctly even if you forget the end tag:
p>This is a paragraph
<p>This is a paragraph
The example above works in most browsers, because the closing tag is considered optional.
Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the end tag .

Empty HTML Elements

HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).

HTML Tip: Use Lowercase Tags

HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.
we use lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML.

[Read More...]