HTML Syntax Basics

Introduction

HTML is the language used to structure content on webpages. It tells a browser what each piece of content means: a heading, paragraph, list, link, image, or other part of a page. HTML is not mainly about making a page look colorful; it is about organizing information so browsers and people can understand it.

In this lesson, you will practice reading HTML and create a small personal introduction. You will learn four important ideas: tags, elements, nesting, and attributes.

Think of HTML as labeling the parts of a document. The labels help the browser understand the role of each piece of content.

1. Tags and Elements

A tag is a keyword inside angle brackets. For example, <p> is the opening paragraph tag, and </p> is the closing paragraph tag. The slash shows that the tag is closing.

An element usually includes an opening tag, content, and a closing tag:

<p>I am learning HTML.</p>

In this example, the entire line is a paragraph element. The text between the tags is the element's content. Some elements do not need closing tags. These are often called empty or void elements. For example, a line break can be written as <br>.

HTML tag names are commonly written in lowercase. Browsers are forgiving, but lowercase tags make code easier to read and follow common practice.

2. Nesting

Nesting means placing one element inside another element. The inside element is called a child, and the outside element is called a parent.

<p>My favorite activity is <strong>cycling</strong>.</p>

The <strong> element is nested inside the paragraph element. Notice that the tags close in the reverse order in which they opened. This is called proper nesting.

<p><strong>Correct nesting</strong></p>

Avoid crossing tags like this:

<p><strong>Incorrect nesting</p></strong>

When elements are nested correctly, the structure is easier for browsers, assistive technologies, and other developers to interpret.

3. Attributes

An attribute adds extra information to an opening tag. Attributes usually have a name, an equals sign, and a value inside quotation marks.

<p class="intro">Welcome to my page.</p>

Here, class is the attribute name and intro is its value. Attributes can identify elements, provide useful information, or change how an element behaves.

For example, the href attribute stores the destination of a link:

<a href="https://example.com">Visit an example</a>

The attribute belongs inside the opening tag. The link text belongs between the opening and closing tags.

Worked Example

Read this short code sample from left to right:

<h1>Jordan's Webpage</h1>
<p class="intro">Hello! I am learning <em>HTML</em>.</p>
<ul>
  <li>I enjoy drawing.</li>
  <li>I enjoy music.</li>
</ul>

The first line is a heading element. The second line is a paragraph element with a class attribute. Inside the paragraph, the word HTML is nested in an <em> element. The unordered list element contains two nested list item elements. Each list item is a child of the list.

Guided Activity: Build a Personal Introduction

Open your practice editor or a plain text file. Type the following structure, replacing the bracketed words with your own information.

<h1>[Your name]'s Webpage</h1>
<p>Hello! I am learning HTML.</p>
<h2>Things I Like</h2>
<ul>
  <li>[Interest one]</li>
  <li>[Interest two]</li>
  <li>[Interest three]</li>
</ul>

1. Identify the opening and closing tags in each element.
2. Replace the bracketed text with your own details.
3. Check that every opening tag has the correct closing tag.
4. Look for nesting: the list items should be inside the unordered list.
5. Add a class attribute to the paragraph, such as class="welcome".
6. Preview the result in your browser if your editor supports previewing.

Work with a partner for one minute. Ask your partner to point out one tag, one element, one nested element, and one attribute in your code.

Common Mistake: Closing Tags in the Wrong Order

A frequent beginner error is forgetting a closing tag or closing nested tags in the wrong order. For example:

<p>This is <strong>important.</p></strong>

The paragraph closes before the bold emphasis closes. Correct it by closing the inner element first:

<p>This is <strong>important.</strong></p>

When checking your code, match each opening tag with its closing tag and trace nested elements from the inside out.

Independent Challenge

Create a short “About Me” section using HTML syntax. Your solution should include:

• One <h1> heading with your name or a fictional name.
• One paragraph with a class attribute.
• One <h2> subheading.
• One unordered list containing three list items.
• At least one nested <strong> or <em> element.

Before you finish, explain your code to yourself or a partner: Which parts are tags? Which complete sections are elements? Where is an element nested? What information does the attribute provide?

Quick Check

1. What is the difference between a tag and an element?
2. What does nesting mean?
3. Where does an attribute appear?
4. How can you check whether tags are properly nested?

Remember: HTML becomes easier when you read it as a structure rather than a puzzle. Start by identifying the tags, then look for complete elements, nested relationships, and extra information supplied by attributes.