HTML Syntax

Updated on 31/01/2025490 Views

Table of Content

HTML comes with a lot of rules and regulations on how to write code. Maintaining HTML syntax ensures that there are no bugs present in your code. Bugs may cause your web page to malfunction and we definitely do not want that. In this tutorial, I will teach you the basics of HTML syntax.

As a web developer myself, even I have to be on the constant lookout for HTML syntax. Let me guide you about HTML syntax so you can write bug-free code in HTML.

HTML Elements and Tags

HTML elements are the fundamental elements that makeup web pages. They define the structure and content of a document by encapsulating various sorts of data. Each HTML element is made up of three parts: an opening tag, content, and a closing tag. Here are some important points about HTML elements.

The opening tag indicates the start of an element and is enclosed in angle brackets (< >). It usually contains the name of the element, such as <p> for a paragraph and <a> for a hyperlink.
An element's content refers to the information or data that it shows. For instance, the <p> element's content is the paragraph text.
Closing tags indicate the end of an element and are enclosed in angle brackets (</ >). The ending tag is a forward slash (/) followed by the element name, similar to the opening tag (</p> for a paragraph).
Nested elements: HTML elements can be nested inside one another, resulting in a hierarchical structure. For example, a list (<ul> or <ol>) can have list items (<li>), which can contain additional components such as links or photos.

HTML tags are used to format material within an HTML document. They give web browsers instructions on how to display and understand material. Here is a comprehensive HTML syntax list for HTML tag syntax.

Basic HTML tags: include <tagname> for opening tags and </tagname> for closing tags. Some tags, such as <img> for images and <br> for line breaks, are self-closing and do not need a separate closing tag.
Attributes: Tags may have attributes that provide more information about an element. Attributes are included in the opening tag and written as name-value pairs, such as attribute="value". For instance, the <a> tag for links can include properties such as href to identify the link's destination and target to govern how the link opens.
Semantic tags: HTML5 introduces semantic elements with defined meanings and uses, including <header>, <footer>, <nav>, <article>, <section>, and <aside>. These tags help to structure content in a more understandable and accessible manner.
Custom tags: HTML5 allows developers to create custom tags using the <custom-tagname> structure. To ensure cross-browser compatibility and functionality, these custom tags should be defined and handled effectively with JavaScript or other technologies.

Attributes in HTML

Another important part of HTML syntax is the use of attributes. They allow you to customize and control how elements behave and interact within a web document.

Basic HTML Syntax of Commonly Used HTML Elements

In this section of the article, let me share with you commonly used HTML elements and their respective HTML tags and syntax with example.

HTML images

Let us first start with HTML img syntax which is used to insert images in your web page. Let me share an HTML syntax example for inserting images.

Code:

<!DOCTYPE html>
<html>
<head>
<title> HTML Image Example</title>
</head>
<body>
<h1>My Image Example</h1>
<img src="https://fastly.picsum.photos/id/0/5000/3333.jpg?hmac=_j6ghY5fCfSD6tvtcV74zXivkJSPIfR9B8w34XeQmvU" alt="Example Image" width="500" height="400">
<p>This is an example of an image displayed using the HTML img tag.</p>
</body>
</html>

In the above example,

The <img> tag's src element specifies the image URL (https://fastly.picsum.photos/id/0/5000/3333.jpg?hmac=_j6ghY5fCfSD6tvtcV74zXivkJSPIfR9B8w34XeQmvU).
The alt element gives alternate text ("Example Image") for the image, which is useful for accessibility.
The width and height parameters specify the image's dimensions, which are 500 pixels wide and 400 pixels high.

HTML forms

In this section of the tutorial, let me discuss the form syntax HTML. Here is an example to explain it.

Code:

<!DOCTYPE html>
<html>
<head>
<title> HTML Form Syntax Example </title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" required></textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

In the above example,

<form>: defines a form containing submittable input elements.
action="/submit-form" specifies the URL to which the form data will be sent when submitted.
method="post": This specifies the HTTP method (POST) to be used when submitting the form.
<label>: Labels for form fields.
for="name": associates the label with the input field with the id "name".
<input>: Fields for entering user data.
type="text": This creates a text input box.
type="email": Creates an email input field with built-in validation for email HTML syntax.
type="submit": produces a submit button to complete the form.
<textarea>: Sets up a multi-line text input box for longer communications.
rows="4" and cols="50": Sets the number of rows and columns in the textarea.
The required attribute makes the input fields mandatory, requiring the user to fill them out before submitting the form.

HTML 5 vs Earlier Versions

When HTML5 arrived, it brought a slew of changes in HTML code syntax. Let me discuss some of them here.

Point of difference	HTML5	HTML(earlier versions)
Declaration of document type	HTML5 has a simpler document type declaration: <!DOCTYPE html>.	Earlier HTML versions, such as HTML 4.01, contained longer and more sophisticated doctype declarations, such as <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">.
Case sensitivity	HTML5 is more forgiving about case sensitivity. Tags, attributes, and attribute values may be written in lowercase, uppercase, or a combination of the two.	Earlier versions of HTML, particularly XHTML, were stricter regarding case sensitivity, requiring tags and attributes to be consistently written in lowercase.
Attributes and quotations	HTML5 allows attributes to be written without quotation marks if their values are alphanumeric and do not contain spaces or special characters.	Earlier HTML versions required attribute values to be wrapped in double quotation marks ("), such as attribute="value".
Semantic elements	HTML5 adds semantic components like <header>, <footer>, <nav>, <article>, <section>, <aside>, etc. to offer meaningful structure and increase accessibility.	Earlier HTML versions relied heavily on generic divs and span to structure content.
Multimedia elements	HTML5 added additional elements such as <audio>, <video>, and <canvas> to embed audio/video material and create dynamic graphics.	Earlier versions required third-party plugins, such as Flash, to display multimedia content.
Form elements and attributes	HTML5 introduced additional input types (email, URL, phone number, etc.) and properties (placeholder, mandatory, pattern, autocomplete, etc.) to improve form functionality and validation.	Earlier versions included fewer built-in input types and form validation characteristics.
Deprecated elements and attributes	HTML5 deprecated presentational elements (e.g., <font>, <center>, <strike>) and attributes (e.g., align, background color, border).	Earlier versions of HTML depended heavily on presentational elements and attributes, which are no longer supported in HTML5.

In Conclusion

HTML syntax is very important and should be always kept in mind when writing code in HTML. Not writing code in the correct syntax may lead to bugs and unusual behavior. This tutorial was aimed to be a comprehensive guide to HTML syntax. Now that you know how HTML syntax works, it is surely going to help you write cleaner code in your future web development projects.

To learn more advanced concepts of HTML and web development, I would suggest checking out certified courses from reputed platforms online. A trusted platform that comes to mind is upGrad. Their courses are in collaboration with some of the best universities around the world. Some of the best professors curate their courses.

Frequently Asked Questions

What is HTML syntax?

HTML syntax defines the rules and structure for writing HTML (Hypertext Markup Language) documents. It's similar to the grammar and vocabulary of the web. HTML tags are used to mark various parts inside a document, such as headings, paragraphs, images, and links.

What is the purpose of syntax in HTML?

The goal of HTML syntax is to provide a consistent way to structure and format web publications. This structure is required for web browsers to properly read and display content for users.

What is the correct syntax to write an HTML?

<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>

This is the correct HTML syntax and it consists of the document type declaration (), the base element, the section for metadata and links, and the section for visible contents.

What is the main HTML syntax?

The fundamental HTML syntax consists of elements represented by tags, attributes applied to elements to provide more information, and text content wrapped within tags.

Is HTML syntax easy?

HTML syntax is usually thought to be easier to learn than many other programming or markup languages. Its simplicity and directness add to this sense. The fundamental structure of HTML, which relies on utilizing tags to mark up material, is rather simple to understand.

Can HTML syntax be written in lowercase?

Yes, the HTML syntax can be written in lowercase. HTML is case-insensitive, thus tags, attributes, and attribute values can be expressed in uppercase, lowercase, or a combination of the two. For example, the base <html> element can be written as <html>, <HTML>, <Html>, or <hTmL>.

How can I validate HTML syntax?

HTML syntax can be validated using online validation tools or IDEs that include built-in validators. Online tools, such as the W3C Markup Validation Service, or tools built into IDEs like Visual Studio Code, can verify your HTML code for problems and provide syntax compliance comments.

What are the two HTML syntaxes?

There are two types of HTML syntax: HTML 4.01 (and older versions) and HTML5. Although both syntaxes are extensively used, HTML5 has emerged as the standard because of its simplicity and flexibility.