The article provides examples for most tags, but if you wish, you can download the HTML file linked at the end of the article to view it in a text editor and upload it in a browser.

1. DOCTYPE html

You will need this tag at the top of each generated HTML document. This ensures a browser knows that it is reading HTML.

Although this is not really an HTML tag, users should still know about it.

2. html

This is another tag telling the browser that it is reading HTML. Why do we need both tags and? It is really good to know but it is better not to leave it. And at the end of the document, add the tag.

3. head

For basic pages, tags will contain titles.

4. title

This tag identifies the title of the page. All you need to do is place the title in the tag and close it, this example includes the head tag:

 < head > < title > My Website title > head > 

This is the name displayed as a tab title when it is opened in a browser.

5. meta

Like title tags, metadata is placed in the title area of ​​the page (this metadata, unlike metadata from mobile devices). Metadata is primarily used by search engines and is information on your site. There are several different meta fields, but this is one of the most commonly used meta types:

1. Description - Basic description of the page.
2. Keywords - Select keywords that apply to the page.
3. author - Author of the page.
4. viewport - A card ensures that the page can be viewed on all devices.

Here is an applicable example for this page:

 < meta name = " description " content = " A basic HTML tutorial " > < meta name = " keywords " content = " HTML,code,tags " > < meta name = " author " content = " Dann Albright " > < meta name = " viewport " content = " width = device-width, initial-scale = 1.0 " > 

The "viewport" tag will always have 'width = device-width, initial-scale = 1.0' so that the page content can display well on mobile and desktop devices.

6. body

Basically, everything except the title is placed in the body of the web page and placed in the body tag.

 < body > Everything you want displayed on your page. body > 

7. h1

Card

Define a first-level title on the page. Card

define the second level title,

for level three, etc., to the card

. For example, the name of the tag in this article is the second level title.

 < h1 > Big and Important Header h1 > < h2 > Slightly Less Big Header h2 > < h3 > Sub-Header h3 > 

Result:

As you can see, each level will get smaller.

8. p

The paragraph tag starts a new paragraph, it usually consists of two line breaks. For example, look at the distance between the previous line and the following line. That's what card

will do.

 < p > Your first paragraph. p > < p > Your second paragraph. p > 

Result:

Your first paragraph.

Your second paragraph.

You can also use CSS styles in paragraph tags, as follows:

 < p style =" font-size : 120% ; " > 20% larger text p > 

Result:

20% larger text

9. br

Line break tag inserts a single line break:

 < p > The first line. < br > The second line (close to the first one). p > 

Result:

The first line.
Second line (close to the first one).

Note: sometimes you may see this tag written:
or
. It performs the same function (slashes make the tag readable in XHTML).

10. strong

This tag identifies important text, meaning that the text will be highlighted. However, CSS can be used to display different text . However, you can use to bold text.

 < strong > Very important things you want to say. strong > 

Result:

Very important things you want to say.

If you are familiar with tags for bold text, you can still use it. However, there is no guarantee that it will continue to function in future versions of HTML, but for now, it still works.

11. em

Like cards and , and the same. The tag identifies the text to be emphasized, meaning it will be italicized. Again, use CSS to make the text emphasized differently.

 < em > An emphasized line. em > 

Result:

An emphasized line.

The card is still active, but may not be available for future versions of HTML.

twelfth.

A link tag or anchor for creating links. A simple link is as follows:

The "href" attribute determines the destination of the link. In many cases, this will be another website. It can also be a file like image or PDF file. Other useful properties include "target" and "title". The target attribute is used to open a link in a new tab or window, as follows:

The "title" attribute creates a tooltip. Hover over the link below to see what it means.

13. img

If you want to embed an image in your page, you will need to use the image tag. The easiest way to use it is to simply add the source of the image in the "src" attribute, as follows:

 < img src = "/photos/image/2017/10/23/code-html-3.jpg " > 

Result:

However, there are some other properties that users can use such as 'height' 'width' and "alt".

 < img src = "/photos/image/2017/10/23/code-html-3.jpg " width = " 320 " alt = " the name of your image " > 

Result:

The "height" and "width" attributes determine the height and width of the image. In general, one dimension should be set, the other will be automatically corrected. If both are used, the image will be distorted or deformed.

The "alt" tag tells the browser which text to display if the image is not displayed and it is best to include any image. If someone has a particularly slow connection or uses an old browser, they may still be able to see what is on your site.

14. ol

The sorted list tag allows you to create an ordered list. In general, you will receive a numbered list. Each item in the list needs a category tag (

1. ), so your list will look like this:

 < ol > < li > First thing li > < li > Second thing li > < li > Third thing li > ol > 

Result:

1. First thing
2. Second thing
3. Third thing

In HTML5, you can use

to reverse the order of the numbers and can set the value starting with the start attribute. The "type" attribute allows you to tell the browser which type of symbol to use for items in the list. It can be set to "1", "A", "a", "I" or "i", set the list to display with the specified symbol.

15. ul

Unordered lists are much simpler than ordered lists.

 < ul > < li > First item li > < li > Second item li > < li > Third item li > ul > 

Result:

1. First item
2. Second item
3. Third item

The unordered list also has the "type" attribute and you can set it to "disc", "circle" or "square".

16. table

If you want to use rows and columns to segment information on the page, you can use some tags to create and edit tables. Take a look at this example:

 < table > < tbody > < tr > < th > First column th > < th > Second column th > tr > < tr > < td > Row 1, column 1 td > < td > Row 1, column 2 td > tr > < td > Row 2, column 1 td > < td > Row 2, column 2 td > tbody > table > 

Each tag includes a title (you can sometimes see them wrapped in tags). The card sets the body of the table. The tag creates a new table row and the tag identifies a cell in that row.

17. blockquote

When quoting a website or another person's words to make a difference with the rest of the document, you can use the blockquote tag. All you need to do is leave the citation in the tag open and close the blockquote.

 < blockquote > I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain. blockquote > 

Result:

I phải không fear. Fear is a mind-killer. Fear là nhỏ-death mà sẽ có Total obliteration. I sẽ mặt không fear. I sẽ phép nó để pass qua bạn và qua me. Và khi nó đã bỏ qua past vào, sẽ chuyển lại kích cỡ ảnh trong ảnh để xem đường dẫn. Where the fear đã bị bỏ qua sẽ không. Only I will remain.

The exact format used may depend on the browser you are using or the site's CSS. But the card remains the same.

With these 17 HTML tags you can create a simple website. To see how these tags are matched, you can load the HTML template and open it in the browser or in a text editor to see exactly how this code works.