Дополнительные HTML-элементы

В ходе предыдущих занятий вы узнали:

  • Основы HTML-тегов и элементов.
  • Как структурировать веб-страницу.
  • Семантический HTML и лучшие практики.

В этой статье вы продолжите расширять свои знания HTML и охватите дополнительные элементы HTML.

Элементы текстового контента

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

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

Элемент цитаты

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

В этом примере показано, как использовать элемент <blockquote> , демонстрирующий знаменитую цитату Махатмы Ганди. Существует так много замечательных цитат, которые имеют запоминающееся содержание и смысл. Подумайте о своих любимых вдохновляющих людях и их цитатах.

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

Внутри элемента <blockquote> также можно использовать различные элементы, например заголовок, абзац или список.

Элемент <details>

<details>
   <summary>Details</summary>
   Additional Information
</details>

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

Элемент <details> полезен при использовании раскрытого виджета, содержащего дополнительную информацию. Элемент включает в себя встроенную функцию переключения, и пользователь может открывать и закрывать переключатель. Когда переключатель открыт, дополнительная информация расширяется и может быть прочитана пользователем. Когда переключатель закрыт, дополнительная информация скрыта от пользователя. Чтобы назвать сам виджет <details> , используйте элемент <summary> .

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

Это элемент <figure> в действии. Здесь вы видите, что <figure> , используемый вместе с элементом <figcaption> , может использоваться для улучшения визуального восприятия.

Вы постоянно видите изображения по всей сети и другие полезные визуальные данные. Визуальные элементы помогают привлечь внимание посетителя и создать отличный пользовательский опыт. Элемент <figure> — это способ маркировки изображения, таблицы, диаграммы и т. д. Он работает путем создания автономного контента по отношению к основному контенту.

Элемент <time>

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

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

Элемент <time> ссылается на время и может представлять время в 24-часовом формате или конкретную дату, которую можно настроить в зависимости от часового пояса и местоположения. Для этого элемента требуется как открывающий, так и закрывающий тег: <time> и </time> . Вы можете добавить атрибут datetime , чтобы даты можно было читать в машиночитаемом формате.

Метаданные документа

<title>Sarah's Favorite Food Recipes</title>

Каждый раз, когда вы вводите URL-адрес веб-сайта, появляется имя <title> , которое можно прочитать в строке браузера или на вкладке веб-страницы. Это заголовок, который вы видите для веб-страницы. Этот элемент важен и используется поисковой системой для отображения списка связанных веб-страниц в результатах поиска. Длина заголовка может варьироваться от короткого и описательного до более длинного и описательного.

Сценарий: у вас есть веб-страница, о которой вы думаете, но не можете вспомнить конкретный URL-адрес веб-сайта. Введите ключевые слова в поисковую систему. Поисковая система помогает найти нужную веб-страницу, и вы можете просмотреть имя <title> , появляющееся в результатах поиска.

Встроенные элементы контента

Помимо текстового контента, можно использовать множество дополнительных элементов контента.

Элемент <iframe>

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

Когда вы завершаете покупку товаров в Интернете и выбираете способ оплаты, например Paypal или Apple Pay, эти функции обычно добавляются на веб-страницу с помощью <iframe> . Просмотр карты в Интернете для поиска местного бизнеса — еще один распространенный опыт. Эти типы взаимодействия с пользователем на веб-странице можно добавить с помощью iframe. В приведенном выше примере вы видите URL-адрес Википедии внутри iframe под названием «Википедия».

Элемент <iframe> позволяет вставлять контент из другого источника и встраивать фрейм в веб-страницу. Он создает рамку прямоугольной формы и отображает содержимое в браузере. Фрейм позволяет представить макет в форме окна внутри элемента <iframe> . Это мощный способ добавить контент на вашу веб-страницу, чтобы улучшить ее работу.

Элементы формы

<progress max="100" value="30"> 30% </progress>

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

Этот элемент изображается в виде визуальной панели с цветом фона. Визуальная панель может различаться по размеру и цвету фона. С помощью индикатора выполнения вы можете дополнительно использовать атрибуты max и value . Атрибут max устанавливает число с плавающей запятой, а атрибут value отмечает прогресс, достигнутый в выполнении задачи.

Сценарии

<canvas id="canvas"></canvas>

Чтобы иметь возможность рисовать графику и анимацию в реальном времени, используйте элемент <canvas> . Поместите элемент <canvas> на свою веб-страницу HTML, чтобы создать холст. Для этого элемента требуется код JavaScript для возможности рисования и создания графики.

Элементы содержимого таблицы

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

Элемент <table>

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

Элемент <th>

Элемент <th> — это заголовок группы ячеек.

Элемент <tr>

Элемент <tr> определяет строку ячеек в таблице. Отсюда вы можете добавить определенные данные ячейки.

Элемент <td>

Элемент <td> создает ячейку, добавляя необходимое содержимое.

Заключение

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