HTML Boilerplate Code
The HTML Boilerplate is the standard starting template of every HTML document.
code
HTML Document Structure
- <!DOCTYPE html> → Declares the document type as HTML5.
- <html lang="en"> → Root element of the HTML page; lang="en" tells the browser and screen readers the language is English.
-
<head> → Contains metadata (information
about the document, not displayed on the page).
- <meta charset="UTF-8"> → Sets character encoding to UTF-8 (supports all characters, emojis, symbols).
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> → Makes the page responsive (adapts to screen sizes).
- <title> → Title of the webpage (appears in browser tab).
- <body> → Main content of the webpage (headings, paragraphs, images, etc.).
File path
File paths tell the browser where to find a file (image, CSS, JS, etc.).
Types of File Paths
- Relative Path → Path relative to the location of the HTML file.
- Looks inside the images folder present in the same directory.
- Best practice for web development because it works after deployment.
- Absolute Path (System Path) → Full path in your computer.
- Works only on your system.
- If you send this file to someone else, it won’t work because their computer doesn’t have the same path.
- Absolute URL (Web Path) → Full URL of the resource on the internet.
- Best for linking external resources (like CDN images, fonts, scripts).
Why Browsers Block System Absolute Paths?
- Browsers restrict access to local system paths (like C:/ or /Users/) for security reasons.
- If allowed, websites could steal personal files from your computer.
- That’s why only relative paths (inside your project folder) and web URLs are safe.
Class, div and Id
<div> in HTML
- <div> = division.
- A container element used to group HTML elements together.
- Has no semantic meaning (just a box).
- Useful for applying CSS styling or JavaScript logic to grouped content.
code
Class Attribute
- class is used to group multiple elements under the same style/behavior.
- One element can have multiple classes.
- Multiple elements can share the same class.
code
ID Attribute
- id is used to uniquely identify an element.
- Each id must be unique in a page (cannot repeat).
- Mostly used for JavaScript or CSS targeting.
code
Combining Div, Class & ID
