Working of HTML
The HTML document is typically structured as follows:
HTML document format
- Document Type Declaration (DOCTYPE): This statement tells the web browser what version of HTML (the language used to create web pages) the document is written in. It helps the browser interpret and display the code correctly.
<!DOCTYPE html>
- HTML Tag: HTML tag as the starting point or the main container of your webpage. It is like the root or base of a tree from which all other elements branch out. Everything else on your webpage, like text, images, and links, is nested within this HTML tag.
<html>
<!-- Content -->
</html>
- Head: The head section of a webpage is like a storage room for important details about the webpage, such as its title, design instructions, and extra features. These details are not shown right away when you open the webpage. they are more like background information that helps the webpage function correctly and look good.
<head>
<title>Example Page</title>
<!-- Other meta-information -->
</head>
- Body: The body section of a webpage is where you find all the main content like text, images, headings, and lists. It is what you actually see when you visit a webpage in your browser.
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<!-- Other content -->
</body>
HTML Rendering Process
- Receiving the Code: When we type a website address on our browser, it sends a request to the web server where that website is stored. The server then sends back the webpage you requested, including all the text, images, and other elements it is made of. It is like asking for a book from a library, and the server sends you the book along with any pictures or extra information.
- Parsing the Code: When our browser opens on a webpage, it reads the code to understand it. It looks for specific HTML tags and their order. It knows it is an HTML document because of a special line at the start. It is like a reader recognizing a book by its cover.
- Building the Content Model: The browser sorts all its parts, when a webpage loads, like text and images, into a structured layout called a content model. This layout looks like a tree and shows how different parts of the webpage are connected. It’s like organizing your toys into different boxes based on what they are.
- Applying CSS: Cascading Style Sheets (CSS) is like a designer for web pages. It tells the browser how things should look, like what color text should be, how big headings should be, and where things should be placed on the page. So, when you visit a webpage, the browser reads the CSS instructions and styles the page accordingly.
- Painting the Page: When you open a webpage, our browser organizes all the elements on the page like images, paragraphs, and headings according to how they are described in the code (HTML) and how they should appear (CSS). It is like a decorator arranging furniture in a room to make it look nice and tidy.
Viewing the HTML Code
There are two ways to see the HTML code of a webpage:
- Right-Click and View Page Source: We can right click anywhere on a webpage in most web browsers to choose an option like “View Page Source” or “Inspect.” This displays the full HTML code for that page in a new window or panel.
- Developer Tools: Developer tools come built in with web browsers, and they provide a lot of information about webpages. We can usually access them by pressing (F12 or Ctrl+Shift+I). These tools let you look at and change the HTML code of the page you are on. It is like peeking behind the scenes of a magic show and being able to adjust how things work.
Why is HTML used in Web Pages ?
Web pages are built using the HyperText Markup Language or HTML. It is a markup language that defines a webpage’s content and structure using tags. These tags provide instructions to web browsers on how to show links, photos, videos, text, and other content. Consider HTML as a house’s plan, detailing the rooms, doors, windows, and general design.
Table of Content
- Working of HTML
- How to Use HTML to Create a Web Page
- Some Commonly Used HTML Tags
- Advantages of Using HTML in a Webpage
- Latest Version of HTML (HTML5)
- Features of HTML5
- Advantages of HTML5 over HTML