Welcome! This article is a gentle introduction to HTML (HyperText Markup Language), the backbone of every website you visit. Don’t worry if you’re completely new to this – we’ll break everything down into simple, easy-to-understand concepts.
What is HTML?
Think of HTML as the structural blueprint of a website. It’s like the framework of a house, defining where the walls, doors, and windows go. HTML uses “tags” to tell the web browser how to display content like text, images, and videos.
Understanding HTML Tags
HTML tags usually come in pairs: an opening tag and a closing tag. The opening tag starts the element, and the closing tag ends it. The closing tag is the same as the opening tag, but with a forward slash (/) before the tag name.
For example, if you want to create a paragraph, you’d use the <p> tag to start the paragraph and the </p> tag to end it:
<p>This is a paragraph of text.</p>
Common HTML Tags
Let’s look at some of the most common HTML tags:
<html>: The root element of an HTML page. All other HTML elements are descendants of this element.<head>: Contains meta-information about the HTML page, like the title.<title>: Specifies a title for the HTML page (which is shown in the browser’s title bar or tab).<body>: Contains the visible page content.<h1>to<h6>: Define headings of different levels (<h1>is the most important heading).<p>: Defines a paragraph.<a>: Defines a hyperlink (link to another page).<img>: Defines an image.<ul>: Defines an unordered list.<ol>: Defines an ordered list.<li>: Defines a list item.<div>: Defines a division or a section in an HTML document. Often used for grouping elements.<span>: An inline container used to mark up a part of a text, or a part of a document.
A Simple HTML Example
Here’s a basic HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is my first web page. I'm learning HTML!</p>
</body>
</html>
Let’s break it down:
<!DOCTYPE html>: This declaration defines the document to be HTML5. It’s important to include this.<html>: This tag tells the browser that this is an HTML document.<head>: This section contains information about the page, such as the title.<title>My First Web Page</title>: This sets the title that appears in the browser tab.<body>: This section contains the content that will be displayed on the page.<h1>Welcome to My Website!</h1>: This is a top-level heading.<p>This is my first web page. I'm learning HTML!</p>: This is a paragraph of text.
How to View Your HTML Code
1. **Create a text file:** Open a plain text editor (like Notepad on Windows or TextEdit on Mac). Make sure it saves in plain text format, not rich text (RTF).
2. **Type in your HTML code:** Copy and paste the code from the example above into your text editor.
3. **Save the file with a `.html` extension:** Save the file as something like my_first_page.html. Make sure to change the “Save as type” to “All Files” if your text editor doesn’t automatically add the .html extension.
4. **Open the file in your web browser:** Double-click the HTML file, and it should open in your default web browser.
What’s Next?
This is just the beginning! There’s a lot more to learn about HTML, including:
- HTML attributes (adding extra information to tags).
- Styling your web pages with CSS (Cascading Style Sheets).
- Adding interactivity with JavaScript.
But for now, experiment with the tags we’ve covered. Try adding different headings, paragraphs, and lists to your HTML document. Have fun and keep learning!