Основы шаблонов

Шаблон — это текстовый файл, определяющий структуру, или внешний вид выходного файла, с предусмотренными позициями, в которые будут помещаться данные при отображении по шаблону (в Express шаблоны также называют представлениями).

Выбор шаблонов Express

В Express можно использовать много движков отображающих шаблонов ( template rendering engines). В этом руководстве для шаблонов будет использован Pug (ранее известный как Jade) . Это наиболее популярный в Node язык шаблонов, который о себе заявляет так: чистый, чувствительный к пробелам синтаксис для написания HTML, на который сильно повлиял Haml.

Разные языки шаблонов используют различные подходы для определения внешнего вида и разметки позиций для данных—некоторые используют HTML для определения внешнего вида, тогда как другие применяют различные форматы разметки, которые затем должны компилироваться в HTML. Pug — второго типа; он использует представление (representation) HTML, в котором первое слово в каждой строке обычно представляет элемент HTML, а отступы в следующих строках применяются, чтобы представить вложенные элементы. Результатом является определение страницы, которое транслируется непосредственно в HTML, и которое, вероятно, более краткое и легче читается.

Примечание: недостаток применения Pug — это чувствительность к отступам и пробелам (если добавить лишний пробел в «плохом» месте, можно получить невразумительный код ошибки). Однако, если ваши шаблоны уже действуют, их очень легко читать и поддерживать.

Конфигурация шаблона

Когда создавался каркас (the skeleton website) веб-сайта LocalLibrary, он был настроен на использование Pug . Можно было заметить, что модуль pug включён в зависимости в файле package.json, и установлен (app.set(. )) как движок представлений в файле app.js. Эта установка показывает,, что движок представлений — pug, и что Express должен искать шаблоны в подкаталоге /views.

// View engine setup. app.set("views", path.join(__dirname, "views")); app.set("view engine", "pug"); 

Если посмотреть содержимое каталога views, можно увидеть файлы с расширением .pug, в которых шаблоны представлений по умолчанию. Это представление для домашней страницы (index.pug) и базовый шаблон (layout.pug), который следует заменить нашим содержимым.

/express-locallibrary-tutorial //the project root /views error.pug index.pug layout.pug

Синтаксис шаблонов

Пример файла шаблона (ниже) демонстрирует многие наиболее полезные черты Pug.

Сначала отметим, что файл отражает структуру типового HTML-файла, причём первое слов в (почти) каждой строке является элементом HTML, а отступы используются, чтобы показать вложенные элементы. Так, например, элемент body находится внутри элемента html , а элементы p (параграфы) — внутри элемента body, и так далее. Невложенные элементы (т.е. индивидуальные параграфы) располагаются в отдельных строках.

doctype html html(lang="en") head title= title script(type='text/javascript'). body h1= title p This is a line with #[em some emphasis] and #[strong strong text] markup. p This line has un-escaped data: ! is emphasised'> and escaped data: # is not emphasised'>. | This line follows on. p= 'Evaluated and escaped expression:' + title // You can add single line JavaScript comments and they are generated to HTML comments //- Introducing a single line JavaScript comment with "//-" ensures the comment isn't rendered to HTML p A line with a link a(href='/catalog/authors') Some link text | and some extra text. #container.col if title p A variable named "title" exists. else p A variable named "title" does not exist. p. Pug is a terse and simple template language with a strong focus on performance and powerful features. h2 Generate a list ul each val in [1, 2, 3, 4, 5] li= val 

Атрибуты элементов определены в скобках после соответствующих элементов. В скобках располагается список пар *имя атрибута=значение,*причём элементы списка разделяются запятой или пробелом. Например:

• script(type=’text/javascript’) , link(rel=’stylesheet’, href=’/stylesheets/style.css’)
• meta(name=’viewport’ content=’width=device-width initial-scale=1′)

Значения всех атрибутов экранируются (т.е. такие символы как » > » заменяются эквивалентными кодами HTML как » >» ) , чтобы предотвратить JavaScript инъекции и межсайтовые атаки.

Если после тэга стоит знак = , следующий текст рассматривается как выражение JavaScript. Например, ниже в первой строке, содержимое тэга h1 будет переменной title (которая определена в файле или передана в шаблон из Express). Во второй строке содержимое параграфа — это текстовая строка, соединённая с переменной title . В каждом из случаев поведение по умолчанию — экранировать строки.

h1= title p= 'Evaluated and escaped expression:' + title 

Если после тэга знак = отсутствует, тогда содержимое рассматривается как обычный текст. Внутри текста можно вставить экранированные или неэкранированные данные, применяя синтаксис #<> и !<> , как показано ниже. В простой текст можно также вставлять «сырой» HTML.

p This is a line with #[em some emphasis] and #[strong strong text] markup. p This line has an un-escaped string: ! is emphasised'>, an escaped string: # is not emphasised'>, and escaped variables: #. 

Примечание: Почти всегда желательно экранировать данные, полученные от пользователей (при помощи синтаксиса #<> ). Данные, которым можно верить (т.е. подсчитанное количество записей, могут быть выведены без экранирования значений.

Можно использовать символ конвейера (‘|‘) в начале строки, чтобы отметить простой текст («plain text»). Например, дополнительный текст, приведённый ниже, будет показан в той же строке, что и предыдущий, но не будет относиться к ссылке.

a(href='http://someurl/') Link text | Plain text 

Pug позволяет выполнять условные операции if , else , else if и unless — пример приведён ниже:

if title p Переменная с именем "title" существует else p Переменной с именем "title" не существует 

Можно также выполнять циклы (итерации), применяя синтаксис each-in или while . Фрагмент кода (ниже) содержит цикл по элементам массива, чтобы показать список элементов (отметим применение ‘li=’ для оценки «val» как переменной). Значение итератора val может быть также передано в шаблон как переменная!

ul each val in [1, 2, 3, 4, 5] li= val 

Синтаксис разрешает также комментарии (которые попадут в результат или нет, по вашему желанию), смеси для создания повторно используемых блоков кода, операторы выбора case, и много другого. Более подробная информация — в документации The Pug docs.

Расширение шаблонов

Принято иметь общую структуру для всех страниц сайта, включая стандартную HTML-разметку для заголовка, футера, навигации и т.д. Вместо того, чтобы заставлять разработчиков дублировать эти образцы на каждой странице, Pug позволяет объявить базовой шаблон, а затем модифицировать его, заменяя только те небольшие части, которые различны на каждой конкретной странице.

Например, базовый шаблон layout.pug, созданный в каркасе проекта, имеет такой вид:

doctype html html head title= title link(rel='stylesheet', href='/stylesheets/style.css') body block content 

Тэг block применён для отметки разделов контента, которые могут быть заменены в производных шаблона (если блок не переопределяется, будет использования его реализация в базовом классе).

Умолчание для index.pug (созданный для каркаса проекта) показывает, как можно заменить базовый шаблон. Тэг extends идентифицирует базовый шаблон, который следует использовать, а затем мы используем block section_name, чтобы отметить новый контент раздела, который мы заменяем.

extends layout block content h1= title p Welcome to # 

Next steps

• Return to Express Tutorial Part 5: Displaying library data.
• Proceed to the next subarticle of part 5: The LocalLibrary base template.

Шаблонизация в PHP

Шаблонизация — это работа по интеграции готовой, статичной вёрстки на сайт.

Ведя работу над сайтом, написанном на PHP, мы разрабатываем логику, которая управляет представлением. Логика — это PHP-сценарии, где происходит объявление переменных, функций, использование массивов и циклов, получение и обработка информации.

Представление — это внешний вид сайта. Сюда входят страницы, которые содержат общие элементы оформления (шапка, меню, подвал) и контент (страницы, статьи и тому подобное).

Имея на руках готовую вёрстку, надо правильно её внедрить в работающий сайт, чтобы в определённых местах страниц информация выводилась динамически, под контролем PHP-сценариев.

Что такое «шаблон» и при чём здесь рыба?

Шаблон — это готовая вёрстка страницы или блока, которая состоит только из оформления, и не содержит никакого контента (полезной информации).

Шаблон по своей сути — это обычный PHP-сценарий, который на 90% состоит из HTML-кода и только на 10% из PHP-конструкций. Основная задача программиста в процессе работы над сайтом — это превратить статичные HTML-страницы в динамичные PHP-шаблоны, которые будут использоваться для показа итоговых страниц.

Но если статичная вёрстка страниц не содержит динамического контента, то что будет на его месте до начала внедрения этих страниц? Когда дизайнер или верстальщик хотят показать, как будет выглядеть страница на сайте, то вместо реального контента используется так называемая рыба. Рыба — это заполнитель. Бессмысленный текст, который используется в вёрстке, чтобы показать, как будет выглядеть страница, наполненная контентом.

Проблемы типичного процесса вёрстки

Когда верстальщик работает над несколькими страницами, ему приходится копировать бол́ьшую часть HTML-кода между страницами, так как эти страницы содержат много повторяющихся элементов: подключение стилей, шапка сайта с логотипов, футер сайта, различные меню и тому подобное.

В результате когда дело доходит до правок, то при необходимости поменять что-нибудь в той же шапке, это изменение нужно будет сделать во всех HTML-файлах, чтобы они выглядели одинаково. Конечно, такой напрасный труд никому не понравится.

Общие фрагменты страниц сайта

Взглянув на страницы практически любого сайта, можно заметить их сходство друг с другом. Ведь все страницы состоят из общих частей, которые не меняются, а также из областей с уникальным содержимым. И как было бы удобно редактировать общие блоки, вроде шапки сайта, отдельно, а затем вкладывать их во все страницы. Тогда при смене логотипа потребуется внести изменение только в одном месте, а все страницы сайта обновятся автоматически.

Шаблонизация — это и есть деление всей вёрстки на независимые шаблоны и дальнейшее их подключение и вкладывание друг в друга.

Сбор страницы из частей

Если поделить всю вёрстку сайта на отдельные, небольшие шаблоны мы получим сразу несколько преимуществ. Станет легче следить за единообразием интерфейса. Выделив представление сайта в шаблоны, мы также существенно упростим PHP-сценарии, ведь в них останется только PHP-код. Можно даже доверить верстальщику редактировать шаблоны, так как в них почти нет программного кода, а тот, что есть, очень простой.

Потренируйтесь собирать страницы из фрагментов, выполнив это задание.

Термины шаблонизации

В разговоре о шаблонизации очень важно придерживаться определённых терминов, чтобы всегда было понимание, о чём идёт речь. Договоримся использовать следующую терминологию:

Лейаут — это шаблон, который содержит HTML-код, общий для всех страниц сайта. В нём могут содержаться подключение стилей, метатеги, шапка, подвал. Также лейаут содержит область для вставки уникального содержимого каждой страницы.

Шаблон страницы — это шаблон с уникальным для одной страницы HTML-кодом. Например, для главной страницы там может быть список новостей. Также шаблон страницы может включать в себя блоки.

Блок — это шаблон очень небольшого блока страницы. Например, это может быть один элемент списка новостей. Удобство блоков в том, один блок могут включать разные страницы.

Содержимое шаблона

Что же находится внутри шаблона? Вы уже знаете, что шаблон почти полностью состоит из HTML-кода. Но помимо HTML-тегов, там также лежат данные и простая логика.

Данные в шаблоне

Шаблон показывает динамическую информацию. Прилагательное «динамическая» означает, что эти данные могут меняться и показываться в зависимости от различных условий. Сама информация, как правило, хранится в базе данных, а PHP-сценарий извлекает её оттуда и передаёт в шаблон.

Вне зависимости от источника информации есть строгое правило: любой шаблон (лейаут, шаблон страницы, блок) должен иметь доступ только к тем данным, которые ему явно передали.

Такую изоляцию данных обеспечивает специальная функция-шаблонизатор, о которой пойдёт речь далее.

Логика шаблона

В шаблоне должна находиться только несложная логика. Иными словами, шаблоны не содержат «тяжёлого» PHP-кода, а только простые конструкции.

Так, в шаблоне можно показывать переменные, использовать условия, циклы, обходить массивы, вызывать функции и подключать файлы. Всё другое запрещено. Оставшаяся бизнес-логика остаётся в PHP-сценариях, которые вызывают шаблоны и передают в них информацию.

Функция-шаблонизатор

Шаблонизатор — это функция, которая подключает файл шаблона, передаёт ему данные и возвращает сгенерированный HTML.

Именно шаблонизатор является тем клеем, что скрепляет воедино отдельные шаблоны в итоговую страницу. Работает он следующим образом: PHP-сценарий страницы выполняет все действия для подготовки необходимой информации, к примеру, запрашивает записи из базы данных. Эти записи в виде массива отправляются шаблонизатору вместе с именем шаблона страницы.

Шаблонизатор подключает указанный файл шаблона и передаёт туда всю информацию. Но, вместо вывода на экран содержимого этого шаблона, он захватывает получившийся HTML-код и возвращает его. Затем сценарий вызывает шаблонизатор ещё раз, но теперь с его помощью подключает общий лейаут, куда отправляется общая информация, а также содержимое страницы, полученное из предыдущего шага. Весь результат работы выводится на экран.

Пример использования

Посмотрим на примере, как это всё работает. Начнём с того, что определим три шаблона: лейаут, шаблон страницы и какой-нибудь блок.

Напоминаю, что в лейаут выносим общий HTML-код.

       
Дневник погоды
 
    

Теперь очередь за шаблоном страницы: [main.php]

 
Последние записи
 Добавить новую   $item]);?>
 

Здесь обратите внимание, что шаблон страницы, помимо итерации по массиву, для каждого его элемента вызывает функцию-шаблонизатор. Шаблонизатор получает контент из шаблона блока и показывает его внутри списка.

А вот и шаблон блока для показа одной записи: [inc/item.php]

  
 
">
 

Так выглядели три шаблона. Все они примут участие в формировании итоговой страницы. Соберёт эти шаблоны и выведет страницу на экран наш сценарий — index.php:

 $items_list]); // окончательный HTML код $layout_content = renderTemplate('layout.php', ['content' => $page_content, 'title' => 'Дневник наблюдений за погодой']); // вывод на экран итоговой страницы print($layout_content); 

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

1. Введение

Шаблонизация (templating) — метод связывания данных и разметки. Удобный способ генерации HTML по шаблону и данным. Используется на клиенте и сервере.

Суть шаблонизации заключается в том, чтобы отделить описание HTML от логики. Разметка помещается в отдельные файлы (шаблоны), а в местах, где необходимо вывести данные, размещаются специальные псевдопеременные. JS-код загружает нужный шаблон и заменяет в нем псевдопеременные на соответствующие данные.

На обычных сайтах, где HTML и CSS уже есть, элементы интерфейса получают готовый DOM и используя JavaScript вешают обработчики, оживляя его. Но в сложных интерфейсах разметка изначально отсутствует на странице. DOM создается с помощью JavaScript-кода динамически на основе данных, полученных с сервера или из других источников.

Представьте список постов на веб-странице, а так же любые другие ситуации, которые требуют отображения коллекции однотипных элементов, но с разными данными.

Данные для постов приходят от сервера как массив объектов, у нас есть шаблон одного поста. Используя цикл, мы можем пройтись по массиву объектов и вызвать функцию-шаблон для каждого объекта, результатом будет строка с подставленными данными. После чего мы в контейнер для постов просто повесим строку и браузер создаст разметку.

Это — стандартный подход написания динамических элементов интерфейса, данные для которых изменяются со временем.

1.1. Использование шаблонизации

Весь процесс требует нескольких простых шагов:

• Наличие данных, которыми будет наполнятся элемент интерфейса
• Шаблон, по которому будет составлена разметка элемента
• Библиотека, которая предоставляет средства шаблонизации

Мы подробно рассмотрим это на примерах, но по сути это очень просто:

• Подключить в проект выбранную библиотеку для шаблонизации
• Составить HTML-шаблон необходимого вида
• Сделать выборку шаблона в JS-файле
• Произвести рендеринг шаблона вместе с данными

2. Шаблон

Шаблон — это строка в специальном формате, которая путём подстановки значений и выполнения встроенных фрагментов кода превращается в HTML.

Синтаксис шаблона зависит от библиотеки, самое важное — это понимать принцип работы шаблонизаторов. Мы будем использовать библиотеку Handlebars.

2.1. Синтаксис

Шаблон — это строка со специальными разделителями, которых в Handlebars всего три:

 div>>div> div><>div> div>>>div> 

То есть синтаксис Handlebars — это обычный HTML, с вставками вида > . Именно в те места, где указаны вставки, будут помещены данные.

div class="menu"> h3 class="menu-title">>h3> ul class="menu-list"> > li class="menu-item">>li> > ul> div> 

2.2. Методы хранения

Шаблон — это просто многострочный HTML-текст, ему не место в файле скриптов. Один из способов — записать его в HTML-файле в тег template .

Более современный способ, например при использовании Webpack , хранить шаблон в отдельном файле и импортировать его. Для этого в конфигурацию Webpack нужно добавить загрузчик Handlebars-шаблонов.

Внешние шаблоны имеют много преимуществ, главным образом в том, что шаблоны никогда не будут загружаться клиенту, если они не нужны на странице. Для усвоения ключевых концепций будем пользоваться встроенными шаблонами.

Давайте обернем шаблон в тег template и дадим ему уникальный идентификатор, чтобы можно было выбрать в JS-файле по селектору.

template id="menu-template"> div class="menu"> h3 class="menu-title">>h3> ul class="menu-list"> > li class="menu-item">>li> > ul> div> template> 

3. Использование шаблона

Вернемся к перечисленным шагам, где мы описали последовательность действий, необходимых для использования шаблонизации, и разберем по пунктам.

3.1. Добавить в проект библиотеку

Подключение библиотеки в проект происходит очень просто. Есть несколько вариантов.

• Скачать файл библиотеки и подключить его в index.html
• Использовать CDN-сервис для получения ссылки на файл библиотеки
• Если используется инструмент вроде Webpack , можно ставить библиотеку как npm-пакет

Пока что используем CDN. В разделе документации о установке библиотеки есть ссылка на CDN-сервис на котором можно скопировать необходимый URL. Это — минифицированая версия библиотеки. Все что нужно сделать — это добавить еще один тег script перед нашим файлом скриптов и перед закрывающим тегом body в index.html .

script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js">script> 

3.2. Составить HTML шаблон

Этот шаг мы выполнили выше и у нас уже есть полностью готовый шаблон для меню. Добавим его перед всеми скриптами в документе.

body> template id="menu-template"> div class="menu"> h3 class="menu-title">>h3> ul class="menu-list"> > li class="menu-item">>li> > ul> div> template> script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js">script> script src="js/scripts.js">script> body> 

3.3. Сделать выборку шаблона в скрипте

template — это тег, значит мы можем выбрать его по селектору тега/класса/идентификатора. Хорошей практикой считается давать тегам template , содержащим шаблон, идентификаторы, так как они уникальны.

Теперь в JS-файле мы можем по id выбрать сам тег template и его контент в виде строки, для этого используем свойство innerHTML .

const source = document.querySelector('#menu-template').innerHTML.trim(); 

3.4. Отрендерить шаблон с данными

У нас уже есть библиотека и шаблон из которого мы изъяли текстовый контент. Для работы с шаблоном в библиотеке Handlebars есть функция compile . Эта функция запускает компиляцию шаблона source и возвращает результат в виде функции, которую далее можно запустить с данными и получить строку-результат.

Handlebars.compile(source) 

Вызов Handlebars.compile(source) разбивает HTML-строку по разделителям и при помощи new Function создаёт на её основе функцию. Тело этой функции создаётся таким образом, что код, который в шаблоне оформлен как > , попадает в неё как есть, а переменные и текст прибавляются к специальному временному буферу, который в итоге возвращается.

const source = document.querySelector('#menu-template').innerHTML.trim(); const template = Handlebars.compile(source); 

Теперь используя функцию-шаблон template можем передать ей данные как аргумент и она вернет HTML-строку.

Для начала добавим данные для списка. В шаблоне указаны какие-то переменные title и items .

В реальных задачах сначала создаются форматы для данных, а потом под них пишутся шаблоны, но для наглядности мы для шаблона напишем данные.

Данные для шаблона — это что угодно, строка, объект, массив и т.д., зависит от задачи, чаще всего — объект или массив объектов. Так как у нас список с заголовком и набором пунктов, нам удобно использовать объект такого вида.

const menuData =  title: 'Eat it createElement, templates rule!', items: ['Handlebars', 'LoDash', 'Pug', 'EJS', 'lit-html'], >; 

Следующим шагом будет вызвать функцию-шаблон и передать ей menuData как аргумент. В результате получим строку с подставленными значениями, поместим ее в тег и браузер, распарсив ее, создаст HTML-разметку.

4. Шаблоны и Webpack

Когда используем сборщик модулей, очень удобно работать со внешними шаблонами.

npm install handlebars 

npm install --save-dev handlebars-loader 

Обновляем конфигурацию Webpack, добавляя настройки загрузчика.

// В webpack.config.js  . module:  rules: [ .  test: /\.hbs$/, exclude: /node_modules/, use: "handlebars-loader" > ] > > 

В папке src создаем папку templates , в которой добавляем файлы шаблонов с расширением .hbs . Для нашего меню это будет menu.hbs . Помещаем разметку шаблона в файл, без тега template .

 div class="menu"> h3 class="menu-title">>h3> ul class="menu-list"> > li class="menu-item">>li> > ul> div> 

Там, где хотим использовать шаблон, импортируем файл с шаблоном. Особенность в том, что при импорте, handlebars-loader обработает файл шаблона и в menuTemplate уже будет лежать скомпилированная функция-шаблон готовая к использованию.

// В app.js import menuTemplate from '/path/to/templates/menu.hbs'; const menuData =  title: 'Eat it createElement, templates rule!', items: ['Handlebars', 'LoDash', 'Pug', 'EJS', 'lit-html'], >; const markup = menuTemplate(menuData); // html разметка с подставленным значениями 

5. Дополнительные материалы

• Learn Handlebars in 10 Minutes or Less
• A Beginner’s Guide to Handlebars
• Правильная шаблонизация

template — шаблон разметки

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег создаёт на странице шаблоны с разметкой, которые можно использовать многократно без копирования кода. Это упрощает работу с динамическим содержимым JavaScript и ускоряет загрузку страницы.

Например, вот шаблон для карточки товара:

⚠️ Содержимое шаблона не отображается на странице, пока не будет склонировано и вставлено в документ при помощи JavaScript.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

details — раскрывающийся список

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

В современном веб-дизайне ключевую роль играет не только визуальная привлекательность, но и удобство использования. Одним из инструментов, значительно улучшающих пользовательский опыт на веб-страницах, являются теги и . Эти элементы HTML позволяют создавать раскрывающиеся списки, что делает контент более структурированным и удобным для восприятия.

Что такое и ?

Тег представляет собой элемент, который по умолчанию находится в закрытом состоянии и раскрывается при взаимодействии, обеспечивая дополнительную информацию пользователю по запросу.

В свою очередь, служит заголовком для контента, скрытого внутри , и отображается независимо от состояния (открыт/закрыт) родительского тега.

Преимущества использования

Использование и на веб-страницах имеет ряд преимуществ:

• Улучшение навигации: помогает организовать контент, делая его более доступным и понятным для пользователей.
• Экономия места: позволяет компактно разместить большой объем информации, предоставляя доступ к ней по мере необходимости.
• Увеличение взаимодействия: поощряет пользователей к активному взаимодействию с контентом, повышая общее вовлечение.

Как использовать?

Разметка с использованием и достаточно проста:

 
Заголовок
 Здесь располагается скрытый контент, который будет отображен после клика по заголовку.
 

Этот код создаст интерактивный элемент, который по умолчанию будет закрыт и откроется при клике на заголовок, раскрывая содержимое.

Заголовок Здесь располагается скрытый контент, который будет отображен после клика по заголовку.

SEO-оптимизация и доступность

С точки зрения SEO и доступности, использование и также имеет свои преимущества.

Текст, скрытый внутри , по-прежнему доступен для поисковых систем, что позволяет включать важные ключевые слова и фразы без перегрузки видимой части страницы избыточной информацией. Кроме того, правильное использование этих элементов способствует улучшению структуры контента и его индексации поисковыми системами.

Заключение

Теги и — это мощные инструменты для создания интерактивных веб-страниц, способствующие улучшению пользовательского опыта и SEO-оптимизации. Их использование позволяет сделать контент более доступным и интересным, стимулируя пользователей к дальнейшему взаимодействию с вашим сайтом.

Используя эти элементы в своих проектах, вы не только облегчите навигацию по сайту для посетителей, но и улучшите его позиции в поисковой выдаче, благодаря более эффективной индексации контента.

• 24 марта 2024

body — тело страницы

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег используется для размещения всего содержимого, которое отображается на веб-странице.

     
Заголовок 1
 
Это параграф.
   

Атрибуты тега :

• onbeforeunload — сценарий, который выполнится, когда пользователь соберётся покинуть страницу.
• onhashchange — сценарий, который выполнится при изменении URL.
• onmessage — сценарий, который выполнится при получении сообщения от приложения.
• onoffline — сценарий, который выполнится, когда браузер начнёт работать в автономном режиме.
• ononline — сценарий для запуска, когда браузер начинает работать в режиме онлайн.
• onpagehide — сценарий, который выполняется, когда пользователь переходит со страницы.
• onpageshow — сценарий, который выполняется, когда пользователь переходит на страницу.
• onunload — сценарий, который выполняется, когда пользователь покидает страницу.
• onafterprint — сценарий, который выполнится после печати веб-страницы.
• onbeforeprint — сценарий, который выполнится перед печатью веб-страницы.
• onlanguagechange — сценарий, который выполнится при изменении языка документа.
• onmessageerror — сценарий, который выполнится при возникновении ошибки в сообщении, полученном с помощью API Messaging.
• onpopstate — сценарий, который выполнится при изменении состояния истории браузера.
• onrejectionhandled — сценарий, который выполнится при обработке отклоненного обещания в объекте Promise .
• onstorage — сценарий, который выполнится при изменении данных в объекте localStorage или sessionStorage .
• onunhandledrejection — сценарий, который выполнится при возникновении отклоненного обещания в объекте Promise без обработки.

• 13 марта 2024

b — полужирный текст

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег используется для выделения текста без дополнительного акцента или значимости. В результате содержимое этого тега обычно отображается жирным шрифтом. Несмотря на это, этот тег не должен использоваться для стилизации; для таких задач лучше использовать CSS.

Сегодня мы не будем работать допоздна!
 

Сегодня мы не будем работать допоздна!

• 2 марта 2024

html — главный элемент в HTML

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег является корневым элементом веб-страницы. Все содержимое документа, включая и , находится внутри этого тега. Тег сообщает браузеру, что документ является HTML-документом.

�� — обязательный элемент структуры HTML-документа.

Пример использования

Убедитесь, что перед тегом всегда указан корректный DOCTYPE ( ), который сообщает браузеру о версии HTML-документа.

     
Добро пожаловать на мой сайт!
 
Это демонстрационная страница.
   

Добавьте атрибут lang в тег , чтобы указать язык содержимого, например: для русскоязычного контента.

Связанные теги

Больше о теге

• MDN Web Docs:
• W3C: Спецификация HTML

• 1 марта 2024

div — универсальный контейнер

Тег определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.

 
Заголовок секции
 
Какое-нибудь содержимое секции
 
 

• 6 октября 2023

figcaption — подпись к figure

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Устаревший атрибут align — выравнивание подписи относительно элемента .

Тег может использоваться только внутри элемента .

Валидный HTML требует, чтобы тег находился после элемента или других медиа-элементов внутри . Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.

• 6 октября 2023

meta — метаданные страницы

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.

Атрибуты тега :

• charset — кодировка символов в документе.
• name — имя метаданных.
• content — значение метаданных.
• http-equiv — HTTP-заголовок для значения атрибута content .

Атрибут charset должен быть первым атрибутом в теге , а name и http-equiv нельзя использовать вместе.

• 4 октября 2023

button — просто кнопка

Тег создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.

Атрибуты тега :

• name — имя кнопки.
• type — тип кнопки, по умолчанию — submit . Атрибут type необходим, если указан атрибут value .
• value — значение, которое будет отправлено на сервер при нажатии на кнопку.
• disabled — указывает, что кнопка должна быть отключена.
• form — одна или несколько форм, к которым принадлежит кнопка.
• formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
• formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
• formmethod — метод HTTP, используемый при отправке данных формы.
• formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
• formtarget — указывает, где отображать ответ после отправки формы.

• 4 октября 2023

article — независимый контент

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.

 
Заголовок статьи
 
Текст статьи.
 
 

Тегом размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.

Не используйте для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.

• 3 октября 2023

iframe — встроенная страница

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.

Простейший пример использования :

Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.

Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).

• 3 октября 2023