Introduction to HTML Basics
Source: Dev.to
What is HTML?
HTML stands for Hyper Text Markup Language. It is used to create web pages and structure content on the internet. Every website you see is built using HTML.
Doctype Declaration – What it is and why we use it
The “ declaration appears at the very top of every HTML document.
Why we use it
- Tells the browser that the document is written in HTML5.
- Helps the browser render the page correctly.
- Avoids compatibility issues.
- It is a declaration, not an HTML tag.
Example
The “ Tag
The “ element contains meta‑information about the webpage. It includes:
- “ – the page title shown in the browser tab
- Meta data (charset, viewport, SEO tags, etc.)
- Links to CSS stylesheets
- Scripts (JavaScript) that should be loaded before the page body
Content inside “ is not directly visible on the rendered page.
Example
My First Page
The “ Tag
The element is placed inside.
Purpose: Shows the page name in the browser tab.
Example
HTML BasicsThe browser tab will display HTML Basics.
The “ Tag
The element contains the main content of the webpage. Everything inside is visible to users.
Example
## Welcome
This is my first HTML page.
Block Elements
Block‑level elements start on a new line and take the full width of their container.
Example
## Section Heading
This paragraph is a block element.
The “ Tag
“ stands for division. It is used to group elements together, acting like a container or box that holds other elements.
Example
## Welcome
This is inside a div.
The “ Tag
“ stands for paragraph. It is used to write text in paragraph form.
- Automatically starts on a new line.
- It is also a block element.
Example
This is a paragraph.
Heading Tags (to)
Heading tags provide titles and subtitles, establishing a hierarchy of importance.
| Tag | Typical Use |
|---|---|
| “ | Main title of the page |
| “ | Sub‑topics or section headings |
| “ | Sub‑sub‑topics |
| … | … |
| “ | Smallest heading |
All heading tags are block elements.
Example
## Main Heading
## Sub Title
### Small Heading
Inline Elements
Inline elements do not start on a new line and only take up the width required by their content.
Example
This is a paragraph with **bold** and [a link](#) inline.