02GEEK: Creating Our First Tag

Courses Archive Books

Get Free Access

Creating Our First Tag

In this video, we dive into the basics of creating your first HTML code. Learn about HTML tags: how they define the start and end of elements like paragraphs using opening and closing tags. Discover why closing tags are critical for well-structured pages and avoid creating broken HTML. By the end, you'll understand how to write a simple paragraph tag and render it in a browser.

Build your foundation in HTML: HTML Training with Mom.

Ready to Level Up Your Skills?

Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!

Enroll Now for Free!

Getting Started with HTML Training

Join my mom as I teach her the basics of HTML. In this ground breaking course.

Starting to do HTML

In this first video we will start talking about file formats, browsers and even see a few file types in HTML.

How to pick an HTML Editor

There are a lot of HTML editors out there so how will you pick the right on for you?

Creating Our First Tag

The most basic building block in HTML is the Tags. we will create one tag of our own. In this video we will create our first simple tag.

HTML, HEAD and BODY Tags

Every HTML page has a few tags you got to have that without them its not an HTML page. In this video we will learn about the HTML tag, the Head and the Body Tags.

Putting Content In Our Body

Now that we have a legal HTML structure its time for us to add our first content into our legal built HTML file.

Creating a Page Title

Adding a TITLE to the page. In this video we will add a title into the HEAD area of the page. We will then talk about what the TITLE is and where we can see it.

Creating Headlines: Tags H1 Through H6

It's time for us to explore and learn a few more tags. The tags we will be creating next are the headline tags. By the end of this video you will know 6 new tags!

Integrating the P tag (paragraph tag)

It's time for us to add the P tag into our skill set of tags. In this video we continue to learn HTML and add in the basic information we need to know about the P tag.

RECAP

That's it we are done with our first HTML session. We would love to make many more but that is 100% up to you if you love it support us drop a nice word for my mom and me.

Creating Our First Tag detailed:

Creating Our First Tag

In this tutorial, we’ll take our first steps into writing actual HTML code! You’ll learn the basics of HTML tags, including opening and closing tags, and why they’re critical to building well-structured web pages.

1. What are HTML Tags?

HTML uses tags to tell the browser where an element starts and where it ends. Tags are enclosed in angle brackets <>.

Opening Tag: Marks the start of an element.
Closing Tag: Marks the end of an element. It uses a forward slash / before the tag name.

Here’s the simple syntax for an HTML tag:

<name> Content goes here </name>

For example, the <p> tag is used to define a paragraph:

<p> This is a paragraph. </p>

<p>: The opening tag for the paragraph.
</p>: The closing tag that tells the browser where the paragraph ends.

2. Why Are Closing Tags Important?

Closing tags are critical because they ensure the browser correctly interprets your code. If you forget a closing tag, your web page might break or behave unexpectedly.

Think of opening and closing tags like bookends—they wrap around your content to keep it organized.

3. Creating Your First HTML Tag

Let’s go step-by-step to write your first tag:

Open Your Editor:
- Use a plain text editor like Sublime Text or Notepad.
- Create a new file.
Write Your Code:
Type the following HTML code into the editor:
```
<p> This is my first paragraph! </p>
```
Save the File:
- Save the file as HelloWorld.html (ensure the extension is .html).
- Place it on your desktop or a folder where you can find it easily.
View It in a Browser:
- Drag and drop the HelloWorld.html file into your web browser (e.g., Chrome, Firefox, Safari).
- You should see the text "This is my first paragraph!" displayed on the web page.

4. Breaking Down the Tags

Let’s analyze the tags we just created:

| Part | Description | Example |
|------------------|----------------------------------|----------------------|
| Opening Tag | Starts the paragraph | <p> |
| Content | The text displayed on the page | This is my first paragraph! |
| Closing Tag | Ends the paragraph | </p> |

5. What If You Forget the Closing Tag?

If you forget the closing tag </p>, the browser may not know where the paragraph ends, and it could mess up the layout of your page.

For example, this code is incorrect:

<p> This is my first paragraph!

To fix it, always include the closing tag:

<p> This is my first paragraph! </p>

Summary

By the end of this tutorial, you’ve learned:

What HTML tags are and how they work.
The difference between opening and closing tags.
How to create and display your first HTML tag (<p>).

What’s Next?

In the next tutorial, we’ll explore HTML titles and more tags that help organize your web pages. Get ready to build on what you’ve learned!