HTML Basic Tags and Elements

An HTML element usually consists of a start tag and end tag, with the content inserted in between or as an attribute:

 Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.

<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

This will produce following result:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Paragraph Tag

The HTML <p> element defines a paragraph: The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example:

Note: Browsers automatically add some white space (a margin) before and after a paragraph.

<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

This will produce following result:

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

Do Not Forget the End Tag

Some HTML elements will display correctly, even if you forget the end tag.

Use Lowercase Tags

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.

Line Break Tag

Whenever you use the <br /> or <br> or <br/> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

<!DOCTYPE html>
<html>
<head>
<title>Line Break  Example</title>
</head>
<body>
<p>Hello<br />
You are beautiful code.<br />
Thanks<br />
w3clan</p>
</body>
</html>

 

This will produce following result:

Hello
You are beautiful code.
Thanks
w3clan

Horizontal Lines

Horizontal lines are used to visually break up sections of a document. The <hr> tag creates a straight line in the document.

<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one</p>
<hr />
<p>This is paragraph two</p>
</body>
</html>

Preserve Formatting

Sometimes you may need your text to follow the exact format of how it is written in the HTML document. In those cases, you can use the preformatted tag <pre>.

<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
Text in a pre element
displayed in a fixed-width
front and back, and it preserves
both      spaces and
line breaks.
</pre>
</body>
</html>

Let's move on to chapter 3 for more advance terms.


Loading ...

Related Results :

  1. HTML Basic Tags and Elements
Note :
  • Related Posts are generally User Blog posts.
  • or Other tutorials from other networks of w3clan.com.
  • Any registered user can create related posts based on search term tags.

About the Author