Episode 3 of 17

HTML Syntax & Structure

Learn the fundamental syntax of HTML — tags, elements, attributes, and how to write proper HTML.

Before writing any HTML, you need to understand the building blocks: tags, elements, and attributes.

A tag is a keyword surrounded by angle brackets. Most tags come in pairs — an opening tag and a closing tag:

<tagname>Content goes here</tagname>

The closing tag has a forward slash (/) before the tag name.

An element is the combination of the opening tag, the content, and the closing tag:

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

Opening tag: <p>
Content:     This is a paragraph element.
Closing tag: </p>

Some tags don't have content and don't need a closing tag. These are called self-closing (or void) elements:

<br>       <!-- Line break -->
<hr>       <!-- Horizontal rule -->
<img>      <!-- Image -->
<input>    <!-- Input field -->

Attributes provide additional information about an element. They are always written in the opening tag:

<tagname attribute="value">Content</tagname>

Examples:

<a href="https://notearc.info">Visit NoteArc</a>
<img src="photo.jpg" alt="A beautiful photo">
<p class="intro">Welcome!</p>

Elements can be placed inside other elements. This is called nesting:

<div>
    <h1>My Title</h1>
    <p>My paragraph with a <strong>bold word</strong>.</p>
</div>

Important: always close tags in the correct order. The last tag opened must be closed first.

Comments are invisible to users but help developers document their code:

<!-- This is a comment. The browser ignores it. -->

HTML tags are not case-sensitive — <P> and <p> both work. However, the convention is to always use lowercase tags.