HTML Structure

We learnt about how the structure of a html page is. Lets get deep into it.
HTML Structure Consists of these main Elements.

We have already studied about the Doctype type Decalration in the introduction page. Lets know about remaining elements.

Example
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <p>Paragraph text</p>
  </body>
</html>

Elements

Explanation

<!DOCTYPE html>

It is a declaration that defines a document is an HTML5 document.

<html>

It is a root of a HTML Page.

<head>

Under the element it contains the meta information about the HTML page, stylesheets and scripts.

<title>

It specifies the title of the page. Appears at the top in the browser.

<body>

It is a part of a HTML Page where it appears in the browser.


<html> element

The <html> element is a fundamental building block of web pages and serves as the root or top-level element of an HTML document. It represents the entire content of a web page, defining the structure and the root of the document tree. All other HTML elements are nested within the <html> element.


<head> element

The <head> element is an essential part of an HTML document.
It is a container element that is used to hold metadata and other important information about the document, such as the title, character encoding, links to external resources (like stylesheets and scripts), and more.
The contents of the <head> element are not directly displayed on the web page instead, they provide instructions and information to the browser and search engines.
The Common elements used in head elemts are.
<meta> - Used for specifying metadata, such as character encoding, viewport settings, and description of the page for search engines.
<title> - Defines the title of the web page, which is displayed on the browser's title bar or tab.
<link> - Used to link external resources like stylesheets (CSS files) or web fonts.
<script> - Used to include external JavaScript files, allowing for dynamic interactions and functionalities on the web page.
<base> - Sets the base URL for all relative URLs within the document.
<style> - Used to embed internal CSS styles within the HTML document.

Example
<!DOCTYPE html>
<html>
<head>
    <!-- Metadata and other information -->
    <meta charset="UTF-8"> <!-- Character encoding -->
    <title>Document Title</title> <!-- Title of the document (shown in the browser's title bar or tab) -->
    <link rel="stylesheet" href="styles.css"> <!-- External stylesheet link -->
    <script src="script.js" defer></script> <!-- External script link with optional "defer" attribute -->
    <!-- Other meta tags, links, or scripts go here -->
</head>
<body>
    <!-- The visible content of the web page goes in the <body> element -->
</body>
</html>

<body> element

The <body> element is an essential part of an HTML document.
It represents the content that will be displayed in the browser window when a web page is loaded.
Everything visible on a web page, such as text, images, videos, and interactive elements, is contained within the <body> element. Inside this we use many elements to show thte content as required.

Example
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <!-- Content goes here -->
    <h1>Hello, World!</h1>
    <p>This is a sample paragraph.</p>
    <img src="example.jpg" alt="Example Image">
</body>
</html>

Quick Recap - Topics Covered

HTML Structure
The <html> Element
HTML <head> Element
HTML <body> Element

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now


Example 1
Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK