You are on page 1of 16

HTML (Hypertext Markup Language) definition

Hypertext Markup Language, a standardized system for tagging text files to achieve font,
color, graphic, and hyperlink effects on World Wide Web pages.
HTML (Hypertext Markup Language) is the set of markup symbols or codes inserted in a file
intended for display on a World Wide Web browser page. The markup tells the Web browser
how to display a Web page's words and images for the user. Each individual markup code is
referred to as an element (but many people also refer to it as a tag). Some elements come in
pairs that indicate when some display effect is to begin and when it is to end.
Headings
Permitted Context: %Body.Content
Content Model: %text
HTML defines six levels of headings. A heading element implies all the font changes,
paragraph breaks before and after, and any white space necessary to render the heading.
The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most
important) level and H6 the least. For example:
<H1>This is a top level heading</H1> Here is some text.
<H2>Second level heading</H2> Here is some more text.
Use the DIV element together with header elements when you want to make the hierarchical
structure of a document explicit. This is needed as header elements themselves only contain
the text of the header, and do not imply any structural division of documents into sections.
Header elements have the same content model as paragraphs, that is text and character
level markup, such as character emphasis, inline images, form fields and math.
Headers play a related role to lists in structuring documents, and it is common to number
headers or to include a graphic that acts like a bullet in lists. HTML 3.0 recognizes this with
attributes that assist with numbering headers and allow authors to specify a custom graphic.
The numbering style is controlled by the style sheet, e.g.
1. The style sheet specifies whether headers are numbered, and which style is used to
render the current sequence number, e.g. arabic, upper alpha, lower alpha, upper
roman, lower roman or a numbering scheme appropriate to the current language.
2. Whether the parent numbering is inherited, e.g. "5.1.d" where 5 is the current
sequence number for H1 headers, 1 is the number for H2 headers and 4 for H3
headers.
The seqnum and skip attributes can be used to override the default treatment of header
sequence numbers, and provide for a continuity with numbered lists.
The dingbat or src attribute may be used to specify a bullet-like graphic to be placed
adjacent to the header. The positioning of this graphic is controlled by the style sheet. The

graphic is for decorative purposes only and silently ignored on non-graphical HTML user
agents.

1
Word Wrapping
User agents are free to wrap lines at whitespace characters so as to ensure lines fit within
the current window size. Use the &nbsp; entity for the non-breaking space character, when
you want to make sure that a line isn't broken! Alternatively, use the NOWRAP attribute to
disable word wrapping and the <BR> element to force line breaks where desired.
Netscape includes two tags: <NOBR>...</NOBR>, and <WBR>. The former turns off
wordwrapping between the start and end NOBR tag, while WBR is for the rare case when
you want to specify where to break the line if needed. Should HTML 3.0 provide an
equivalent mechanism to WBR, (either a tag or an entity)?
Permitted Attributes
ID
An SGML identifier used as the target for hypertext links or for naming particular
elements in associated style sheets. Identifiers are NAME tokens and must be unique
within the scope of the current document.
LANG
This is one of the ISO standard language abbreviations, e.g. "en.uk" for the variation
of English spoken in the United Kingdom. It can be used by parsers to select language
specific choices for quotation marks, ligatures and hypenation rules etc. The
language attribute is composed from the two letter language code from ISO 639,
optionally followed by a period and a two letter country code from ISO 3166.
CLASS
This a space separated list of SGML NAME tokens and is used to subclass tag names.
For instance, <H2 CLASS=Section> defines a level 2 header that acts as a section
header. By convention, the class names are interpreted hierarchically, with the most
general class on the left and the most specific on the right, where classes are
separated by a period. The CLASS attribute is most commonly used to attach a
different style to some element, but it is recommended that where practical class
names should be picked on the basis of the element's semantics, as this will permit
other uses, such as restricting search through documents by matching on element
class names. The conventions for choosing class names are outside the scope of this
specification.
ALIGN Headings are usually rendered flush left. The ALIGN attribute can be used to explicitly
specify the horizontal alignment:align=left
The heading is rendered flush left (the default).

align=center
The heading is centered.
align=right
The heading is rendered flush right.
align=justify

Heading lines are justified where practical, otherwise this gives the same effect as
the default align=left setting.
For example:
<h1 align=center>This is a centered heading</H1>
Here is some text. <H2 align=right>and this is a flush right
heading</H2> Here is some more text.
CLEAR
This attribute is common to all block-like elements. When text flows around a figure
or table in the margin, you sometimes want to start an element like a header,
paragraph or list below the figure rather than alongside it. The CLEAR attribute allows
you to move down unconditionally:
clear=left
move down until left margin is clear
clear=right
move down until right margin is clear
clear=all
move down until both margins are clear
Alternatively, you can decide to place the element alongside the figure just so long as
there is enough room. The minimum width needed is specified as:
clear="40 en"
free

move down until there is at least 40 en units

clear="100 pixels"
move down until there is at least 100 pixels free
The style sheet (or browser defaults) may provide default minimum widths for each
class of block-like elements.

SEQNUM A sequence number is associated with each level of header from the top level (H1)
to the bottom level (H6). This attribute is used to set the sequence number associated with
the header level of the current element to a given number, e.g. SEQNUM=10. Normally, the
sequence number is initialized to 1 at the beginning of the document and incremented after
each header element. It is reset to 1 by any header element of a higher level, e.g. an H1
header resets the sequence numbers for H2 to H6. The style of header numbering is
controlled by the style sheet.
3
SKIP
Increments the sequence number before rendering the element. It is used when
headers have been left out of the sequence. For instance, SKIP=3 advances the
sequence number past 3 omitted items.
DINGBAT
Specifies an iconic image to appear preceding the header. The icon is specified as an
entity name. A list of standard icon entity names for HTML 3.0 is given in an appendix
of this specification.
SRC
Specifies an image to appear preceding the header. The image is specified as a URI.
This attribute may appear together with the MD attribute.
MD
Specifies a message digest or cryptographic checksum for the associated graphic
specified by the SRC attribute. It is used when you want to be sure that a linked
object is indeed the same one that the author intended, and hasn't been modified in
any way. For instance, MD="md5:jV2OfH+nnXHU8bnkPAad/mSQlTDZ", which
specifies an MD5 checksum encoded as a base64 character string. The MD attribute
is generally allowed for all elements which support URI based links.

NOWRAP
The NOWRAP attribute is used when you don't want the browser to automatically
wrap lines. You can then explicitly specify line breaks in headings using the BR
element. For example:
<h1 nowrap>This heading has wordwrap turned off<br>
and the BR element is used for explicit line breaks</H1>
html lines
Making dividing lines to section off areas of your pages is easy to do. This page gives
examples of code above the line created by that code.

basic lines
The basic tags, and their modifications, are given below. In each case, the new code is
shown in red, and the line beneath it is an example of what that code does.
<hr>
<hr noshade>

line thickness
The default line thickness is 2; you can see that in the examples above. Below are some
different values for the line thickness.
4
<hr size=1>
<hr noshade size=1>
<hr size=3>
<hr noshade size=3>
<hr noshade size=7>
<hr size=7>

line width
The "width" tag refers to the left to right size. Default is 100% across the screen, meaning
that if you don't specify the width, as in the examples above, the line spans the entire
screen. The examples below show the results of specifying the width. On most browsers, the
line will be centered.
<hr noshade size=1 width=33>
<hr noshade size=1 width=300>
You can also specify by percent. The percent refers to the percent of the browser screen size;
50% means half the width of the screen, no matter what size it is. The size of the lines below
will change if you make your browsers screen wider or narrower; notice, though, that the
examples above do not change.
<hr noshade size=1 width="33%">
<hr noshade size=4 width="50%">
<hr size=4 width="50%">

alignment
The "align" tag works on most browsers, and will put the line on either the right or left side
of the screen.

<hr noshade size=4 width="50%" align=left>


<hr noshade size=4 width="50%" align=right>
<hr size=8 width="50%" align=left>
<hr size=8 width="50%" align=right>

comparing widths - percent vs. numbers


Notice the difference between these two examples. In one, the width is given as a number
value: 200, which is roughly a third of a full-sized, 15 inch monitor. The second is given as
percent: 33%. If you adjust your browser window to make it narrower or wider, you can see
that the first example does not change, whereas the second does change.

<hr size=3 width=200 align=left>

<hr size=3 width="33%" align=left>

color, shape
As far as I know, there is no way to specify the color of an HR line. Furthermore, the color of
these lines on your screen now depends on the browser, the operating system, and the
monitor you're using. On my Macintosh's 256 color screen, using Netscape 3, the unshaded
lines are black, and the edges are squared. On my Compaq's million color monitor, using
Netscape 3 for Windows 95, the unshaded lines are drab olive or grey, and the edges are
rounded if the size is over 5.
However, if you use a background image, and you specify a contrasting background color,
the lines will (with certain setups, but not all) take on the color you have specified in the
background. (I've seen this work on a Japanese Windows 95 version of Netscape 3 on a 16bit color Compaq monitor.)

back to
HTML Tips Articles Index

HTML Paragraphs
Previous
Next Chapter

HTML documents are divided into paragraphs.

Bill Pellowe
e-mail: billp@gol.com

HTML Paragraphs
The HTML <p> element defines a paragraph.
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Try it yourself
Browsers automatically add an empty line before and after a paragraph.
6
HTML Display
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 spaces, and any number of new lines, count as only one space.
Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains
a lot of spaces
in the source
code,
but the
browser
ignores it.
</p>
Try it Yourself

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
Try it yourself
The example above will work in most browsers, but do not rely on it.
Forgetting the end tag can produce unexpected results or errors.
7
Stricter versions of HTML, like XHTML, do not allow you to skip the end tag.
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> 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>
Try it yourself
The <br> element is an empty HTML element. It has no end tag.

The Poem Problem


Example
<p>This poem will display as one line:</p>
<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>
Try it Yourself

The HTML <pre> Element


The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
8
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
Try it Yourself

Test Yourself with Exercises!


Exercise 1 Exercise 2 Exercise 3

Exercise 4

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

<pre>

Defines pre-formatted text

HTML Comments
Comment is a piece of code which is ignored by any web browser. It is a good practice to add
comments into your HTML code, especially in complex documents, to indicate sections of a
document, and any other notes to anyone looking at the code. Comments help you and
others understand your code and increases code readability.
HTML comments are placed in between <!-- ... --> tags. So any content placed with-in
<!-- ... --> tags will be treated as comment and will be completely ignored by the browser.
Example
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->

<body>
<p>Document content goes here.....</p>
</body>
</html>

This will produce following result without displaying the content given as a part of
comments:
Document content goes here.....
Valid vs Invalid Comments
Comments do not nest which means a comment can not be put inside another comment.
Second the double-dash sequence "--" may not appear inside a comment except as part of
the closing --> tag. You must also make sure that there are no spaces in the start-ofcomment string.
Example
Here given comment is a valid comment and will be wiped off by the browser.
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>
But following line is not a valid comment and will be displayed by the browser. This is
because there is a space between the left angle bracket and the exclamation mark.
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment Example</title>
</head>
<body>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p>
</body>
</html>This will produce following result:
< !-- This is not a valid comment --> Document content goes here.....
Multiline CommentsSo far we have seen single line comments, but HTML supports
multi-line comments as well.
You can comment multiple lines by the special beginning tag <!-- and ending tag --> placed
before the first line and end of the last line as shown in the given example below.
10

Example
<!DOCTYPE html><html>
<head>
<title>Multiline Comments</title>
</head>
<body>
<!-This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here.....</p>
</body>
</html>
This will produce following result:
Document content goes here.....Conditional CommentsConditional comments only work in
Internet Explorer (IE) on Windows but they are ignored by other browsers. They are
supported from Explorer 5 onwards, and you can use them to give conditional instructions to
different versions of IE.
Example
<!DOCTYPE html><html>
<head>
<title>Conditional Comments</title>
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
</head>
<body>
<p>Document content goes here.....</p>
</body>
</html>
You will come across a situation where you will need to apply a different style sheet based
on different versions of Internet Explorer, in such situation conditional comments will be
helpful.
Using Comment Tag
There are few browsers that support <comment> tag to comment a part of HTML
codeExample<!DOCTYPE html><html><head><title>Using Comment Tag</title>
</head>
<body>
<p>This is <comment>not</comment> Internet Explorer.</p>
</body>
</html>
11

If you are using IE then it will produce following result:This is Internet Explorer.But if you are
not using IE, then it will produce following result:This is Internet Explorer.
Commenting Script Code
Though you will learn Javascript with HTML, in a separate tutorial, but here you must make a
note that if you are using Java Script or VB Script in your HTML code then it is recommended
to put that script code inside proper HTML comments so that old browsers can work properly.
Example
<!DOCTYPE html><html>
<head>
<title>Commenting Script Code</title>
<script>
<!-document.write("Hello World!")
//-->
</script>
</head>
<body>
<p>Hello , World!</p>
</body>
</html>
This will produce following result:
Hello World!
Hello , World!
Commenting Style Sheets
Though you will learn using style sheets with HTML in a separate tutorial, but here you must
make a note that if you are using Casecading Style Sheet (CSS) in your HTML code then it is
recommended to put that style sheet code inside proper HTML comments so that old
browsers can work properly.
Example
<!DOCTYPE html><html>
<head>
<title>Commenting Style Sheets</title>
<style>
<!-.example {
border:1px solid #4a7d49;
12

HTML Element Reference

Tag
<!--...-->
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>

Description
Defines a comment
Defines the document type
Defines a hyperlink
Defines an abbreviation or an acronym
Not supported in HTML5. Use <abbr> instead.
Defines an acronym
Defines contact information for the author/owner of a document
Not supported in HTML5. Use <embed> or <object> instead.
Defines an embedded applet
Defines an area inside an image-map
Defines an article
Defines content aside from the page content
Defines sound content
Defines bold text
Specifies the base URL/target for all relative URLs in a document
Not supported in HTML5. Use CSS instead.
Specifies a default color, size, and font for all text in a document
Isolates a part of text that might be formatted in a different direction
from other text outside it
Overrides the current text direction
Not supported in HTML5. Use CSS instead.
Defines big text
Defines a section that is quoted from another source
Defines the document's body
Defines a single line break
Defines a clickable button
Used to draw graphics, on the fly, via scripting (usually JavaScript)
Defines a table caption
Not supported in HTML5. Use CSS instead.
Defines centered text
Defines the title of a work
Defines a piece of computer code
Specifies column properties for each column within a <colgroup>
element
Specifies a group of one or more columns in a table for formatting
Specifies a list of pre-defined options for input controls
Defines a description/value of a term in a description list
Defines text that has been deleted from a document
Defines additional details that the user can view or hide
Represents the defining instance of a term
Defines a dialog box or window
Not supported in HTML5. Use <ul> instead.

<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> to <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<keygen>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem>
<meta>
<meter>

Defines a directory list


Defines a section in a document
Defines a description list
Defines a term/name in a description list
Defines emphasized text
Defines a container for an external (non-HTML) application
Groups related elements in a form
Defines a caption for a <figure> element
Specifies self-contained content
Not supported in HTML5. Use CSS instead.
Defines font, color, and size for text
Defines a footer for a document or section
Defines an HTML form for user input
Not supported in HTML5.
Defines a window (a frame) in a frameset
Not supported in HTML5.
Defines a set of frames
Defines HTML headings
Defines information about the document
Defines a header for a document or section
Defines a thematic change in the content
Defines the root of an HTML document
Defines a part of text in an alternate voice or mood
Defines an inline frame
Defines an image
Defines an input control
Defines a text that has been inserted into a document
Defines keyboard input
Defines a key-pair generator field (for forms)
Defines a label for an <input> element
Defines a caption for a <fieldset> element
Defines a list item
Defines the relationship between a document and an external resource
(most used to link to style sheets)
Specifies the main content of a document
Defines a client-side image-map
Defines marked/highlighted text
Defines a list/menu of commands
Defines a command/menu item that the user can invoke from a popup
menu
Defines metadata about an HTML document
Defines a scalar measurement within a known range (a gauge)

<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>

Defines navigation links


Not supported in HTML5.
Defines an alternate content for users that do not support frames
Defines an alternate content for users that do not support client-side
scripts
Defines an embedded object
Defines an ordered list
Defines a group of related options in a drop-down list
Defines an option in a drop-down list
Defines the result of a calculation
Defines a paragraph
Defines a parameter for an object
Defines preformatted text
Represents the progress of a task
Defines a short quotation
Defines what to show in browsers that do not support ruby annotations
Defines an explanation/pronunciation of characters (for East Asian
typography)
Defines a ruby annotation (for East Asian typography)
Defines text that is no longer correct
Defines sample output from a computer program
Defines a client-side script
Defines a section in a document
Defines a drop-down list
Defines smaller text
Defines multiple media resources for media elements (<video> and
<audio>)
Defines a section in a document
Not supported in HTML5. Use <del> or <s> instead.
Defines strikethrough text
Defines important text
Defines style information for a document
Defines subscripted text
Defines a visible heading for a <details> element
Defines superscripted text
Defines a table
Groups the body content in a table
Defines a cell in a table
Defines a multiline input control (text area)
Groups the footer content in a table
Defines a header cell in a table
Groups the header content in a table

<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

Defines a date/time
Defines a title for the document
Defines a row in a table
Defines text tracks for media elements (<video> and <audio>)
Not supported in HTML5. Use CSS instead.
Defines teletype text
Defines text that should be stylistically different from normal text
Defines an unordered list
Defines a variable
Defines a video or movie
Defines a possible line-break

You might also like