In this article from the section “for beginners,” we will talk in simple terms about the fifth version of the HTML language, which is currently under development. However, even though HTML5 is far from perfect, its performance is already widely recognized.
As you know, HTML (HyperText Markup Language) is a language for the markup of web pages. Its main purpose is to interpret information transferred over the network in the form of readable content. Through HTML, we see the Internet as it is today, i.e. beautiful, colorful, and versatile. Well, the appearance of a new version of HTML is undoubtedly a great event, which will stir the minds of the Internet community for a long time.
HTML 4 vs. HTML 5: Core differences
First, we should note that HTML4 was completely finished in the late ‘90s, while the work on HTML5 started relatively recently – somewhere in 2005. The developers of the new version of HTML5 focused on compatibility with all current popular browsers – as a result, there were no super revolutionary changes in terms of displaying web pages, but the potential ability to display content was widened.
For example, in HTML5 you can see a certain number of new elements – there are section, nav, header, article, and footer. Recall that previously there was only one element – div. Standard IMG is now added with audio and video tags. In addition, elements such as font, center, etc., which went out of fashion a long time ago, are eliminated.
Since the main emphasis is placed on the conflict-free nature of the new version of the language with the older browsers’ engines, it is possible to completely ignore the display rules specified in HTML5 by such browsers, which in no case affects the quality of visualization of downloaded content.
Structure and markup of HTML5 language
As you know, the old version relied entirely on the div element. In other words, everything related to sidebars, navigation bars, menus, sections, etc. was subject to this element. In HTML5 there are alternatives, which undoubtedly made the structure of the web page more clear and functional.
- Header (not to be confused with head) – you can specify not only the title of the page but also subheadings;
- Nav – this element is intended only for links navigation, which is extremely useful for creating intra-page navigation, as well as for cross-page navigation.
- Section – the element is interpreted as a public section. For example, it can be used when a predetermined block of text must set a special title or paragraph.
- Article – with this element, you can specify independent zones of text content on the page. For example, the selection of important publications from the archive, broadcasting current news, the latest forum posts, etc. Besides, you can use the article elements in the usual mode as well – i.e. define all content of the page by it.
- Footer – the bottom element of the page or “the final block section”. It is presented as a header. There may be placed messages relating to the above content (e.g., copyrights), etc. things.
Now a few words about the innovations that relate to the block-level elements.
- Aside – this container can be used for materials that are considered auxiliary. For example, quotes, footnotes separated from the main narrative, columns with explanatory text, etc.
- Dialog – a container that allows you to beautifully design a dialogue.
- Figure – a container that allows you to describe any graphic image with a text caption.
What about multimedia elements?
In principle, it has long been expected that such elements would appear sooner or later – and now, as of today, we already have video and audio. The main purpose of this innovation is to integrate multimedia content more closely with the main part of the web page.
Another point – through these elements there is no need to use third-party products (plugins) to view and listen to multimedia content.
Regarding interactivity, HTML5 didn’t stay indifferent either, with new elements added as well. Here are some of them:
- Details – through this element you can pack optional information.
- Datagrid – used to display table data. The standard tables are different in that the visitor can control the display of information, i.e., remove the table, move columns, etc.
- Menu, command – elements that directly relate to the visual representation of all menus available on the site.
Another innovation – these elements are responsible for the level of text. For example, in the new version, you can set such parameters as the progress of some process, dynamic display of time, dates, etc.
And in conclusion, a couple of words about the innovations related to the API!
The first thing that strikes the eye is the expansion of existing DOM interfaces and adding new APIs – data can be stored in the browser, drag-and-drop technology was implemented, online drawing became available, etc.
Let’s put an end here since our goal was just to introduce the new technology to a novice webmaster and not to overload him/her with technical information that was difficult to digest. If you’re interested in the structure of the new HTML5 language and you’re ready to start learning it, you can easily google a lot of useful materials!