Vocal Assist

HTML ELEMENTS

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash as shown below with few tags −

START TAG	CONTENT	END TAG
<p>	This is a paragraph content.	</p>
<h1>	This is a heading content.	</h1>
<br>	This is a breaking content.
<div>	This is a division content.	</div>

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There are some HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br /> elements. These are known as void elements.

HTML documents consists of a tree of these elements and they specify how HTML documents should be built, and what kind of content should be placed in what part of an HTML document.

HTML Tag vs. Element

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.

For example, <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.

Some Attributes: -

Bold Text

Anything that appears within <b>...</b> element, is displayed in bold.

Italic Text

Anything that appears within <i>...</i> element is displayed in italicized

Underlined Text

Anything that appears within <u>...</u> element, is displayed with underline

Strike Text

Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text

Monospaced Font

The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width.

Superscript Text

The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters.

Subscript Text

The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters.

Inserted Text

Anything that appears within <ins>...</ins> element is displayed as inserted text.

Deleted Text

Anything that appears within <del>...</del> element, is displayed as deleted text.

Larger Text

The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it.

Smaller Text

The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it.

Grouping Content

The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.

For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special set of style rules.

EXAMPLE

<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
	
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">HOME</a> | 
         <a href = "/about/contact_us.htm">CONTACT</a> | 
         <a href = "/about/index.htm">ABOUT</a>
      </div>

      <div id = "content" align = "left" >
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
	
</html>

The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element.

<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag Example</title>
   </head>
	
   <body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
	
</html>

HTML Elements