What is HTML? #
HTML stands for HyperText Markup Language. It is the fundamental language used to create and design webpages. Unlike programming languages, HTML is a markup language, which means it uses tags to define the structure and display of content on the web.
- HyperText refers to the clickable links that connect webpages.
- Markup Language means HTML uses tags like
<h1>,<p>to organize and format content so browsers know how to show it.
Think of HTML as the skeleton of a webpage that holds everything together and decides what content goes where.
Why Learn HTML? #
Learning HTML is essential because it is the building block of all websites. Whether you want to be a web developer, designer, or just create your personal site, HTML knowledge is required.
Benefits of learning HTML include:
- Creating your own webpages from scratch
- Understanding how websites work behind the scenes
- Preparing to learn related technologies like CSS and JavaScript
Basic Structure of an HTML Document #
An HTML file has a specific structure made up of elements, each with opening and closing tags. Here’s the simplest HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first paragraph of text!</p>
</body>
</html>
Explanation: #
<!DOCTYPE html>declares this is an HTML5 document.<html>wraps all the content of the webpage.<head>contains metadata like the page title.<title>sets the text that appears in the browser tab.<body>contains the visible page content.<h1>defines a heading.<p>defines a paragraph.
Important HTML Elements and Their Usage #
- Headings: Use tags from
<h1>to<h6>to create headings of different sizes.<h1>is the largest and most important, while<h6>is the smallest.
Example:
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<h3>This is a subsubheading</h3>
<h4>This is a subsubsubheading</h4>- Paragraphs: Enclose text in
<p>tags to create paragraphs.
Example:
<p>This is a paragraph of text on the webpage.</p>- Links: Use
<a>tag with thehrefattribute to create hyperlinks.
Example:
<a href="https://www.widelamp.com">Visit Widelamp</a>- Images: Use the
<img>tag withsrc(source) andalt(alternative text) attributes to add images.
Example:
<img src="logo.png" alt="Widelamp Logo" width="100">
How to View Your HTML Code in a Browser #
- Write your HTML code in a simple text editor like Notepad or a code editor like VS Code.
- Save your file with a
.htmlextension, for example,index.html. - Open the file by double-clicking it or dragging it into any modern web browser (Chrome, Firefox, Edge).
- You will see the webpage rendered based on your HTML code.
To inspect and learn more about the structure, right-click on the webpage and choose “View Page Source” or “Inspect.”
