Have you seen how a website looks plain and simple when the internet is slow or the server is weak? That plain version is what the website really looks like—without its fancy clothes or makeup.
Surprised? That plain look is called the HTML structure of the website. It's like the skeleton of the page before all the decorations are added.
Source Website: Criccbuzz
HTML
HTML stands for HyperText Markup Language, and it is the backbone of any webpage. Think of it as the framework or blueprint that tells your browser what content to display and how it’s organized.
Without HTML, there wouldn’t be any text, images, links, or buttons on a webpage. It's what makes a website functional at the most basic level. Everything in html is written in tags.
Opening Tag:
<tag>— This tells the browser to start a specific element.Content: Anything written inside the tag is displayed on the webpage.
Closing Tag:
</tag>— This tells the browser that the element is finished.
Boilerplate Template
In HTML, nesting means putting one tag (a child ) inside another tag (a parent tag).
From this we can infer that <html>tag is the parent tag which contains all it’s child tags namely head and body . If you don’t do nesting properly ,the browser won’t understand how to display your content!
Browsers rely on the structure of HTML to render content accurately. Incorrectly nested tags can lead to rendering issues, making your web page appear broken or misaligned.
Html Section (<html>)
- A HTML website start’s with something called html tag which tells the browser that the current file is HTML.
< !DOCTYPE html>
<!-- All your content goes here -->
</html>
Head Section (<head>)
The head is like the brain of the webpage. It contains important information like the metadata, and links to stylesheets. Meta charset tells us what character set is used in the document.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<html>
Title Section (<title>)
This tells us the title of the html document.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>THIS IS THE HEADING OF THE DOCUMENT</title>
</head>
<html>
Body Section (<body>)
The body contains all the visible content of the webpage, such as headings, paragraphs, images, and buttons.
<html>
<head> <title>...</title> </head>
<body><!-- All your content goes here --><body>
<html>
NOTE: The collection of all this code is called a boilerplate template. In Visual Studio Code (VS Code), you can quickly generate this boilerplate template by simply typing ! and pressing Enter.
Basic Tags
Since covering every HTML tag in detail is beyond the scope of this blog, we will focus on the major classifications of commonly used HTML tags. Remember, there’s no need to memorize all the tags; instead, we should understand their use cases and when to apply them.
Understanding the classification is also similar since the names are close to their actual meaning.
Structural Tags: These tags help build the layout of the webpage.
Content Tags: These tags hold the actual information or text on the webpage.
Media Tags: These tags are for images, videos, and sounds on the webpage.
Table Tags: These tags help create and display tables on the webpage.
Form Tags: These tags let people fill out forms on the webpage to send information.
Semantic Tags: These tags give meaning to parts of the webpage, making it easier to understand and search for (only from the developers/readers point of view).
Thankyou!!