HTML5 examples

Root element

An HTML page is a collection of nested elements that are structured like a tree. Some elements are “related”, like branches emerging from the same trunk. Other elements are “children” of other elements, like a small branch growing out of a large branch. This rule works in the opposite direction – an element that directly contains other elements is called “parent”, and “ancestor” for “grandchild” elements. An element that has no children is called a node. The most important element, which is the ancestor of all the others, is called the “root”. In an HTML document, <html> is always the root.

HTML5 examples

The root element might look like this.

<html xmlns = “http://www.w3.org/1999/xhtml”
lang = “ru”
xml: lang = “ru”>

There is nothing wrong with this code, so if you like it, you can leave it, in HTML5 it is absolutely correct. But some parts are no longer required, so you can remove them, thereby saving a few bytes.

The first thing to discuss is the xmlns attribute, which is left over from XHTML. This attribute indicates that the elements on this page are in the XHTML namespace described at http://www.w3c.org/1999/xhtml. However, HTML5 elements are already in this namespace, so there is no need to declare this on purpose. An HTML5 page will work the same in all browsers, whether the xmlns attribute is present or not.

After removing xmlns, the following remains:

<html lang = “ru” xml: lang = “ru”>

Two attributes, lang and xml: lang both define the language of the current web page. The ru value denotes the Russian language, it can be changed to another language code. Why are two attributes used for the same thing? Again, this is a legacy of XHTML. In HTML5, only the lang attribute has any effect. You can leave xml: lang if you want, but then you need to make sure it contains the same value as lang.

Ready to be thrown away? If so, let’s go. Let’s go, let’s go … we’ve arrived. Here’s what’s left of our root element.

<html lang = “ru”>

And that’s all I wanted to say about it.

The <head> element

The first child at the root is usually the <head> tag. The <head> element contains metadata – information about the page, but not the body of the page itself, which is located in the <body>. The <head> element itself is pretty boring and hasn’t changed into an interesting variation in HTML5.

The good stuff is inside the <head>. And to study them, let’s turn to our example.

<head>
<meta http-equiv = “Content-Type” content = “text / html; charset = utf-8” />
<title> My Blog </title>
<link rel = “stylesheet” type = “text / css” href = “style / style-original.css” />
<link rel = “alternate” type = “application / rss + xml”
title = “Feed my blog”
href = “/ rss.xml” />
<link rel = “search” type = “application / opensearchdescription + xml”
title = “Blog Search”
href = “/ sites / search / search.xml” />
<link rel = “shortcut icon” href = “/ favicon.ico” />
</head>

First, the <meta> tag.