04 - Basic blocks of HTML

Any language is built upon basic blocks. If one wants to learn any language, then he should be well-versed with the basic blocks on which the language is based on.

Syntax of a Programming language is nothing but the rules one should consider while writing the code. The code you write decides the structure of the web page. So, you should learn the syntax of HTML.

The syntax of HTML is very easy & can be learnt in few days.

The two basic building blocks of HTML are:

1. Elements

2. Attributes

4.1 Understanding Elements:

The most fundamental thing of HTML is Element.

In HTML, we use elements for referring two different things. We should clearly understand the difference between them; otherwise we may end up in confusion.

In the first context, we use the word element when we refer to the structure of document like title, header, body etc.

In the other context, we use them to refer to a tag. Look at the example below, to understand the difference:

Element as a part of document is title.

Element as a tag is <title>

Tags in HTML:

  • An element enclosed in angular brackets is a tag.
  • The tags of HTML are defined by World Wide Web Consortium. So, we should only use the tags defined by them. Every tag consists of a tag name followed by an optional set of attributes.
  • A tag tells the browser what to do.
  • The tags are not case-sensitive means <title> and <TITLE> are same. However, W3C advises to use lower case tags
  • When a web browser analyses the HTML code in a web page, it looks for these tags to tell it how to process & display the result.
  • The structure of elements is start tag followed by its contents & an end tag.
  • Most elements require start tag & an end tag, these start & ending tags defines the scope of the tag, i.e., they tells the point up to which this tag is valid
  • End tag is denoted as </ tag name>.For example end tag for <html> is </html>.
  • Some elements have start tag ,it is our wish to insert an end tag(optional).Some other elements only have Start tags .Each element has its own optional set of attributes.

Basic Structural elements of HTML:

The basic structural elements of HTML are:

1. <!DOCTYPE>

2. <HTML>

3. <HEAD>

4. <BODY>

A basic HTML page will look like this:

       <!DOCTYPE  HTML>
       <HTML>
           <HEAD>
               <TITLE>TITLE OF THE PAGE</TITLE>
               Optional meta data here
           </HEAD>
           <BODY>
               Content of web page
           </BODY>
       </HTML>

These four elements form the skeleton of a web page. Let us learn more about them,

The <!DOCTYPE> element:

  • The <!DOCTYPE> represents the Document Type Declaration (DTD), which defines the version of HTML used on the page.
  • When writing HTML code, it is important to add a DOCTYPE declaration.
  • This declaration goes at the top of every HTML page. For example, you can right-click on this page & select View page source and look at the very first line of the page. You will find something like <!DOCTYPE html>.
  • Valid web pages need a doctype.

The general syntax for DTD is:

       <!DOCTYPE root-element PUBLIC "FPI" ["URI"] [ 
         <!-- internal subset declarations -->
         ]>  
       (or)
      <!DOCTYPE root-element SYSTEM "URI" [ 
        <!-- internal subset declarations -->
       ]>

Where, the root element is the first element in the document, Keywords PUBLIC & System indicates which type of DTD is it.

If it is public then it is followed by Formal Public Identifier (FPI) in double quotes. The internal subset declarations are used to add or edit entities. This is optional.

There are many versions of HTML, so there are many DTDs. The doctype declaration must be exact (both in spelling and case) to get the desired effect. Since, these doctypes are long it is difficult to get accuracy every time you use them. Though, a doctype of recent type should be used in documents let’s also take a look at the DTDs of different versions of HTML.

HTML 2.0 DTD

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

EN specifies that it has not yet been developed in any language but English.

HTML 3.2 DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

XHTML Basic 1.0 DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"

"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

HTML 4.01:

This version of HTML has three type of document type declarations (DTDs) namely, Strict, Transitional and Frameset.

Strict DTD:

This declaration contains all HTML elements and attributes except the presentational & deprecated elements (applet, center, font, basefont, and u). This declaration does not allow Framesets.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Transitional DTD:

This declaration contains all HTML elements and attributes including the presentational & deprecated elements (applet, center, font, basefont, and u). This declaration does not allow Framesets.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Frameset DTD:

This declaration contains all HTML elements and attributes including the presentational & deprecated elements (applet, center, font, basefont, and u). Also allows Framesets.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0:

This version of HTML has three DTDs.

XHTML 1.0 Strict DTD:

It includes all elements & attributes except presentational & deprecated elements (applet, center, font, basefont, and u). It does not allow the use of Framesets. The document should be written in well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional DTD:

It includes all elements & attributes. It also includes presentational & deprecated elements (applet, center, font, basefont, and u). It does not allow the use of Framesets. The document should be written in well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset DTD:

It is same as Transitional DTD but framesets are allowed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1:

It allows the use of modules and is same as XHTML 1.0 Strict.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML 5.0:

HTML 5.0 uses a very short DOCTYPE declaration.

DTD for HTML 5.0:

<!DOCTYPE HTML>/

It is case insensitive means <!DOCTYPE HTML> and <!DOCTYPE html> are same.

HTML4 & HTML5 formally uses upper case letters as valid syntax. Even the lower case & mix of both are treated as valid.

<HTML> Element:

  • This is first & last thing in a web page. If you do not include this tag then no browser will recognize the document as a web page.
  • It must have both start & end tags. So, it begins with <HTML> and ends with </HTML>.
  • This element also has 3 attributes namely version, lang and dir.
  • The attribute version takes the URL value, this URL points to a location that has the Document Type Definition (DTD) for the version of HTML in use on that page.

  • The HTML start tag can also contain the lang and dir attributes, which respectively, establish the human language in which the web page is written and the direction of the printing.
    The HTML tag with its attributes might look like:

    <HTML version = http://www.w3.org/DTD/HTML4- strict.dtd lang=en dir=ltr>

    En –English, ltr-Prints the output left to right, Version of this HTML is HTML4

<HEAD> Element:

  • It contains all the information related to the document. It is placed immediately after the <html> tag.
  • It has both start & end tags .The header information begins with </HEAD> and ends with </HEAD>.
  • It should have one important element <TITLE> within it. It is also followed by its end tag </TITLE>. The text between these tags is displayed in the title bar of web browser in which the document is opened.
  • It also has other set of attributes, they are:
  • Each <head> element should contain a <title> element, it may also contain the following elements in any order
  • The <meta> tag includes information about the document such as name, keywords & description. The information from this tag is used by search applications.
  • The <style> tag is used for applying CSS (Styling) rules.
  • The <script> tag is used for including script file (JavaScript etc.) inside the document.
  • The <link> tag is used to link to an external file.
  • The <object> tag is used to include images, MP3 files etc.
  • The <base> tag establishes a base URL from which relative URLs referenced in the html document can be calculated.

The <head> element with all the attributes defined might look like this,

<head>
   <title>Description for HEAD</title>
   <meta name="Keywords” content=”HTML, Basics, style, CSS, head," />
   <base href="http://www.itechpoint.com/" />
   <link rel="stylesheet" type="text/css" href="tech.css" />
   <script > document.write(“Hello!!!”) </script>
</head>

<BODY> Element:

  • The body element is where the displayable web page is found.
  • It starts with <body> tag & ends with </body> tag.
  • It appears after the <head> element.
  • The <body> element contains paragraphs, tables, frames, forms etc.
   <BODY>
      <p> Hello! I have used Paragraph tag just now </p>
   </BODY>

Let’s put together what we learnt till now,

<!DOCTYPE HTML>
<HTML Lang=en dir=ltr>
   <HEAD>
      <TITLE>Description for HEAD</TITLE>
      <meta name="Keywords" content="HTML, Basics, style, CSS, head," />
      <base href= " http://www.itechpoint.com/" /> 
      <link rel="stylesheet" type="text/css" href="tech.css" />
      <script>
         document.write("Hello World!")
      </script> 
   </HEAD>
   <BODY>
      <p> Hello! I have used Paragraph tag just now </p>
   </BODY>
</HTML>

The Output of this program would be:

Like us on Facebook

Wideskills