In this chapter, you will learn the structure of a basic HTML document with notes and best practices.
Basic HTML Structure
Every HTML document follows a standard structure to ensure it works seamlessly across all browsers.
Example:
Our tutorials always prioritize simplicity and clarity. In the future, we will use simplified HTML coding examples to make them easier for you to understand.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration is essential for defining the type and version of an HTML document. It helps browsers render webpages correctly. Don't worry! it's simple to use!.
<!DOCTYPE> stands for Document Type Declaration (DTD).
It tells the web browser which version and document type is being used.
For the latest version of HTML (HTML5) use <!DOCTYPE html>.
Best Practice!
Always include <!DOCTYPE html> as the very first line of your HTML document, and only once, before the <html> tag. It's important for modern web development.
Notes:
<!DOCTYPE> is case-insensitive, but using uppercase (<!DOCTYPE>) is recommended for consistency and readability.
It is not a tag; it is a declaration in HTML.
The <html> Element
The <html> element is the main container (root element) of an HTML document. It contains all the content of the webpage and helps the browser display it correctly.
<html> element starts with the opening tag <html>.
It ends with a closing tag </html>.
The <html> tag uses the lang attribute to declare the primary language of webpage.
lang="en" tells the browser that the primary language of this HTML document is English.
Example:
<html lang="en">The main two sections <head> and <body> are to be placed here.
</html>
Note:
Don't forget to use <html lang="en">. It improves accessibility for users and search engines (SEO).
The <head> Element
The <head> element contains essential information and resources for the webpage, including the page title, metadata, favicon, and links to CSS or JavaScript files, among other important elements.
The content of the <head> element does not appear directly on the webpage but helps browsers to understand and display the webpage correctly.
Example:
<head>This section contains important information for the webpage.
</head>
Explanation of <meta charset="UTF-8">
This tag tells the browser what character set (or text encoding) to use when displaying your webpage.
It ensures your page can display a wide range of characters, including special symbols, emojis, and non-English letters (like ñ, ü, or ä¸).
Without this tag, some characters might appear as weird symbols or boxes.
Example
<meta charset="UTF-8">Try It Yourself
Notes:
Always include <meta charset="UTF-8"> in your HTML code to avoid text display issues. UTF-8 is the most widely used character encoding on the web.
Include it in the <head> section of your HTML document, like this:
What is the <meta name="viewport"> Tag?
The <meta name="viewport"> tag is an HTML element that controls how your webpage is displayed on different devices. Let's discus why it is important:
Why It's Important:
It uses to create mobile-friendly responsive websites, which is important for both user experience and SEO.
Without this tag, your page might look too small or too wide on mobile devices.
Ensures your webpage adjusts to fit screens of all sizes, from small phones to large desktops.
Google prioritizes mobile-friendly websites in search rankings.
Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Explanation
name="viewport": Specifies that the tag is for controlling the viewport (the visible area of a webpage on a screen).
content: Defines the settings for the viewport.
width=device-width: Sets the page's width to match the device's screen size.
initial-scale=1.0: Ensures the page is not zoomed in or out by default.
Try It Yourself
Note:
Always include this tag to make your website look good on all devices. It’s a must-have for modern web design.
The <title> Element
The <title> element is one of the most important parts of an HTML document. It defines the title of your webpage, which is displayed on the browser tab and used by search engines to understand your page's content.
Example:
<title>This is the webpage title shown on the browser tab</title>
Try It Yourself
Notes:
Keep webpage title short (around 50–60 characters).
The <body> Element
The <body> element contains everything you see on the webpage.
It’s where you add your main content, such as text, images, links , forms, tables and more.
Example:
<body>This section contains all the visible content of the webpage.
</body>
View HTML Source Code (Desktop)
Viewing the HTML source of a webpage allows you to see the underlying code that structures the page. Here's how to do it in different browsers:
✅ View Usnig Mouse (Windows, MacOS)
Step 1: Right-click on the webpage (not on an image or link).
Step 2: Select "View Page Source" from the context menu.
✅ View Using Keyboard (Windows, MacOS):
Press "cmd + U" from keyboard
View HTML Source Code (Smartphone)
Viewing the HTML source of a webpage allows you to see the underlying code that structures the page. Here's how to do it in different browsers:
✅ View From Google Chrome (Android)
Step 1: Open the website in Chrome.
Step 2: In the URL bar, type view-source: before the website URL.
For example, to view the source of https://example.com, type: view-source:https://example.com
Step 3: Press Enter or Go. You will see the HTML source displayed in the browser.
✅ Mozilla Firefox (Android):
Step 1: Open Firefox and visit the website.
Step 2: Tap the three-dot menu (top-right corner).
Step 3: Tap "Page" and then select "View Source".
Step 4: You’ll see the HTML code displayed.
✅ Safari (iPhone/iPad):
On Safari, there's no built-in way to view HTML source directly. However, you can use the Web Inspector on a Mac to remotely view the source from your iPhone/iPad.
To Use Web Inspector (via Mac)
- Enable Web Inspector on your iPhone (Settings > Safari > Advanced > Web Inspector).
- Connect your iPhone to a Mac via USB.
- Open Safari on your Mac, then go to Develop > your device > the webpage.
- You'll see the source code of the webpage from your phone.
✅ Using a Mobile App (Android & iOS):
You can also use certain apps designed to view HTML source, such as:
HTML Viewer (available on the Google Play Store).
View Source Mobile (available on the Apple App Store).
Inspect a Web Page
Inspecting a webpage allows you to view and interact with its HTML, CSS, and JavaScript. It's an essential tool for web developers to troubleshoot and test websites.
How to Inspect a Webpage?
Step 1: Right-click on the webpage (on the part you want to inspect, like text, image, or button).
Step 2: Click on "Inspect" or "Inspect Element" from the context menu.
Or,
Press Ctrl + Shift + I (Windows) from keyboard.
Press cmd + Shift + I (MacOS) from keyboard.
In the next chapter, we'll cover everything you need to know about HTML tags.
