The h1 element represents a heading.
HTML defines a hierarchy of heading elements,
with h1 being the highest ranked.
The other heading elements are h2, h3,
through to h6.
Headings of the same rank breaks up content so that each topic is in its own section.
The following code uses the h1?h3 Elements.
<!DOCTYPE HTML>
<html>
<body>
<h1>This is h1.</h1>
<p>I like XML.</p>
<h2>Additional h2</h2>
<p>I like XML.</p>
<h3>More information</h3>
<p>I like XML.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h1>Basic Text Formatting</h1>
<p>The purpose of a web browser is
to read HTML documents and compose them into visible
or audible web pages. The browser does not display
the HTML tags, but uses the tags to interpret the
content of the page. HTML describes the structure
of a website semantically along with cues for
presentation, making it a markup language rather
than a programming language. </p>
<!--from ww w .ja va2s . c om-->
<h2>White Space and Flow</h2>
<p>HTML elements form the building blocks of all
websites. HTML allows images and objects to be
embedded and can be used to create interactive
forms. It provides a means to create structured
documents by denoting structural semantics for
text such as headings, paragraphs, lists, links,
quotes and other items. It can embed scripts
written in languages such as JavaScript
which affect the behavior of HTML web pages.</p>
<h2>Creating Headings</h2>
<p> Web browsers can also refer to Cascading Style
Sheets (CSS) to define the look and layout of text
and other material. The W3C, maintainer of both
the HTML and the CSS standards, encourages the
use of CSS over explicit presentational HTML.</p>
</body>
</html>
The hgroup element allows you to treat multiple header
elements as a single item without affecting the outline of your HTML document.
The following code uses the hgroup Element.
<!DOCTYPE HTML>
<html>
<body>
<hgroup>
<h1>H1</h1>
<h2>H2</h2>
</hgroup>
<h2>Additional</h2>
<h3>More information</h3>
<h1>H1</h1>
<p>This is a test.</p>
<h2>H2</h2>
This is a test.<!--from www. ja v a2 s . c o m-->
<h3>H3</h3>
</body>
</html>
The hr element represented a horizontal rule. a line across the page.
The following code uses the hr Element.
<!DOCTYPE HTML>
<html>
<body>
<p>
This is a test.<!-- w ww. j a v a 2 s .c o m-->
</p>
<hr/>
<p>This is another test.
</p>
</body>
</html>
The div element doesn't have a specific meaning.
div element creates structure.
The div element is the block equivalent of the span element.
Block element starts new line while inline element stays in the same line.
The following code uses the div Element.
<!DOCTYPE HTML>
<html>
<style>
.favorites {<!-- w ww . j ava 2 s . co m-->
background: grey;
color: white;
border: thin solid black;
padding: 0.2em;
}
</style>
</head>
<body>
<div class="favorites">
<p>This is a test.</p>
<p>This is another test.</p>
</div>
<p>This is a test.</p>
</body>
</html>
The span element has no meaning in its own right.
You would use it to apply one of the global attributes to a region of content.
The following code shows the span element used with the class attribute.
<!DOCTYPE HTML>
<html>
<style>
.myClass {<!--from w w w . ja v a2s .co m-->
border: thin solid black;
padding: 1px;
}
</style>
</head>
<body>
I like <span class="myClass">CSS</span> and
<span class="myClass">HTML</span>.
</body>
</html>
The p element represents a paragraph.
Paragraphs are blocks of text containing one or more related sentences.
The following code shows how to use the p
element to the example content.
<!DOCTYPE HTML>
<html>
<body>
<p>
I code in CSS.<!-- www .j a v a2s .c o m-->
</p>
<p>
HTML is good.
</p>
<p>
This is the third paragraph.
</p>
</body>
</html>
In pre element whitespace is not collapsed and formatting is preserved.
This can be useful when the original formatting of a section of content is significant.
The pre element can be particularly useful when you use it with the code element.
The formatting in programming languages, for example, is usually significant.
<!DOCTYPE HTML>
<html>
<head>
</head><!--from www . j av a 2 s. co m-->
<body>
<pre>
<code>
var fruits = ["XML", "HTML", "CSS", "Java"];
for (var i = 0; i < fruits.length; i++) {
document.writeln("I like " + fruits[i]);
}
</code>
</pre>
</body>
</html>
The blockquote element denotes a block content quoted from another source.
This element is similar to the q element,
but is generally applied to larger amounts of quoted content.
The cite attribute can be used
to supply a URL for the original source of the content.
The following code uses the blockquote Element.
<!DOCTYPE HTML>
<html>
<body>
<blockquote cite="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">
Cascading Style Sheets (CSS) is a style sheet language used for
describing the look and formatting of a document written in a markup language.
</blockquote>
</body>
</html>
The q element denotes content quoted from another source.
The style convention for the q element is
to surround the quoted text with quotation marks.
The following code uses the q Element.
<!DOCTYPE HTML>
<html>
<body>
<p>
<q cite="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">
The <dfn title="Cascading Style Sheets">CSS</dfn>
is a style sheet language used for describing the
look and formatting of a document written in a markup language.
</q><!-- w ww. ja va 2 s. co m-->
</p>
</body>
</html>