HTML Syntax

HTML syntax refers to the rules and structure used to write HTML code. HTML uses elements, tags, attributes, and text to describe the structure of a web page.

Understanding basic HTML syntax is important because almost every HTML document is built using the same fundamental patterns.

If you are new to HTML, learning how HTML tags are written and how elements are structured will help you create web pages more easily.

What Is HTML Syntax?

HTML syntax is the way HTML code is written and organized.

A simple HTML element looks like this:

<p>Hello World!</p>

This example contains:

• An opening tag: <p>
• Content: Hello World!
• A closing tag: </p>

The complete structure is called an HTML element.

HTML Tags

HTML tags are keywords enclosed inside angle brackets (< >).

• For example: <h1>Welcome to HTML</h1>
• Here, <h1> is the opening tag and </h1> is the closing tag.
• HTML tags tell the browser what type of content an element represents.

Some common HTML tags include:

Tag	Purpose
<html>	Defines the HTML document
<head>	Contains document information
<title>	Defines the page title
<body>	Contains visible page content
<h1>	Defines a main heading
<p>	Defines a paragraph
<a>	Creates a link
<img>	Displays an image

Opening and Closing Tags

Most HTML elements have an opening tag and a closing tag.

• The opening tag tells the browser where an element starts.
• The closing tag tells the browser where the element ends.
• For example: <p>This is a paragraph.</p>
  • The opening tag is: <p>
  • The closing tag is: </p>
• Notice that the closing tag contains a forward slash (/).

HTML Element

An HTML element normally consists of an opening tag, content, and a closing tag.

For example:

<h1>My Website</h1>

• The complete structure is: Opening Tag + Content + Closing Tag
  
• In this example: <h1> + My Website + </h1>
  
• Together, they form an HTML element.

HTML Document Structure

A basic HTML document follows a standard structure.

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>

    <h1>Hello World!</h1>
    <p>Welcome to my website.</p>

</body>
</html>

Each part has a specific purpose.

• <!DOCTYPE html> tells the browser that the document uses HTML5.
• <html> is the root element of the document.
• <head> contains information about the page.
• <title> defines the title displayed in the browser tab.
• <body> contains the content displayed on the web page.

HTML Doctype

The <!DOCTYPE html> declaration is placed at the beginning of an HTML document.

Example:

<!DOCTYPE html>

It tells the browser to use the standard HTML5 document mode.

The doctype is not an HTML element or tag. It is a declaration.

HTML Attributes

• HTML attributes provide additional information about an element.
• Attributes are written inside the opening tag.
• For example:<a href=”https://example.com”>Visit Website</a>
  

Here:

• <a> is the HTML tag.
• href is the attribute.
• "https://example.com" is the attribute value.
• Visit Website is the link text.

Another example is: <img src=”image.jpg” alt=”A beautiful landscape”>

Here, src specifies the image location and alt provides alternative text.

Attribute Syntax

• The basic syntax of an HTML attribute is: attribute=”value”
• For example: <p class=”intro”>Welcome to my website.</p>
• The attribute is: class=”intro”
• Multiple attributes can also be used in the same element.<img src=”photo.jpg” alt=”Profile photo” width=”300″>

Nested HTML Elements

HTML elements can be placed inside other HTML elements. This is called nesting.

For example:

<body>
    <h1>Welcome</h1>
    <p>This is my first web page.</p>
</body>

Here, the <h1> and <p> elements are inside the <body> element.

Another example:

<div>
    <h2>About HTML</h2>
    <p>HTML is used to create web pages.</p>
</div>

Proper nesting is important when writing HTML.

Empty HTML Elements

Some HTML elements do not contain content and do not require a closing tag.

• These are commonly called void elements or empty elements.
• For example: <br> The <br> element creates a line break.
• Another example is: <img src=”photo.jpg” alt=”Photo”>
  
• The <img> element displays an image and does not have a closing </img> tag.

Common void elements include:

Element	Purpose
<br>	Line break
<hr>	Horizontal rule
<img>	Image
<input>	Input field
<meta>	Metadata
<link>	External resource

HTML Comments

Comments allow developers to add notes inside HTML code.

Comments are not displayed on the web page.

HTML comments use the following syntax:

<!-- This is an HTML comment -->

For example:

<h1>Welcome</h1>

<!-- This paragraph provides an introduction -->
<p>Learn HTML with Web4Learners.</p>

Comments can help explain sections of code, especially in larger projects.

HTML Is Not Case Sensitive

HTML tag names are generally not case sensitive.

• For example, browsers can understand:<P>Hello World!</P> and: <p>Hello World!</p>
• However, lowercase tags are recommended because they make HTML code consistent, readable, and easier to maintain.
• Use: <h1>Heading</h1> instead of: <H1>Heading</H1>
  

HTML Whitespace

HTML ignores most extra spaces and line breaks between elements.

For example:

<p>Hello World!</p>

and:

<p>
    Hello World!
</p>

will generally produce the same visible text.

However, using proper indentation and spacing makes your code much easier to read.

HTML Text Content

Text can be placed inside HTML elements.

For example:

<h1>HTML Tutorial</h1>
<p>Learn the basics of HTML.</p>

The text between the opening and closing tags is the content of the element.

HTML Syntax Example

Here is a complete example combining several basic HTML syntax rules:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML Basic Syntax</title>
</head>

<body>

    <!-- Main heading -->
    <h1>Welcome to HTML</h1>

    <p class="intro">
        HTML is used to create the structure of web pages.
    </p>

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

    <br>

    <img src="image.jpg" alt="Example image">

</body>

</html>

This example includes a doctype, HTML elements, attributes, nesting, comments, and a void element.

Common HTML Syntax Mistakes

Beginners often make small syntax mistakes while learning HTML.

Some common mistakes include:

Mistake	Example
Missing closing tag	<p>Hello
Incorrect nesting	<p><strong>Hello</p></strong>
Missing quotation marks	<img src=image.jpg>
Incorrect attribute placement	<p "intro" class>
Misspelled tags	<paragragh>
Forgetting doctype	Missing <!DOCTYPE html>

Using a code editor can help identify some syntax problems while you write your HTML.

Best Practices for Writing HTML Syntax

Follow consistent HTML coding practices from the beginning.

• Use lowercase HTML tags.
• Use double quotation marks for attribute values.
• Indent nested elements properly.
• Use meaningful attribute values.
• Close elements correctly when a closing tag is required.
• Add alt text to meaningful images.
• Use comments when they make complex code easier to understand.
• Keep your HTML structure clean and readable.

HTML Basic Syntax Cheat Sheet

Syntax	Example
Opening tag	<p>
Closing tag	</p>
Element	<p>Hello</p>
Attribute	class="intro"
Link	<a href="url">Link</a>
Image	<img src="image.jpg" alt="Image">
Comment	<!-- Comment -->
Doctype	<!DOCTYPE html>

Frequently Asked Questions

What is HTML syntax?

HTML syntax refers to the rules and structure used to write HTML code.

What is an HTML element?

An HTML element generally consists of an opening tag, content, and a closing tag.

What is an HTML tag?

An HTML tag is a keyword enclosed in angle brackets that defines or identifies an HTML element.

What is an HTML attribute?

An HTML attribute provides additional information about an HTML element and is written inside the opening tag.

Are HTML tags case sensitive?

HTML tag names are generally not case sensitive, but lowercase tags are recommended as a standard coding practice.

What is HTML nesting?

HTML nesting means placing one HTML element inside another element.

What is the HTML doctype?

<!DOCTYPE html> is a declaration that tells the browser that the document is an HTML5 document.