Opening and Closing Tags

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:

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 to name an HTML file is this:

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:

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:

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 and tags. However, it is necessary to add both the and tags so you don’t get errors while adding JavaScript to your HTML.

Do Not Skip the tag too. Again, HTML can parse without the 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.

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.

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

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.

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

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.

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

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.

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

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> em>
Code language: HTML, XML (xml)

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

 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.

Sharing is caring

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

Источник

Self Closing Tags In HTML

In this tutorial, you will learn about self closing tags in HTML, how to use them, and close the self closing tag. Also, you will go through various self closing tags with descriptions and examples.

HTML Self Closing Tag

A self closing tags in HTML are the type of HTML tags that need not to be closed manually by its closing tag, which means there is no saperate closing tag for it as .

A few examples of self closing tags are , ,
,

, etc.

Self closing tags are also alternatively known as void tags, empty tags, singletons tags, etc. i.e these tags do not have contents and also can not have any child.

The following are some examples of self closing tags in HTML.

None of the self closing tags in the above code snippets has content within them, nor do they have any child nodes.

Here are of closing tags in HTML (tags that need to be closed) are

.

,

.

,

, . ,

, etc.

The correct way to write a self closing tag

In HTML, closing a self closing tag with its closing tag is invalid. For example, closing a tag like is not valid.

But the question is do we need to close these tags by using/> at the end of the tag. i.e
, , etc or we just need to end these tags with > .

The fact is there is no need to close self closing tags by a slash/> at the end of the tag. Although many people use it but there is no meaning of slash at the end of the start tag even though you use it is ignored by the browsers.

But when using XHTML it is the rule to close the self closing tag by a slash at the end, so for the convenience of XHTML users HTML also allows closing tag like XHTML in HTML but simply ignores the slash.

Even if you close the tag browser remove the slashes and then render the element. You can see the picture below to understand.

Note — Even if the browser ignores the closing slash in void tags, it’s good practice to close it because:
1. in frameworks like react js if these are not close, it creates an error
2. if you want your document to be readable by an XML parser then must close all elements

List of self closing tags in HTML

Here is a list of all the self closing tags in HTML with little description of all. Non of self closing tags can have content or child node.

Self closing tags in HTML example

Let’s see a few examples of self closing tags.

Источник

Html closing tag syntax

HTML Tutorials — Herong’s Tutorial Examples — v2.30, by Herong Yang

∟ Opening and Closing Tags of Elements

This section describes the syntax of entering opening tags and closing tags to create HTML elements. It’s better to have all elements closed explicitly with closing tags.

HTML documents are made up by a collection of nested HTML elements. Each element has a required opening tag and an optional closing tag. Here are some basic guidelines on how to enter HTML tags to create HTML elements.

1. Each HTML element must start with an opening tag in the format of:

2. An HTML element that supports content must have the content immediately following the opening tag like this:

3. An HTML element that supports content must have a closing tag or let the browser to determine where is the end. It is strongly recommended that you always provide closing tags yourself like this:

4. An HTML elements that does not support content must have no closing tag or combine the opening tag and closing tag into a short-hand format. It is strongly recommended that you always use the short-hand format like this:

5. HTML element tag names are case insensitive. For example, «body» and «BODY» are identical. It is strongly recommended that you always use lower case letters in tag names.

Here is a good example of HTML document that have some elements without closing tags and some with closing tags:

        
Tags are used to delimit the start and end of elements in the markup. 
 
Tags are used to delimit the start and end of elements in the markup.
 
  

Источник