page

This block provides templates that create a set of top-level HTML elements for a page: <html>, <head>, and <body>.

Overview

Special fields of the block

Field	Type	Description
doctype	`String`	Use this field to redefine the DTD string for the current document.
title	`String`	Use this field to specify the content of `<title>`.
favicon	`String`	Use this field to specify the URL of the favicon for the page.
head	`BEMJSON`	Use this field to add content to `<head>`.
styles	`BEMJSON`	Use this field to connect CSS style sheets to the document.
scripts	`BEMJSON`	Use this field to embed scripts in the body of the document.
content	`BEMJSON`	Use this field to set the page content.

Elements of the block

Element	Usage	Description
css	`BEMJSON`	Connects CSS using a URL or a string.
js	`BEMJSON`	Connects JS using a URL or a string.
meta	`BEMJSON`	Creates `<meta>` HTML elements.

Special fields of block elements

Element	Field	Type	Description
css	url	`String`	Sets the URL for downloading styles.
	content	`String`	Sets styles in string format.
js	url	`String`	Sets the URL for downloading a script.
	content	`String`	Sets scripts in string format

Public block technologies

The block is implemented in:

bh.js
bemhtml

Description

This block is responsible for creating top-level HTML elements, connecting CSS, JS, and <meta> elements to a page, and defining the title. The BEMJSON declaration for the block and its elements have special fields reserved for this purpose.

Special fields of the block

`doctype` field

Type: String.

Use this field to explicitly set the DTD (Document Type Definition) for the current document. If omitted, <!DOCTYPE html> is used by default.

`title` field

Type: String.

Title of the page. It becomes the <title> HTML element.

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>title</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
</head>

<body class="page">Block page</body>

</html>

{
    block: 'page',
    title: 'title',
    content: 'Block page'
}

[
    'page'
]

`favicon` field

Type: String.

Use this field to specify the URL of the favicon for the page:

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>title</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
    <link rel="shortcut icon" href="favicon.ico">
</head>

<body class="page">Page with users favicon.ico</body>

</html>

{
    block: 'page',
    title: 'title',
    favicon: 'favicon.ico',
    content: 'Page with users favicon.ico'
}

[
    'page'
]

`head` field

Type: BEMJSON.

Use this field to add content to the <head> HTML element that is defined in the block template:

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>title</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
    <script src="jquery-min.js"></script>
    <meta name="description" content="Yet another webdev blog">
</head>

<body class="page">Page with JS and meta-data</body>

</html>

{
    block: 'page',
    title: 'title',
    head: [
        {
            elem: 'js',
            url: 'jquery-min.js'
        },
        {
            elem: 'meta',
            attrs: {
                name: 'description',
                content: 'Yet another webdev blog'
            }
        }
    ],
    content: 'Page with JS and meta-data'
}

[
    'page'
]

`styles` field

Type: BEMJSON.

Use this field to connect CSS:

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>title</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
    <link rel="stylesheet" href="_index.css">
</head>

<body class="page">Page with CSS</body>

</html>

{
    block: 'page',
    title: 'title',
    styles: {
        elem: 'css',
        url: '_index.css'
    },
    content: 'Page with CSS'
}

[
    'page'
]

`scripts` field

Type: BEMJSON.

Embeds JS in the body of the page, at the end of the <body> HTML element:

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>title</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
</head>

<body class="page">Page with JS in body
    <script src="_index.js"></script>
</body>

</html>

{
    block: 'page',
    title: 'title',
    scripts: {
        elem: 'js',
        url: '_index.js'
    },
    content: 'Page with JS in body'
}

[
    'page'
]

`content` field

Type: BEMJSON.

Use this field to set the page content.

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>title</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
</head>

<body class="page">
    <div class="link link_pseudo_yes link_togcolor_yes link_color_green">Pseudo link</div>
</body>

</html>

{
    block: 'page',
    title: 'title',
    content: {
        block: 'link',
        mods: {
            pseudo: 'yes',
            togcolor: 'yes',
            color: 'green'
        },
        url: '#',
        target: '_blank',
        title: 'Click me',
        content: 'Pseudo link'
    }
}

[
    'page',
    {
        block: 'link',
        mods: {
            pseudo: 'yes',
            togcolor: 'yes',
            color: 'green'
        }
    }
]

Elements of the block

`css` element

Connects CSS using a URL or a string. Depending on whether the url field is specified in the element declaration, an HTML element is created with the tag:

<link> and the stylesheet property, if url is specified.
<style>, if url is omitted. In this case, it is assumed that the element content is passed using the content property in the element's BEMJSON declaration.

Specialized `content` field

Type: String.

Use this field for explicitly passing the content of the <style> HTML element:

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page title</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
    <style>
        .page {
            color: #f00
        }
    </style>
</head>

<body class="page">Page with tag &lt;style&gt;</body>

</html>

{
    block: 'page',
    title: 'Page title',
    styles: {
        elem: 'css',
        content: '.page { color : #f00 }'
    },
    content: 'Page with tag <style>'
}

[
    'page'
]

Specialized `url` field

Type: String.

Sets the URL for downloading CSS. The value of the url field in the BEMJSON declaration is passed to the href property in the created HTML element.

`js` element

Connects JS using a URL or a string. Creates the <script> HTML element.

Specialized `content` field

Type: String.

Use this field for explicitly passing the content of the <script> HTML element:

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page title</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
</head>

<body class="page">Page with tag &lt;script&gt;
    <script>
        console.log(document.title)
    </script>
</body>

</html>

{
    block: 'page',
    title: 'Page title',
    scripts: {
        elem: 'js',
        content: 'console.log(document.title)'
    },
    content: 'Page with tag <script>'
}

[
    'page'
]

Specialized `url` field

Type: String.

Sets the URL for downloading a script. The value of the url field in the BEMJSON declaration is passed to the src property in the created HTML element.

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page title</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
    <link rel="stylesheet" href="_index.css">
</head>

<body class="page">Page with tag style</body>

</html>

{
    block: 'page',
    title: 'Page title',
    styles: {
        elem: 'css',
        url: '_index.css'
    },
    content: 'Page with tag style'
}

[
    'page'
]

`meta` element

Creates <meta> HTML elements and defines user metadata for them. Metadata is passed as keys and values of attribute hashes, the attrs properties in the BEMJSON declaration of the element:

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>title</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
    <link rel="stylesheet" href="example.css">
    <meta name="keywords" content="js, css, html">
</head>

<body class="page">Page with CSS и meta-data</body>

</html>

{
    block: 'page',
    title: 'title',
    head: [
        {
            elem: 'css',
            url: 'example.css'
        },
        {
            elem: 'meta',
            attrs: {
                name: 'keywords',
                content: 'js, css, html'
            }
        }
    ],
    content: 'Page with CSS и meta-data'
}

[
    'page'
]

For more information, see the documentation for <meta> at MDN.

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Простой пример html/head/body-обвязки страницы</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
    <link rel="stylesheet" href="_10-simple.css">
    <script src="_10-simple.js"></script>
    <meta name="keywords" content="BEM">
    <link rel="shortcut icon" href="//bem.info/favicon.ico">
</head>

<body class="page">
    <div class="bla">Простой пример обвязки страницы</div>
</body>

</html>

{
    block: 'page',
    title: 'Простой пример html/head/body-обвязки страницы',
    favicon: '//bem.info/favicon.ico',
    head: [
        {
            elem: 'css',
            url: '_10-simple.css'
        },
        {
            elem: 'js',
            url: '_10-simple.js'
        },
        {
            elem: 'meta',
            attrs: {
                name: 'keywords',
                content: 'BEM'
            }
        }
    ],
    content: {
        block: 'bla',
        content: 'Простой пример обвязки страницы'
    }
}

[
    'page',
    'bla'
]

Open in a new window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Пример произвольного doctype</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
</head>

<body class="page">Произвольный doctype</body>

</html>

{
    block: 'page',
    doctype: '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
    title: 'Пример произвольного doctype',
    content: 'Произвольный doctype'
}

[
    'page'
]

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Пример подключения es5-shims для IE</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>&lt;!--[if lt IE 9]&gt;
    <script src="https://yastatic.net/es5-shims/0.0.1/es5-shims.min.js"></script>&lt;![endif]--&gt;</head>

<body class="page">Подключение es5-shims для IE</body>

</html>

{
    block: 'page',
    title: 'Пример подключения es5-shims для IE',
    head: [
        '<!--[if lt IE 9]>',
        {
            elem: 'js',
            url: 'https://yastatic.net/es5-shims/0.0.1/es5-shims.min.js'
        },
        '<![endif]-->'
    ],
    content: 'Подключение es5-shims для IE'
}

[
    'page'
]

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Простой пример html/head/body-обвязки страницы</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
    <link rel="stylesheet" href="_10-simple.css">
    <script src="_10-simple.js"></script>
    <meta name="keywords" content="BEM">
    <link rel="shortcut icon" href="//bem.info/favicon.ico">
</head>

<body class="page">
    <div class="bla">Простой пример обвязки страницы</div>
</body>

</html>

{
    block: 'page',
    title: 'Простой пример html/head/body-обвязки страницы',
    favicon: '//bem.info/favicon.ico',
    head: [
        {
            elem: 'css',
            url: '_10-simple.css'
        },
        {
            elem: 'js',
            url: '_10-simple.js'
        },
        {
            elem: 'meta',
            attrs: {
                name: 'keywords',
                content: 'BEM'
            }
        }
    ],
    content: {
        block: 'bla',
        content: 'Простой пример обвязки страницы'
    }
}

[
    'page',
    'bla'
]

Open in a new window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Пример произвольного doctype</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
</head>

<body class="page">Произвольный doctype</body>

</html>

{
    block: 'page',
    doctype: '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
    title: 'Пример произвольного doctype',
    content: 'Произвольный doctype'
}

[
    'page'
]

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Пример подключения es5-shims для IE</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>&lt;!--[if lt IE 9]&gt;
    <script src="https://yastatic.net/es5-shims/0.0.1/es5-shims.min.js"></script>&lt;![endif]--&gt;</head>

<body class="page">Подключение es5-shims для IE</body>

</html>

{
    block: 'page',
    title: 'Пример подключения es5-shims для IE',
    head: [
        '<!--[if lt IE 9]>',
        {
            elem: 'js',
            url: 'https://yastatic.net/es5-shims/0.0.1/es5-shims.min.js'
        },
        '<![endif]-->'
    ],
    content: 'Подключение es5-shims для IE'
}

[
    'page'
]

Methodology

Technology

Toolbox

Libraries

Tutorials

page

Overview

Special fields of the block

Elements of the block

Special fields of block elements

Public block technologies

Description

Special fields of the block

`doctype` field

`title` field

`favicon` field

`head` field

`styles` field

`scripts` field

`content` field

Elements of the block

`css` element

Specialized `content` field

Specialized `url` field

`js` element

Specialized `content` field

Specialized `url` field

`meta` element

Send feedback

Methodology

Technology

Toolbox

Libraries

Tutorials

page

Overview

Special fields of the block

Elements of the block

Special fields of block elements

Public block technologies

Description

Special fields of the block

doctype field

title field

favicon field

head field

styles field

scripts field

content field

Elements of the block

css element

Specialized content field

Specialized url field

js element

Specialized content field

Specialized url field

meta element

`doctype` field

`title` field

`favicon` field

`head` field

`styles` field

`scripts` field

`content` field

`css` element

Specialized `content` field

Specialized `url` field

`js` element

Specialized `content` field

Specialized `url` field

`meta` element