What is HTML?
HTML stands for HyperText Markup Language.
HTML is the standard markup language for creating webpages.
HTML uses predefined commands called tags (e.g., <h1>, <p>, <img>) to define webpage elements such as headings, paragraphs, and images.
HTML elements tell the browser how to display the content on the webpage.
HTML also serves as the foundation for other web technologies like CSS and JavaScript, which enhance webpage design and functionality.
The best part is that learning HTML is easy! The syntax of HTML tags is
simple, and you’re probably already familiar with many common tags like <html>, <head>, <title>, <body>, etc. So, don’t worry! Just practice with effort, and you’ll get the hang of it.
Notes:
HyperText: This is text that can link to other pages or resources. When you click on a link, you interact with hypertext.
Markup Language: This refers to a method of adding special instructions to a document,
guiding a web browser on how to display the content. HTML uses tags to organize elements such as headings,
paragraphs, links, and images on a web page.
HTML is case-insensitive: You can use uppercase, lowercase, or mixed-case letters for HTML tags and attributes. However, it is recommended to use lowercase for HTML tags and attributes for better readability and consistency.
Basic HTML Structure
Example
Example explanation:
<!DOCTYPE html>
is the declaration for an HTML
document that tells the browser the document is written in HTML5 (latest version of HTML). It ensures
that the document follows HTML5 rules and is rendered correctly in standards mode.
<html>...</html> element is
the root container that holds
everything on your web page.
<head>...</head> element
contains meta information like page
title,
description, keywords
about HTML page. (not shown on the page)
<title>...</title> element
sets the webpage title that
appears in the browser's tab
(browser's title bar).
<body>...</body> element
defines the body of HTML document and contains all the visible content
(text, links, images) on HTML page.
<h1>...</h1> element defines
the largest and most
important heading.
<p>...</p> element defines a paragraph.
So, the code in the example, creates a simple web page with a page title (My Webpage), a heading that says "Welcome to My Webpage" and a paragraph saying "This is a simple HTML document."
Tips:
Edit HTML: You can edit the HTML code with our instant live editor".
Show Output: Click the "Show Output" button to show the coding result.
Understanding HTML Tags, Elements, and Attributes
HTML is the foundation of every webpage, and it’s built using three basic building blocks: tags, elements, and attributes. Let’s learn these concepts with simple examples.
1. HTML Tag
An HTML tag is a special command that tells the browser what type of content you’re adding. Tags are written inside angle brackets < >.
Example
If you want to create a Paragraph in your webpage you have to write:
<p>This is a Paragraph.</p><p> is the opening tag.
</p> is the closing tag.
2. HTML Element
An HTML element includes the opening tag, the content, and the closing tag.
Example
<p>This is a Paragraph.</p>The entire line (<p>This is a paragraph.</p>) is an HTML element.
3. HTML Attribute
Attributes provide extra information about a tag or element. They’re written inside the opening tag.
Example
<a href="https://www.w3studies.com" target="_blank">w3studies</a>
href="https://www.w3studies.com" is an attribute that specifies the URL of the W3Studies website.
target="_blank" is an attribute that instructs the browser to open the URL in a new tab.
HTML Comments
HTML comments are used to write notes in the code that don't appear on the webpage. They're helpful for explaining the code or leaving reminders.
Syntax:
<!-- This is a comment -->
Example
<!-- Name of my son --> <p>Md. Habibur Rahman</p>
Try It Yourself
Notes:
Comments are wrapped in <!-- and -->.
Comments are not visible on the page when viewed in a browser.
They are useful for explaining sections of code or temporarily disabling code.
Is HTML Case-Sensitive?
If you're just starting with HTML, you might wonder: "Does it matter if I use uppercase or lowercase letters in HTML?" The answer is simple—HTML is case-insensitive, but there’s a recommended way to write it. Let’s break it down.
What Does Case-Insensitive Mean?
In HTML, you can write tags, attributes, and element names in uppercase, lowercase, or even a mix of both. All of these work the same way:
<HTML> <head> <BODY>
<html> <HEAD> <body><hTml> <heAd> <bOdY>
The browser will understand them all.
What’s the Recommended Way?
It is recommended to always write HTML tags, attributes in lowercase. It makes your code cleaner, easier to read, and consistent with modern web standards.
- Clean and Consistent:
Lowercase tags make your code easier to read and maintain. - Modern Standards:
HTML5 recommends using lowercase for tags and attributes. - Better for SEO:
Search engines prefer clean and consistent code, which can help with SEO. - Fewer Errors:
Some tools and technologies, like CSS and JavaScript, can be case-sensitive. Lowercase reduces potential issues.
Example
Good Practice (Lowercase Tags):
Not Recommended (Uppercase Tags):
What About Attributes?
Attributes (href , target, id and class) are also case-insensitive. However, values for these attributes might matter in CSS or JavaScript:
Best Practices!
Always write tags and attributes in lowercase.
Be consistent—it makes your code clean and professional.
Follow modern standards to avoid problems in the future.
Why Learn HTML?
Foundation of Web Development: HTML is the basic building block of all websites. Learning HTML gives you the groundwork to explore other web technologies like CSS and JavaScript for advanced design and interactivity.
Career Opportunities in Tech: HTML is essential for jobs in web development, digital marketing, content creation, and design. Mastering it can open doors to exciting roles in the fast-growing tech industry.
Create Your Own Websites: With HTML, you can build and customize your personal or business websites, whether it's a blog, portfolio, or e-commerce site. It gives you complete control over your site’s structure.
Stand Out in the Job Market: HTML is a must-have skill for SEO specialists, web designers, and content managers. Knowing HTML can set you apart and boost your chances of landing top jobs.
Understand How Websites Work: Learning HTML helps you understand website structures, making it easier to troubleshoot issues or collaborate with developers and designers. This skill is invaluable for bloggers, marketers, and entrepreneurs.
Advantages of HTML
Easy to Learn and Use: HTML is beginner-friendly with simple tags and syntax, making it the ideal first step for anyone new to coding.
Free and Accessible: HTML is open-source and doesn’t require expensive tools. You can start coding with just a text editor and a browser, making it highly cost-effective.
Works Everywhere:TML is compatible with all browsers and devices, ensuring your web pages work seamlessly on smartphones, tablets, and desktops.
Boosts SEO: Properly written HTML helps search engines rank your website higher. Using tags like <title>, <meta>, and <header> ensures better visibility online.
Combines with Other Technologies: HTML works perfectly with CSS for styling and JavaScript for functionality, making it essential for building modern, interactive websites.
Hypertext Functionality: HTML allows the incorporation of hyperlinks within text for easy navigation.
Cross-Platform Compatibility: HTML is universally supported by all web browsers, ensuring that web pages display consistently across different devices and platforms, from desktops to mobile phones.
Prerequisites to Start Learning HTML
Getting started with HTML is exciting because it's the foundation of everything you see on the web. Luckily, you don’t need an extensive technical background—just a few basic skills will set you ready to start with HTML. Here’s a quick list of what you should know before learning HTML.
How to create directories and files on your computer's drive: Knowing how to create files, save them, and organize them in folders on your computer is essential for managing your HTML files.
Understanding file types and extensions: In web development, you'll often work with various file types (.html, .css, .jpg, .mp3 etc). Understanding file types helps you effectively manage web content.
How to open files in text editor and web browsers: Often you have to open html files in a text editor (like Notepad on Windows or TextEdit on Mac) or other code editors to edit HTML code and in a web browser for viewing the results.
How to edit text in text editor: HTML code is written in plain text, so knowing how to use a text editor like Notepad (Windows) or TextEdit (Mac) is helpful for absolute beginner. Editors like Visual Studio Code and Sublime Text are also popular for writing HTML.
How to use web browsers: Web browsers, such as Chrome, Firefox, Safari, and Edge, are essential tools for accessing the internet and testing web content.
How to navigate file path: Understanding file paths. (e.g., C:\Users\YourName\Documents\Project\index.html) is important for linking to other files, such as images, stylesheets, and scripts."
These basic skills will set you up to start your journey in web development with HTML!
History of HTML
HTML 1.0 (1991)
The first version of HTML created by Tim Berners-Lee in 1991 to facilitate the sharing of information on the internet. Initially, it included just 18 tags, allowing for basic text formatting and linking.
HTML 2.0 (1995)
Standardized HTML with more features like forms and tables. Designed to improve web content presentation and user interaction.
HTML 3.2 (1997)
Introduced more advanced features like tables, applets, and support for scripting (JavaScript). Brought more control over page layout with styles and fonts.
HTML 4.01 (1999)
A significant update that focused on separating content from presentation by introducing CSS (Cascading Style Sheets). Supported multimedia elements and improved forms and accessibility features.
XHTML 1.0 (2000)
A stricter version of HTML 4.01, adhering to XML syntax rules for better web compatibility and future expansion.
HTML5 (2014)
The latest and most powerful version, designed to support modern web development. Introduced new semantic elements (<header>, <footer>, <art>), multimedia elements (<audio>, <video>), and APIs for offline web apps, geolocation, and drag-and-drop. Focused on making the web more mobile-friendly and interactive.
From its humble beginnings, HTML has become the foundation of the web, enabling billions of users to access and share information globally.
