Forum

Methodology

Toolbox

Platform

Community

desktop
touch-pad
touch-phone

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

favicon field

Type: String.

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

Open in a new window

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

styles field

Type: BEMJSON.

Use this field to connect CSS:

Open in a new window

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

content field

Type: BEMJSON.

Use this field to set the page content.

Open in a new window

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

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

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

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

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

Open in a new window
Open in a new window
Open in a new window
Open in a new window