Table of Contents
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.
Code :
<p>This <br> is a para<br> graph with line breaks</p>
Output :
This
is a para
graph with line breaks
Note : 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:
Code :
<hr width=”50%” align=”center”>
The horizontal rule does not have a closing tag. It takes attributes such as align and width. For instance:
Output :
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.
Code :
<p> This html comment would <!– This is a comment –> be displayed like this.</p>
Output :
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:
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1 align=”center”>My First Webpage</h1>
<p>Welcome to my first web page. I am writing this page using a text editor and plain old html.</p>
<p>By learning html, I’ll be able to create web pages like a pro….<br>
which I am of course.</p>
</body>
</html>
Save the page as mypage2.html. Open the file in your Internet browser. To view how the page should look, visit this web page: https://freeallnotes.com
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
| Tag | Description |
| <abbr> | Defines an abbreviation |
| <acronym> | Defines an acronym |
| <address> | Defines an address element |
| <cite> | Defines a citation |
| <code> | Defines computer code text |
| <blockquote> | Defines a long quotation |
| <del> | Defines text |
| <dfn> | Defines a definition term |
| <em> | Defines emphasized text |
| <ins> | Defines inserted text |
| <kbd> | Defines keyboard text |
| <pre> | Defines preformatted text |
| <q> | Defines a short quotation |
| <samp> | Defines sample computer code |
| <strong> | Defines strong text |
| <var> | Defines a variable |
Physical Tags
| Tag | Description |
| <b> | Defines bold text |
| <big> | Defines big text |
| <i> | Defines italic text |
| <small> | Defines small text |
| <sup> | Defines superscripted text |
| <sub> | Defines subscripted text |
| <tt> | Defines teletype text |
| <u> | Deprecated. Use styles instead |
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>.
Code :
<abbr title=”World Wide Web”>WWW</abbr>
Output :
WWW
When you hold your mouse pointer over the WWW, text in the title attribute will appear in.
HTML Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in place of the actual characters themselves.
The Most Common Character Entities:
A character entity has three parts: an ampersand (&), an entity name or an entity number, and finally a semicolon (;). The & means we are beginning a special character, the ; means ending a special character and the letters in between are sort of an abbreviation for what it’s for. To display a less than sign in an HTML document we must write: < or < The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.
Note: Entities are case sensitive.
Non-breaking Space
The most common character entity in HTML is the non-breaking space . Normally HTML will truncate spaces in your text. If you add 10 spaces in your text, HTML will remove 9 of them. To add spaces to your text, use the
Code 1:
<p> This code would appear as this.</p>
Output 1 :
This code would appear as this.
Code 2 :
<p> This code would appear with three extra spaces.</p>
Output 2 :
This code would appear with three extra spaces.
To see a list of character entities, visit this page: https://freeallnotes.com
You May Like to Browers More
