HTML Tutorial - HTML Structure

Elements and attributes are used to mark up your content in an HTML document.

An HTML document is a text file with .html file extension.

You can load the file into a browser, either directly from the disk or via a web server. For most the html files you can just drag and drop it to the browser window.

Structure

Two elements provide the outer structure of an HTML document:

DOCTYPE element
html element

The following code shows the basic structure of a web document.

<!DOCTYPE HTML>
<html>
<!--  elements go  here   -->
</html>

The DOCTYPE element tells the browser it is dealing with an HTML document. This is expressed through the HTML boolean attribute:

<!DOCTYPE HTML>

The start tag of html follows the DOCTYPE element.

HTML documents are text files containing html tags. HTML tags in HTML documents mark up Web pages.

Save the following to a text file named index.htm, and drag and drop it to a browser.

<!DOCTYPE HTML>
<html> 
    <body> 
        <h1>My Heading</h1> 
        <p>My paragraph</p> 
    </body> 
</html>

Click to view the demo

The HTML document starts with <!DOCTYPE HTML>. <!DOCTYPE HTML> tells the browser this is a html document.

The content between <html> and </html> marks the Web page. <body> and </body> marks the visible page content. <h1> and </h1> is uses to define a heading. <p> and </p> creates a paragraph.

HTML Metadata

The metadata in HTML document provides information about your document.

The metadata is contained inside a head element.

<!DOCTYPE HTML>
<html>
    <head>
        <!--  define your metadata here   -->
        <title>web document title</title>
    </head>
</html>

The title element in the code above is metadata.

Most browsers display the title element in the browser window title bar or at the top of the tab that displays the page.

The head element also defines relationships to external resources such as CSS stylesheets, define inline CSS styles, and define and load scripts.

HTML Body

The content of a html document is added through the body Element.

The following code adds a line of text to body element.

<!DOCTYPE HTML>
<html>
    <head>
        <!--  metadata goes here   -->
        <title>Example</title>
    </head>
    <body>
       This is the <code>content</code>.
    </body>
</html><!--   ww  w  .  j av  a  2s .co m-->

Click to view the demo

What is being rendered in the content in body tag.

Parent vs Child

HTML elements defines relationships with the other elements in an HTML document.

An element that contains another element is the parent of the second element.

<!DOCTYPE HTML>
<html>
    <head>
        <!--  metadata goes here   -->
        <title>Example</title>
    </head>
    <body>
       This is the <code>content</code>.
    </body>
</html>

The body element is the parent to the code element, because the code element is contained between the start and end tags of the body element.

The code element is a child of the body element.

An element can have multiple children, but only one parent.

Descendants

The html element contains the body element, which contains the code element.

The body and code elements are descendants of the html element.

Only the body element is a child of the html element.

Children are direct descendants.

Elements that share the same parent are known as siblings.

The head and body elements are siblings.