HTML PAGE STRUCTURE

-


HTML Page Structure

An HTML document is structured using a set of nested tags. Each tag is enclosed within <…> angle brackets and acts as a container for content or other HTML tags. Let's take a look at a basic HTML document structure:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
   <!-- content -->
</body>
</html>




DOCTYPE Declaration

<!DOCTYPE html>

The <!DOCTYPE html> declaration informs the web browser about the HTML version being used. The latest version is HTML5. But if this changes in the future (maybe 10 years down the line), the doctype declaration will be helpful!

HTML Root Element

<html>

The <html> tag is the root element that encapsulates all the content on the page.

</html>

The </html> tag marks the end of the <html> section.

Head Section

<head>

The <head> tag contains metadata and links to external resources like CSS and JavaScript files.

</head>

The </head> tag marks the end of the <head> section.

Title Tag

<title>Document</title>

The <title> tag sets the title of the web page, which is displayed in the browser's title bar or tab.

Body Tag

<body>

The <body> tag contains the visible content of the web page. This is where text, images, and other elements go.

</body>

The </body> tag marks the end of the visible content of the web page.

Every HTML page should include at least these essential elements to define the basic layout. In upcoming tutorials, we'll dive deeper into the fascinating world of HTML.



Visualization of an HTML Document:

The following image provides a visual representation of the HTML structure:

cwh tutorial image

How This Content Appears in a Web Browser:

Consider this html code:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <h1> This is a heading</h1>
    <p>This is a paragraph</p>
</body>
</html>

Below is an image showing how this HTML document will be rendered in a web browser:

cwh tutorial image

In the browser, the title bar will display the content from the <head> section, specifically the <title> tag. The main area of the browser window (usually a white background) will display the content inside the <body> tag.

In the upcoming sections, we will learn about html tags and elements. 


















Comments

Post a Comment

Popular posts from this blog

HTML WORKING

-
  HTML Working You must have heard of frontend and backend. Frontend refers to the visible part of a website or app that users interact with, like the tables, images, and buttons.  It's built using languages like HTML, CSS, and JavaScript.  How do websites work? When we want to access any information on the internet, we search for it using a web browser.  The web browser retrieves the content from web servers, where it is stored in the form of HTML documents. An HTML document is created by writing code with specific tags in a code editor of your choice.  The document is then saved with the  '.html'  extension. Once saved, the browser interprets the HTML document, reads it, and renders the web page. What is a Web Browser? A web browser is a program that understands HTML tags and renders them in a human-readable format that is easily viewable by people visiting the website.  Developers write code in HTML because it's a straightforward way to instruc...
Read more