What is HTML 5?

What is HTML 5?

All HTML topics on our site before this one are explained using HTML 4.1 data lineage. As of now, the most used Html version in the world is the Html 4.1 version. 

Although the Html 5 version is still in the testing phase, it can work very well with the latest versions of browsers and provides great advantages to avoid unnecessary code crowds. 

The biggest innovation brought by HTML 5 is the new HTML tags. Many new tags such as header, section, nav, footer have been used. The names of these new tags were determined by examining the preferences of web designers.

According to the studies of web designers, they use layers to accommodate the site's header information (div) the most "header" has been shown to give his name and a new label was created with this name.

Therefore, we can create the header part that we used to create as <div id="header">, now with the <header> tag. We can prepare our pages easily and simply with Html 5, using other tags that are suitable for their purpose.

First of all, let's take a look at the most important of the new tags that come with Html 5. You can find other tags that are not listed here by searching the internet.

HTML 5 Tags

header tag

The header information of the site or page is located here.

section tag

It includes the main content part of the sites.

article tag

In the article style, the subject is the part where the narration and textual contents are included .

footer tag

It is located at the bottom of the site. Contains footer information.

nav tag

It is the part where navigation is provided on the site with elements such as the menu.

hgroup tag

It is a title group formed by grouping elements such as H1, H2 together. If more than one title tag will be used, it can be included in the hgroup tag.

embed tag

It was used a lot in the past to embed flash animation (swf) files on our page. With the embed tag, we can add many different types of files such as images, audio, video, animation to our page.

In the embed tag, the type of the file (MIME type) is specified with the type parameter. For example, to add mp4 file, the type parameter is used like this:

The value to be written to the type parameter depends on the type of the file. You can click to see the list of all MIME types.

video tag

It is used to add the video file wherever we want on our page. Many video formats are supported.

As in the example above, which file to use is specified with the source tag. The reason for using more than one source tag is so that if the visitor's browser cannot run the first file, it will try the second one. If no file can be played, the text at the end will be displayed instead of the video.

audio tag

By adding an audio player module to the page, it enables the desired audio file to be played.

figure tag

Related images, graphics, etc. are located here. Footer can be given to the object used using the <figcaption> tag.

acid tag

Important and relevant information about the content in its location can be written between the acid tags.

mark tag

It determines the keywords that are especially emphasized in the article. It is very important for search engines. 

canvas tag

Creates a canvas area on the page. Drawing on canvas can be done with javascript.

progress tag

Adds a trading process indicator.

caption tag

Arranges texts that are thought of as headings.

details and summary tags

It is the structure that opens or hides the content part by opening it when a title is clicked. This job, which can normally be done with jquery or javascript, is extremely simplified. 

time tag

Includes date and time data.

datalist tag

Allows auto-completion to be given to elements such as a drop-down list. In other words, the user can select from the list with the mouse, and the possible options are shown at the bottom while typing in the box. This feature only works in Chrome for now.

EXERCISES