Istuti Chowdhari A Complete Guide to Understanding Tags & Elements In HTML
Table of Contents
Why Learn HTML?
Webpages can be created easily, even if a person has no knowledge of elements in HTML. There are many editors like Frontpage, DreamWeaver, etc, which are available in the market. These editors may be used to design web pages. The HTML coding is generated automatically by these editors and the user need not care about it.
However, in order to design web pages that are above average and compatible with most browsers, a thorough understanding of HTML tags is required.
If you have a good understanding of the HTML elements then you may apply even those tags that the editor does not support and create effects that can not be created by the editor. The HTML code can be written using any text editor, including Notepad. Once you have typed in the code, all you need to do is save the file with a .htm or .html extension.
Some Elements In HTML
An HTML element helps us to define the proper behavior of the document and its parts. It also helps us to know the structure of the document. These elements are the commands of HTML which are executed by the browser. There are many elements in HTML such as paragraph element, bold element, and the horizontal rule element.
1) HTML Tag
HTML documents should be contained within the <HTML> and </HTML> tags. An HTML document always starts with the <HTML> and ends with </HTML>. HTML elements are used to declare that the document is an HTML document. An HTML document is always identified with the <HTML> tag at the top of the code. HTML documents contain two parts- the head section and the body section.
2) HEAD Element
The <HEAD> is usually the first element contained inside the <HTML> element. While it is also an element container that encapsulates other HTML elements, these elements are not directly displayed by a web browser.
HTML Head Element Code:
<html>
<head>
</head>
</html>
3) TITLE Element
The <title> element adds a title to a web page. Web page titles are displayed at the top of any browser window or at the top of browser tabs. They are probably the first thing seen by web surfers as pages are loaded and web page bookmarks are saved using the web page’s title.
HTML Title Element Code:
<html>
<head>
<title> My web page!</title>
</head>
</html>
4) BODY Element
The element that encapsulates all the visual elements (paragraphs, pictures, tables, etc) of a web page is the <body> element. We will be looking at each of these elements in greater detail as the tutorial progresses, but for now, it’s only important to understand that the body element is one of the tour critical web page elements and it contains all of the page’s viewable content.
HTML Body Element Code:
<html>
<head>
<title>My web page!</title>
</head>
<body>
<p>Once upon a time…</p>
</body>
</html>
Text Formatting tags in HTML
5) Headings Tag In Html
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.
Output:
6) Paragraph Element In HTML
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.
Output:
7) Bold Element
When we want to show a particular text in bold, we use a bold element. It starts with <b> and ends with </b>. The text inside these two tags will appear in bold when displayed on the browser.
Example:
<b>Text Comes here…</b>
Result:
Text Comes here…
8) Italic Tag In HTML
When we want to show a particular text in italics, we use italic elements. It starts with <i> and ends with </i>. The text inside these two tags will be italicized when displayed on the browser.
Example:
<i>Text Comes here…</i>
Result:
Text Comes here…
Read this also: Guide to Using Tags And Create HTML Webpage
9) Underline Element
When we want to underline a particular piece of text, we use the underline element. It starts with <u> and ends with </u>. The text inside these two tags will be underlined when displayed on the browser.
Example:
<u>Text Comes here…</u>
Result:
Text Comes here…
10) Subscript Element In HTML
When we want to underline a particular text as a subscript, we use the subscript element. It starts with <sub> and ends with </sub>. This element lowers text and makes it smaller when displayed on the browser.
Example:
R<sub>3</sub>
Result:
R3
11) Superscript Element
When we want to show a particular text as superscript, we use a superscript element. It starts with <sup> and ends with </sup>. This element lifts text and makes it smaller when displayed on the browser.
Example:
X<sup>2</sup>
Result:
X2
12) Strike Through Element
When we want to strike a line through a particular piece of text, we use a strike-through element. It starts with <strike> and ends with </strike>. This element strikes a line through text placed inside these two tags when displayed on the browser.
Example:
Home <strike>Paze</strike> Page
Result:
Home Paze Page
13) Breaking Lines Tag In HTML
Line breaks are used to end lines and it also takes us back to the left margin. It is used when we write an address or short pieces of information. It splits text into two different lines. It is like a carriage return in the typewriter. <BR> tag is used for a line break. <BR> is an empty tag because it has no end tag.
Example:
<p>
Contact Us at:<br>
Neeraj Publications<br> 1507, Nai Sarak, Delhi – 110006 <br>
91-11-3285501 <br>
</p>
Output:
14) Horizontal Rule
The horizontal line is simply a line, which is used to divide different sections of a web page. It is used to enhance the look of the document. <HR> tag is used for horizontal lines, it is a block-level element.
Attributes of the <HR> tag
Size: This attribute specifies the thickness of the horizontal rule. The thickness is specified in pixels. The default thickness of the horizontal rule is 2 pixels, which is also the smallest thickness that can be specified for the horizontal rule.
Example:
<hr size=”4″>
Width: This attribute specifies the horizontal width of the rule. The width may be specified in either pixels or as a percentage of the screen width. In the latter case, the horizontal rule will resize automatically, if the screen width changes.
Example:
<hr size=”4″ width=”60%”>
<hr size=”4″ width=”400″>
Align: This attribute can have one of the three values – “Left”, “Right”, or “Center” to align the horizontal rule to the left, right, or center. By default horizontal rules are center-aligned.
Example:
<hr size=”4″ width=”400″ align=”right”>
No shade: This attribute specifies that the horizontal line must be drawn without the three-dimensional shading.
<hr size=”4″ width=”400″ align=”right” Noshade>
Example:
<html>
<head>
<title>My web page!</title>
</head>
<body>
<h1 align=”center”> Brilliants </h1>
<hr size=”11″ width=”450″ align=”center” Noshade>
<hr size=”9″ width=”350″ align=”center” Noshade>
<hr size=”7″ width=”250″ align=”center” Noshade>
<hr size=”5″ width=”150″ align=”center” Noshade>
<hr size=”3″ width=”50″ align=”center” Noshade>
<h2 align=”center”> Quick Reference Books </h2>
</body>
</html>
Output:
15) Comment Element In HTML
HTML uses the <!-And –> tags to place comments in the document. Any text placed between these two tags does not show up on the browser. Comments are placed only for internal documentation of the document.
Example:
<!- This is a valid Comment In HTML –>
0