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
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.
How to Use HTML to Create a Web Page
HTML is mainly used to structure our web page with the help of the elements and tags. It can be further used with CSS and JavaScript to enhance the attractiveness and interactivity of the web page.
Example: The below code example creates a simple web page with the help of CSS and HTML.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>
My Simple Webpage
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>
Welcome to My Page!
</h1>
<p>
This is some content on my webpage.
</p>
<img alt="My Image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240324185837/GFG-logo.jpg">
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
}
p {
text-align: center;
line-height: 1.5;
}
img {
width: 200px;
display: block;
margin: 0 auto;
}
ul {
list-style: none;
padding: 0;
}
li {
margin: 10px 0;
}
Output:
Output
Some Commonly Used HTML Tags
The below list contains some most commonly used HTML tags on every web page:
- Headings (<h1> to <h6>): HTML headings are titles or subtitles that you want to display on a webpage.
- Paragraph (<p>): A paragraph element consists of content that appears between an opening <p> tag and a closing </p> tag. This content can be text, graphics, or other types of content, such as form fields.
- Lists (<ul> for unordered, <ol> for ordered): There are may be one or more list elements in every list. Three varieties of HTML lists exist: Lists can either be ordered(ol), unordered(ul), or description list (dl).
- List Items (<li>): When you want to list of items, you can use the <li> element. This element must be placed inside either a menu (<menu>), an unordered list (<ul>), or an ordered list (<ol>). It's like saying each item in your list belongs to a specific category, whether it's a menu, a bulleted list, or a numbered list.
- Images (<img>): The <img> tag in HTML creates a space where an image can be shown on a webpage. However, the actual image is not part of the HTML page itself; instead, it's linked from another location on the web. So, when you use the <img> tag, you're basically telling the browser to display an image from somewhere else on the internet within your webpage.
- Links (<a>): Create hyperlinks to other webpages or sections of the same page.
- Tables (<table>, <tr>, <td>): When you want to create a table, We can use the <table> tag. Inside this tag, you create rows with <tr>, and within each row, you add cells using <th> for headers or <td> for regular cells. So, <th> makes the table header, <td> makes the table cell, and <tr> marks each row.
- Forms (<form>, <input>, <button>): An HTML form is a part of a webpage where users can fill in information or make selections, like typing in a text box or choosing from a list. Each option has a label next to it to explain what it is. It's like a way for users to interact with a webpage, such as filling out a survey or entering their details.
Advantages of Using HTML in a Webpage
- Structure and Organization: HTML is like a framework for web content, ensuring websites appear consistent across different devices. It organizes information in a way that browsers can understand, making it easier for users to navigate and access content seamlessly.
- Flexibility: HTML forms is the basic structure of web pages. With the addition of CSS for styling and JavaScript for interactivity, it allows for the creation of complex and engaging websites.
- Standardization: HTML is a uniform structure ensures web pages appear consistently across different browsers, enhancing user experience. This standardization simplifies development and guarantees accessibility to all users, regardless of their preferred browser.
- Easy to Learn: HTML is a good choice for beginners to learn web programming due to its straightforward syntax and rules. It provides an accessible starting point for newcomers to understand the basics of building web pages, setting a solid foundation for further learning in web development.
Latest Version of HTML (HTML5)
HTML5, launched in 2014, is the current standard for web development. It offers significant improvements over its predecessors, enhancing the capabilities and functionality of websites and applications. This version has become widely adopted due to its modern features and improved performance.
Features of HTML5
- Semantic Tags: These tags, like <header>, <nav>, <section>, and <article>, provide extra context to the content on a webpage. This helps search engines and screen readers understand the structure of the page better, making it easier for users to navigate and comprehend the information presented.
- Multimedia Support: We can include audio and video elements directly in web pages without relying on additional plugins. This eliminates the need for third party software to play media, making the web experience more seamless and accessible across different devices and platforms.
- Offline Capabilities: Web applications can keep working a bit even if you are not online, this tools like storing data locally and caching parts of the app. This means you might still be able to use some features or access stored information without an internet connection.
- Canvas and SVG: These components offer advanced sketching tools for creating interactive visuals and animations. They enable users to draw and animate images with precision and ease, allowing for dynamic and engaging content creation.
- Web Storage: In HTML5, websites can remember your login information even after you close the browser. This is because HTML5 allows data to be saved directly on your device, using tools like local storage and session storage. So, you don't have to log in every time you visit the website.
Advantages of HTML5 over HTML
- In the HTML5, websites can do more things and have cleaner code. This means they can have extra features and everything is arranged in a neater way behind the scenes.
- HTML5 helps websites show videos, music, and other cool stuff better, so you have more fun when you are online.
- HTML5 allows websites to work better even when you are not connected to the internet.
- HTML5 provides advanced tools for creating visually impressive and interactive graphics on websites. This means that online content can have really cool and dynamic visual effects.
- It easier for websites to remember your login details, so you don't have to keep entering them every time you visit.