Aswin Balaji

Aswin Balaji

186 Sadasivam Nagar,Madipakkam,Chennai, TN 600091
Aswin Balaji

HTML-BASIC TAGS

July 28, 2015, by Aswin Balaji, category HTML

HTML Documents

All HTML documents must start with a type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

HTML Headings

HTML headings are defined with the <h1> to <h6> tags:

Example

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links

HTML links are defined with the <a> tag:

Example

<a href=”http://www.google.com“>This is a link</a>
The link address is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.

HTML Images

HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), and size (width and height) are provided as attributes:

Example

<img src=”w3schools.jpg” alt=”W3Schools.com” width=”104″ height=”142″>

The HTML <head> Element

The HTML <head> element has nothing to do with HTML headings.
The HTML <head> element contains meta data. Meta data are not displayed.
The HTML <head> element is placed between the <html> tag and the <body> tag:

Example

<!DOCTYPE html>
<html>

<head>
<title>My First HTML</title>
<meta charset=”UTF-8″>
</head>

<body>
.
.
</boby>
</html>

The HTML <title> Element

The HTML <title> element is meta data. It defines the HTML document’s title.
The title will not be displayed in the document, but might be displayed in the browser tab.


The HTML <meta> Element

The HTML <meta> element is also meta data.
It can be used to define the character set, and other information about the HTML document.


More Meta Elements

In the chapter about HTML styles you discover more meta elements:
The HTML <style> element is used to define internal CSS style sheets.
The HTML <link> element is used to define external CSS style sheets.

HTML Styling

Every HTML element has a default style (background color is white and text color is black).
Changing the default style of an HTML element, can be done with the style attribute.
This example changes the default background color from white to lightgrey:

Example

<body style=”background-color:lightgrey”>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

HTML Fonts

The font-family property defines the font to be used for an HTML element:

Example

<h1 style=”font-family:verdana”>This is a heading</h1>
<p style=”font-family:courier”>This is a paragraph.</p>

HTML Text Size

The font-size property defines the text size to be used for an HTML element:

Example

<h1 style=”font-size:300%”>This is a heading</h1>
<p style=”font-size:160%”>This is a paragraph.</p>

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

Example

<h1 style=”text-align:center”>Centered Heading</h1>
<p>This is a paragraph.</p>

HTML Formatting Elements

In the previous chapter, you learned about HTML styling, using the HTML style attribute.
HTML also defines special elements, for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:

  • Bold text
  • Important text
  • Italic text
  • Emphasized text
  • Marked text
  • Small text
  • Deleted text
  • Inserted text
  • Subscripts
  • Superscripts

HTML Bold and Strong Formatting

The HTML <b> element defines bold text, without any extra importance.

Example

<p>This text is normal.</p>

<p><b>This text is bold</b>.</p>
The HTML <strong> element defines strong text, with added semantic “strong” importance.

Example

<p>This text is normal.</p>

<p><strong>This text is strong</strong>.</p>

HTML Italic and Emphasized Formatting

The HTML <i> element defines italic text, without any extra importance.

Example

<p>This text is normal.</p>

<p><i>This text is italic</i>.</p>
The HTML <em> element defines emphasized text, with added semantic importance.

Example

<p>This text is normal.</p>

<p><em>This text is emphasized</em>.</p>

HTML Small Formatting

The HTML <small> element defines small text:

Example

<h2>HTML <small>Small</small> Formatting</h2>

HTML Marked Formatting

The HTML <mark> element defines marked or highlighted text:

Example

<h2>HTML <mark>Marked</mark> Formatting</h2>

HTML Deleted Formatting

The HTML <del> element defines deleted (removed) of text.

Example

<p>My favorite color is <del>blue</del> red.</p>

HTML Inserted Formatting

The HTML <ins> element defines inserted (added) text.

Example

<p>My favorite <ins>color</ins> is red.</p>

HTML Subscript Formatting

The HTML <sub> element defines subscripted text.

Example

<p>This is <sub>subscripted</sub> text.</p>

HTML Superscript Formatting

The HTML <sup> element defines superscripted text.

Example

<p>This is <sup>superscripted</sup> text.</p>

HTML Text Formatting Elements

Tag Description <b> Defines bold text <em> Defines emphasized text  <i> Defines italic text <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text <mark> Defines marked/highlighted text