In this article we will learn HTML attributes, as well as help you distinguish HTML elements.

What is HTML in post? I said that HTML is essentially XML, so it is made up of two main components, which are tag names ( tagname ) and attributes ( attribute ). For XML the tag name can be defined by yourself, but for HTML you must use the tag name found in the HTML Elements list. Otherwise the browser won't understand what tag you're using to output the right format.

So what is the attribute in HTML and what is the HTML element , let's find out right away.

What are html elements?

The html element is the list of html tags that the browser supports, and it is also in the list of html tags that WWW has specified.

The list of HTML tags is so vast that it is difficult to list and use instructions. Therefore, I only list some cards, and in the next articles I will introduce more.

Name card:

The HTML tag name must be in its own list, for example:

• html
• body
• head
• title
• meta
• h1
• h2
• h3
• h4
• h5
• h6
• p
• div
• table
• children
• td
• …

I cannot list them all, but I will cover them gradually in the next articles.

Opening and closing tags

Each tag will have an opening tag ( opentag ) and a closing tag ( closetag ). For example, with the div tag, I would write the following:

 <div>Nội dung bên trong</div>

Missing close tag (quick closetag)

There are also some tags that will miss the closing tag, this type is called a quick closetag, which means it only exists in the opening tag, we will write the following:

 <tagname/>

Example : Input, meta, and link tags

 <input /> <link /> <meta />

Cards nested within cards

HTML tags will be nested together to form a solid layout, now the child tag will be completely inside the parent tag.

Example :

 <div> <input type="text" classname="Class Name" value=""/> </div>

So, in the process of writing HTML code, you must not forget the closing tag , because that way the interface will be easily broken. In case the closing tag is missing, we will use the quick closetag syntax.

Attributes in HTML

We can think of each HTML tag as an object. Now the HTML object will have attributes to describe it. For example, the input tag has the following attributes:

• name : Used to declare the name
• type : Used to set the category
• id : Used to name the key for the card
• value : Used to declare the value for the tag

 <input type="text" name="inputname" id="inputid" value=""/>

Run up you will see a textbox appear, and you can enter data into this box.

Single and double quotes

Newbies will most likely encounter this error. Each attribute in the HTML will have the structure name="value" or name='value' . If you use single quotes ' around the value, the value of value must not contain single quotes. Conversely, if double quotes " are used, the value must not appear in double quotes.

 <input type="text" name="inputname" id="inputid" value="Hello 'freetuts.net'"/>

So, later when you want to display data in the database in a backend language like PHP, JSP, you have to convert those markers to another format.

Extended Attributes

Each HTML tag accepts only certain attributes of its own. But if you want to define another attribute, that's fine. However, the browser won't understand those properties so it won't do anything. Therefore, usually we will combine self-defined properties with Javascript to handle problems. We will learn about this in other lessons.

For example : In the input tag, there is no classname attribute, but we can also add it, but it won't work at runtime.

 <input type="text" classname="Class Name" value=""/>

Epilogue

So in this article, I showed you how to name an HTML tag and its own attributes. This lesson has not yet gone into the common cards so it is still a bit boring, but you have to understand the rules above, in the next lessons you will be easy to learn.