codedamn

HTML Syntax – HTML Style Guide and Best Practices for Beginners

HTML Syntax – HTML Style Guide and Best Practices for Beginners

If you are learning HTML, it is necessary to master the HTML syntax so you can write the best possible HTML code.

So, while writing HTML, there are rules and guidelines you should follow. There are also other things to follow that are not rules but conventions.

You should follow these rules and conventions so other people you’re working with can understand your code.

In this article, you will learn how the HTML syntax works – how tags, elements, and attributes should be written.

I will also show you some comparisons and tips, so you can learn good HTML syntax from bad ones.

HTML Syntax for Tags

Tags are the basic building blocks of HTML. They are the encodings that make the content of a web page render as it’s supposed to be.

These encodings in question are the lesser than (<), slash (/), and greater than (>) symbols wrapped around an element. You will see what elements are soon.

HTML tags fall into two categories – opening tags and closing tags.

Opening tags follow the pattern <x>, with x being the element. For example <p> for paragraph. If you want to add an attribute, you put it in the opening tag too. I will make a detailed touch on HTML attributes and show you a beautiful analogy of it soon in this article soon.

Closing tags follow the patter </x>. With x being the element. For example, </p> – the closing tag for paragraph.

You can also call the opening tag a start tag, and the closing tag an end tag.

A full example of tag looks as shown below:

html opening tag and closing tag

HTML Syntax for Elements

An HTML element is the tag and content combined. Remember that <h1> is the opening tag for heading one and </h1> is the closing tag for heading one.

To display the heading, you put the content between the opening and closing tags:

<h1>Welcome to Codedamn</h1>Code language: HTML, XML (xml)

This results in a big text in the browser:

output of html syntax for h1 tag

That is what makes an HTML element. The infographic below can help you understand HTML elements better:

html syntax for an element

You can also nest an element inside another element. In the example below, I nest a link inside a paragraph:

<p>Welcome to the best website to learn how to code interractively,  
    <a href="https://codedamn.com">Codedamn</a>. 
</p> Code language: HTML, XML (xml)

Some elements don’t have a closing tag, for example, the meta tags, a tag, and an image tag. These elements are called void tags or self-closing tags.

In HTML5, you can show when a tag self-closes by adding an optional trailing slash. For example, <meta/> for <meta> and <img /> for <img>

HTML Syntax for Attributes

Attributes are added to the opening tags to store extra information about an element. For example, you can add id and class attributes to style an element or select it with JavaScript.

The basic syntax for an attribute looks as you can see below:

<p class="welcome-message">Welcome to the best website to learn how to code interractively</p> Code language: HTML, XML (xml)

In the code above, the word class is the attribute name and welcome-message is the value of the attribute.

A better way to show you what an attribute looks like is presented in the infographic below:

At the end of it all, a fully written HTML element looks this way:

a complete html element

HTML Syntax Conventions to Follow

The following conventions won’t stop HTML from working, but they will make your HTML more readable.

Name your File in Lowercase

It is weird to have an HTML file named this way:

the right way of naming html file

The right way to name an HTML file is this:

the wrong way of naming html file

I can’t say you should not name your HTML file the way you want, but make the name readable. It is a common practice to name your only or first HTML file index.html.

You can use both .htm and .html filenames. Browsers treat both of them the same way.

Do Not Omit the , , , , and Other Boilerplate Tags

You should always add the following boilerplate code to your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Name</title>
</head>
<body>
    <!—Your HTML codes go here -->
</body>
</html>
Code language: HTML, XML (xml)

The first thing you should do while writing HTML is to declare a document type as shown below:

<!DOCTYPE html>Code language: HTML, XML (xml)

It is necessary to declare a document type so different browsers would parse your HTML the same way.

HTML would work without the <html> and <body> tags. However, it is necessary to add both the <html> and <body> tags so you don’t get errors while adding JavaScript to your HTML.

Do Not Skip the <title> tag too. Again, HTML can parse without the <title> tag, but it’s a bad practice for SEO.

In addition, you should add the title tag so your users can understand what the particular web page is about.

Some users are knowledgeable enough to know that the title of a page shows when they hover on a browser tab.

output of title html tag in the browser

So, if you don’t add a title tag, you’re not doing enough to give your users an excellent user experience.

The Meta Tags help you add various beneficial information that could play a crucial role in SEO.

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Code language: HTML, XML (xml)

Use Lowercase Letters for Element and Attribute Names

HTML is not case sensitive, so it won’t stop you from using only uppercase, lowercase letters, or even mixing them.

However, it is a convention to use lowercase letters for element and attribute names because it looks cleaner and is what everyone uses.

Bad:

<p class="PARAGRAPH-ONE"></p>Code language: HTML, XML (xml)

Good:

<p class="paragraph-one"></p>Code language: HTML, XML (xml)

Add Quotes to Attribute Values

It is important to add double quotes or single quotes to attribute values. This is because you might have to add more than one attribute to an element.

If you don’t add quotes to the values of the attributes, it would be difficult to identify individual attributes and read them.

Bad:

<p class= unquoted-classname </p>Code language: HTML, XML (xml)

Good:

<p class="quoted-classname"></p>Code language: HTML, XML (xml)

Always Add Closing Tags to Elements

HTML parses if you don’t add closing tags to an element:

But it is necessary to add the closing tags so you and other people reading your code can easily identify where an element ends.

Bad:

<h1>Welcome to CodedamnCode language: HTML, XML (xml)

Good:

<h1>Welcome to Codedamn</h1>Code language: HTML, XML (xml)

Always Specify Alternative Texts for Images

It is important to specify alternative texts for images so search engines can understand the images better.

It is also important to specify alternative texts for a better user experience and accessibility.

Bad:

<img src="codedamn.png" alt="">Code language: HTML, XML (xml)

Good:

<img src="codedamn.png" alt="Codedamn logo">Code language: HTML, XML (xml)

Add Spaces and Indentations to Long Lines of Code

For readability, you should avoid an HTML code like this:

<main>
<h1>Programming Languages</h1>
<h2>Python</h2>
<p>
Python is the most popular programming language. It is a multipurpose
language you can use for Data Science, web development, automation,
Machine Learning, and many other things.
</p>
<h2>JavaScript</h2>
<p>
JavaScript is the language of the web. You can use it to make websites,
mobile apps, web servers and desktop apps.
</p>
</main>
Code language: HTML, XML (xml)

You should write the same code like this:

<main>
    <h1>Programming Languages</h1>

    <h2>Python</h2>
    <p>
      Python is the most popular programming language. It is a multiputpose
      language that can ber used for Data Scienc, web development, automation,
      Machine Learning, and many other things.
    </p>

    <h2>JavaScript</h2>
    <p>
      JavaScript is the language of the web. You can use it to make websites,
      mobile apps, web servers and desktop apps.
    </p>
</main>
Code language: HTML, XML (xml)

Always Add HTML Comments Where Necessary

If you’re working in a team, you should save your teammates some time and effort by commenting on your code.

The HTML comment syntax falls into two categories: single-line comments and multi-line comments

HTML single-line comment is done this way:

<em><!-- Single line comment --></em>Code language: HTML, XML (xml)

And an HTML multi-line comment is done like this:

<!-- 
    This 
    is
    a 
    multi-line
    comment
-->
Code language: HTML, XML (xml)

Conclusion

I hope with this article, you have learned everything necessary to write HTML in the proper way.

To get a hang of the right way to write HTML, don’t hesitate to always come back to this article.

If you just started learning HTML, we have a detailed article on what HTML stands for and means.

If you want to learn HTML in a better way, we have an interactive HTML and CSS course for you.

We even have an advanced HTML5 and CSS3 course that can show you deeper things about HTML you won’t see anywhere else.

If you write HTML and you want to validate it, you can use this online HTML syntax checker.

Thank you for reading.

Happy coding ?

Sharing is caring

Did you like what kolade wrote? Thank them for their work by sharing it on social media.

0/10000

No comments so far