Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs and line breaks.
Basic HTML Tags

 

Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6> defines
the smallest.

HTML automatically adds an extra blank line before and after a heading. A useful heading attribute is
align.
<h5 align=”left”>I can align headings </h5>
<h5 align=”center”>This is a centered heading </h5>
<h5 align=”right”>This is a heading aligned to the right </h5>
Paragraphs
Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text. You can use the align
attribute with a paragraph tag as well.
<p align=”left”>This is a paragraph</p>
<p align=”center”>this is another paragraph</p>
Important: You must indicate paragraphs with <p> elements. A browser ignores any
indentations or blank lines in the source text. Without <p> elements, the document becomes
one large paragraph. HTML automatically adds an extra blank line before and after a paragraph.
Line Breaks
The <br> tag is used when you want to start a new line, but don’t want to start a new paragraph. The
<br> tag forces a line break wherever you place it. It is similar to single spacing in a document.
This Code 
<p>This <br> is a para<br> graph with
line breaks</p>

Would Display
This
is a para
graph with line breaks
The <br> tag has no closing tag.
Horizontal Rule
The <hr> element is used for horizontal rules that act as dividers between sections, like this:
The horizontal rule does not have a closing tag. It takes attributes such as align and width. For
instance:
This Code

<hr width=”50%” align=”center”>Would Display


Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment can be placed
anywhere in the document and the browser will ignore everything inside the brackets. You can use
comments to write notes to yourself, or write a helpful message to someone looking at your source
code.
This Code
<p> This html comment would <!– This
is a comment –> be displayed like
this.</p>

Would Display
This HTML comment would be displayed like
this.
Notice you don’t see the text between the tags <!– and –>. If you look at the source code, you
would see the comment. To view the source code for this page, in your browser window, select View
and then select Source.
Note: You need an exclamation point after the opening bracket <!– but not before the closing
bracket –>.
HTML automatically adds an extra blank line before and after some elements, like before and after a
paragraph, and before and after a heading. If you want to insert blank lines into your document, use
the <br> tag.
Try It Out!
Open your text editor and type the following text:

Save the page as mypage2.html. Open the file in your Internet browser.
Other HTML Tags
As mentioned before, there are logical styles that describe what the text should be and physical styles
which actually provide physical formatting. It is recommended to use the logical tags and use style
sheets to style the text in those tags.
Logical Tags 

 

Physical Tags

 
Character tags like <strong> and <em> produce the same physical display as <b> and <i> but are more
uniformly supported across different browsers.
Some Examples:
The following paragraph uses the <blockquote> tag. In the previous sentence, the blockquote tag is
enclosed in the <samp> Sample tag.
We the people of the United States, in order to form a more perfect Union, establish Justice,
insure domestic Tranquility, provide for the common defense, promote the general Welfare, and
secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this
Constitution for the United States of America.
Although most browsers render blockquoted text by indenting it, that’s not specifically what it’s
designed to do. It’s conceivable that some future browser may render blockquoted text in some other
way. However, for the time being, it is perfectly safe to indent blocks of text with the <blockquote>.
This Code
<abbr title=”World Wide Web”>WWW</abbr> Would Display WWW
When you hold your mouse pointer over the WWW, text in the title attribute will appear in.

Share This:

Leave a Reply

Your email address will not be published. Required fields are marked *