Elements html: : The Anchor element — HTML: HyperText Markup Language

HTML/Элемент i

Синтаксис

(X)HTML

<i> ... </i>

Описание

Элемент i (от англ. «italic» ‒ «курсивный») выделяет текст ‘курсивом’. Является элементом физического форматирования текста.

Совет

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

Для выделения особо важных текстовых отрывков используются элементы логического выделения em и strong.

CSS

Аналог: font-style: italic;.


Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.


Спецификация

Верс.Раздел
HTML
2.0Italic: IПеревод
3.2Font style elements
4.0115.2.1 Font style elements: the TT, I, B, BIG, SMALL, STRIKE, S, and U elements
DTD: Transitional Strict Frameset
5.04.5.17 The i element
5.14.5.22. The i element
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1. 1Extensible HyperText Markup Language

Атрибуты

Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

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

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент i</title>
</head>
<body>
<h2>Пример с элементом «i»</h2>
<p>Простой текст; <i>текст, выделенный курсивом</i>.<p>

</body>
</html>

Элемент i

Элементы (елементы) HTML уроки для начинающих академия

❮ Назад Дальше ❯


Элементы HTML

HTML-элемент обычно состоит из тега Start и тега End с содержимым, вставленным между:

<tagname>Содержание идет здесь. ..</tagname>

HTML- элемент — это все, от начального тега до конечного тега:

<p>Мой первый абзац.</p>

Начальный тегСодержимое элементаКонечный тег
<h2>Мой первый заголовок</h2>
<p>Мой первый абзац.</p>
<br>  

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


Вложенные элементы HTML

Элементы HTML могут быть вложенными (элементы могут содержать элементы).

Все HTML-документы состоят из вложенных элементов HTML.

Этот пример содержит четыре элемента HTML:

Пример

<!DOCTYPE html>
<html>
<body>

<h2>My First Heading</h2>
<p>My first paragraph. </p>

</body>
</html>

Пример объяснения

<html>элемент определяет весь документ.

Он имеет тег Start <html> и тег End </html>.

Элемент Content — это другой элемент HTML ( <body> элемент).

<html>
<body>

<h2>My First Heading</h2>
<p>My first paragraph.</p>

</body>
</html>

<body>

элемент определяет тело документа.

Он имеет тег Start <body> и тег End </body>.

Элемент Content — это два других HTML-элемента ( <h2> и <p> ).

<body>

<h2>My First Heading</h2>
<p>My first paragraph.</p>

</body>

<h2>элемент определяет заголовок.

Он имеет тег Start <h2> и тег End </h2>.

Элемент Content: мой первый заголовок.

<h2>My First Heading</h2>

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>.

The element

content is: My first paragraph.

<p>My first paragraph.</p>



Не забывайте, что конечный тег

Некоторые элементы HTML будут отображаться корректно, даже если вы забыли конечный тег:

Пример

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

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

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


Пустые элементы HTML

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

<br>пустой элемент без закрывающего тега (тег <br> определяет разрыв строки).

Пустые элементы могут быть «закрыты» в открывающем теге так: <br />.

HTML5 не требует закрытия пустых элементов. Но если требуется более строгая проверка, или если необходимо сделать документ удобочитаемым синтаксическими анализаторами XML, необходимо правильно закрыть все элементы HTML.


Использовать строчные теги

Теги HTML не чувствительны к регистру: <p> означает то же, что и <p>.

Стандарт HTML5 не требует строчных тегов, но W3C рекомендует строчные буквы в HTML и требует нижнего регистра для более строгих типов документов, таких как XHTML.

В html5css.ru Мы всегда используем строчные теги.

❮ Назад Дальше ❯

: HTML-документ / корневой элемент — HTML: язык гипертекстовой разметки

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

Категории контента Нет.
Разрешенный контент Один элемент, за которым следует один <тело> элемент.
Отсутствие тега Начальный тег может быть опущен, если первое, что находится внутри элемент не является комментарием.
Конечный тег может быть опущен, если элемент не является сразу с последующим комментарием.
Разрешенные родители Нет. Это корневой элемент документа.
Неявная роль ARIA документ
Разрешенные роли ARIA Нет роль разрешено
Интерфейс DOM HTMLHtmlElement

Этот элемент включает глобальные атрибуты.

манифест Устаревший Нестандартный

Указывает URI манифеста ресурса, указывающего ресурсы, которые следует кэшировать локально.

версия Устаревший

Указывает версию определения типа документа HTML, которая управляет текущим документом. Этот атрибут не нужен, так как он является избыточным по отношению к информации о версии в объявлении типа документа.

xmlns

Указывает пространство имен XML документа. Значение по умолчанию: "http://www.w3.org/1999/xhtml" . Это требуется в документах, проанализированных с помощью парсеров XML, и необязательно в текстовых/html-документах.

 

  <голова>
    
  
  <тело>
    
  

 

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

Предоставление атрибута lang с допустимым языковым тегом в соответствии с RFC 5646: теги для идентификации языков (также известный как BCP 47) на 9Элемент 0004 поможет технологии чтения с экрана определить правильный язык для объявления. Идентифицирующий языковой тег должен описывать язык, используемый большей частью содержимого страницы. Без него программы чтения с экрана обычно по умолчанию используют язык, установленный в операционной системе, что может привести к неправильному произношению.

Включение действительного объявления lang в элемент также гарантирует, что важные метаданные, содержащиеся на странице , такие как </code> страницы, также объявляются правильно.</p><ul><li> MDN Понимание WCAG, пояснения к Руководству 3.1</li><li> Понимание критерия успеха 3.1.1 | Понимание W3C WCAG 2.1</li><center><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1812626643144578" data-ad-slot="3076124593" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center></ul><table><thead><tr><th scope="col"> Спецификация</th></tr></thead><tbody><tr><td> Стандарт HTML <br/> <small> # the-html-element </small></td></tr></tbody></table><p> таблицы загружаются только в браузере с включенным BCD.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.slideplayer.com/24/7231192/slides/slide_11.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.slideplayer.com/24/7231192/slides/slide_11.jpg' /></noscript> Включите JavaScript для просмотра данных.</p><ul><li> Элемент верхнего уровня MathML: <code> <math> </code></li><li> Элемент верхнего уровня SVG: <code> <svg> </code></li></ul><h4><span class="ez-toc-section" id="i-13"> Обнаружили проблему с содержанием этой страницы? </span></h4><ul><li> Отредактируйте страницу на GitHub.</li><li> Сообщить о проблеме с содержимым.</li><li> Посмотреть исходный код на GitHub.</li></ul><p data-readability-styled="true"> Хотите принять участие?</p><p data-readability-styled="true"> Узнайте, как внести свой вклад.</p><p> Последний раз эта страница была изменена <time datetime="2023-03-01T05:15:58.000Z"> 1 марта 2023 г. </time> участниками MDN.</p><h2><span class="ez-toc-section" id="_Generic_Section_HTML"> : Элемент Generic Section — HTML: Язык гипертекстовой разметки </span></h2><p> HTML-элемент <strong> <code><section> </code> </strong> представляет общий автономный раздел документа, который не имеет более конкретного семантического элемента для его представления. Разделы всегда должны иметь заголовок, за очень немногими исключениями.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/futurefundamentals.com/wp-content/uploads/2022/02/block-and-inline-elements.jpg' /><noscript><img loading='lazy' src='/800/600/http/futurefundamentals.com/wp-content/uploads/2022/02/block-and-inline-elements.jpg' /></noscript></p><p> Этот элемент включает только глобальные атрибуты.</p><p> Как упоминалось выше, <code><section> </code> — это общий элемент секционирования, и его следует использовать только в том случае, если нет более конкретного элемента для его представления. Например, меню навигации должно быть заключено в <code><nav> </code> элемент, но список результатов поиска или отображение карты и его элементы управления не имеют определенных элементов и могут быть помещены в <code><section> </code> .</p><p> Также рассмотрите следующие случаи:</p><ul><li> Если содержимое элемента представляет собой автономную атомарную единицу контента, которая имеет смысл синдицироваться как отдельная часть (например, сообщение в блоге или комментарий в блоге или газетная статья), <code> < article> элемент </code> был бы лучшим выбором.</li><li> Если содержимое представляет собой полезную тангенциальную информацию, которая работает наряду с основным содержанием, но не является его непосредственной частью (например, связанные ссылки или биография автора), используйте <code><aside> </code> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/1.bp.blogspot.com/-jnEFh4lsrWU/WSNusEGXoBI/AAAAAAAAFCI/YiYIPSKDA3cf--LJxEp0L8F1Nbnd6PpKACLcB/s1600/Screen%2BShot%2B2017-05-22%2Bat%2B16.05.07.png' /><noscript><img loading='lazy' src='/800/600/http/1.bp.blogspot.com/-jnEFh4lsrWU/WSNusEGXoBI/AAAAAAAAFCI/YiYIPSKDA3cf--LJxEp0L8F1Nbnd6PpKACLcB/s1600/Screen%2BShot%2B2017-05-22%2Bat%2B16.05.07.png' /></noscript></li><li> Если содержимое представляет основную область содержимого документа, используйте <code><main> </code> .</li><li> Если вы используете элемент только как оболочку стиля, вместо этого используйте <code><div> </code>.</li></ul><p> Повторяю, каждый <code> <раздел> </code> следует идентифицировать, как правило, путем включения заголовка (элемент h2 — h6) в качестве дочернего элемента <code><section> </code>, где это возможно. Ниже приведены примеры того, где вы можете увидеть <code><section> </code> без заголовка.</p><h4><span class="ez-toc-section" id="i-14"> Простой пример использования </span></h4><h5><span class="ez-toc-section" id="i-15"> До </span></h5><pre> <div> <h3><span class="ez-toc-section" id="i-16">Заголовок</span></h3> <p>Куча отличного контента</p> </div> </pre><h5><span class="ez-toc-section" id="i-17"> После </span></h5><pre> <раздел> <h3><span class="ez-toc-section" id="i-18">Заголовок</span></h3> <p>Куча отличного контента</p> </раздел> </pre><h4><span class="ez-toc-section" id="i-19"> Использование раздела без заголовка </span></h4><p> Обстоятельства, при которых вы можете увидеть <code><section> </code> без заголовка, обычно встречаются в разделах веб-приложения/пользовательского интерфейса, а не в традиционных структурах документов.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/slideplayer.com/slide/5837670/19/images/11/HTML+ELEMENTS+Example%3A+Explain%3A+%3Chtml%3E.jpg' /><noscript><img loading='lazy' src='/800/600/http/slideplayer.com/slide/5837670/19/images/11/HTML+ELEMENTS+Example%3A+Explain%3A+%3Chtml%3E.jpg' /></noscript> В документе действительно нет смысла иметь отдельный раздел содержимого без заголовка для описания его содержимого. Такие заголовки полезны для всех читателей, но особенно полезны для пользователей вспомогательных технологий, таких как программы чтения с экрана, и они также хороши для SEO.</p><p> Рассмотрим, однако, вторичный механизм навигации. Если глобальная навигация уже заключена в элемент <code><nav> </code>, вы могли бы обернуть предыдущее/следующее меню в <code><section> </code> :</p><pre> <section> <a href="#">Предыдущая статья</a> <a href="#">Следующая статья</a> </раздел> </pre><p> Или как насчет панели кнопок для управления вашим приложением? Это может не обязательно иметь заголовок, но это все же отдельный раздел документа:</p><pre> <раздел> <button>Ответить</button> <button>Ответить всем</button> <button>Вперед</button> <button>Удалить</button> </раздел> </pre><p> Обязательно используйте вспомогательные технологии и удобный для чтения с экрана CSS, чтобы скрыть его, например:</p><pre> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/5/0/0/500247189463933c35c7b67c123feb82.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/5/0/0/500247189463933c35c7b67c123feb82.jpeg' /></noscript> hidden { положение: абсолютное; сверху: -9999px; слева: -9999px; } </pre><p> В зависимости от содержания, включение заголовка также может быть полезно для SEO, так что это вариант для рассмотрения.</p><table><tbody><tr><th scope="row"> Категории контента</th><td> Потоковое содержание, Содержание разделов, ощутимое содержание.</td></tr><tr><th scope="row"> Разрешенный контент</th><td> Текущее содержимое.</td></tr><tr><th scope="row"> Отсутствие тега</th><td> Нет, начальный и конечный теги обязательны.</td></tr><tr><th scope="row"> Разрешенные родители</th><td> Любой элемент, принимающий потоковое содержание. Обратите внимание, что <code><section> </code> элемент не должен быть потомок элемента <code> <address> </code>.</td></tr><tr><th scope="row"> Неявная роль ARIA</th><td> <code> регион </code> если элемент имеет доступное имя, иначе нет соответствующей роли</td></tr><tr><th scope="row"> Разрешенные роли ARIA</th><td> <code> оповещение </code> , <code> оповещениедиалог </code> , <code> приложение </code> , <code> баннер </code> , <code> дополнительный </code> , <code> контентинформация </code> , <code> диалог </code> , <code> документ </code>, <code> фид </code>, <code> журнал </code>, <code> основной </code>, <code> шатер </code>, <code> навигация </code>, <code> нет </code> , <code> примечание </code> , <code> презентация </code> , <code> поиск </code> , <code> статус </code> , <code> вкладка </code></td></tr><tr><th scope="row"> Интерфейс DOM</th><td> <code> HTMLЭлемент </code></td></tr></tbody></table><table><thead><tr><th scope="col"> Спецификация</th></tr></thead><tbody><tr><td> Стандарт HTML <br/> <small> # the-section-element </small></td></tr></tbody></table><p> Загрузка таблиц только в браузере с поддержкой JavaScript.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.slideplayer.com/24/7397605/slides/slide_7.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.slideplayer.com/24/7397605/slides/slide_7.jpg' /></noscript></div></div></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/sposoby-uspokoit-nervy-sposoby-metody-i-sredstva-dlya-snyatiya-stressa.html" rel="prev">Способы успокоить нервы: способы, методы и средства для снятия стресса</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/ne-perevodyatsya-dengi-s-kartu-na-kartu-ne-prihodyat-dengi-na-kartu-sberbanka-chto-delat-i-pochemu-ne-prishli-dengi-na-kartu.html" rel="next">Не переводятся деньги с карту на карту: Не приходят деньги на карту Сбербанка — что делать и почему не пришли деньги на карту?</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/elements-html-the-anchor-element-html-hypertext-markup-language.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='64207' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div><div id="sidebar-primary" class="widget-area sidebar " role="complementary"><div class="sidebar-main"><div id="yandex_rtb_R-A-744004-7" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript"> window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo: "yandex_rtb_R-A-744004-7",blockId: "R-A-744004-7",pageNumber: 11,onError: (data) => { var g = document.createElement("ins"); g.className = "adsbygoogle"; g.style.display = "inline"; g.style.width = "300px"; g.style.height = "600px"; g.setAttribute("data-ad-slot", "9935184599"); g.setAttribute("data-ad-client", "ca-pub-1812626643144578"); g.setAttribute("data-alternate-ad-url", "https://chajnov.ru/back.php"); document.getElementById("yandex_rtb_[rtbBlock]").appendChild(g); (adsbygoogle = window.adsbygoogle || []).push({}); }})}); window.addEventListener("load", () => { var ins = document.getElementById("yandex_rtb_R-A-744004-7"); if (ins.clientHeight == "0") { ins.innerHTML = stroke2; } }, true); </script><section id="search-2" class="widget widget_search"><div class="zita-widget-content"><form role="search" method="get" id="searchform" action="https://xn--90abhccf7b.xn--p1ai/"><div class="form-content"> <input type="text" placeholder="search.." name="s" id="s" value=""/> <input type="submit" value="Search" /></div></form></div></section><section id="nav_menu-4" class="widget widget_nav_menu"><div class="zita-widget-content"><h2 class="widget-title">Рубрики</h2><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-19021" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19021"><a href="https://xn--90abhccf7b.xn--p1ai/category/css">Css</a></li><li id="menu-item-19022" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-19022"><a href="https://xn--90abhccf7b.xn--p1ai/category/html">Html</a></li><li id="menu-item-19023" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19023"><a href="https://xn--90abhccf7b.xn--p1ai/category/js">Js</a></li><li id="menu-item-19024" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19024"><a href="https://xn--90abhccf7b.xn--p1ai/category/adaptiv">Адаптивный сайт</a></li><li id="menu-item-19025" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19025"><a href="https://xn--90abhccf7b.xn--p1ai/category/verstk">Верстка</a></li><li id="menu-item-19026" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19026"><a href="https://xn--90abhccf7b.xn--p1ai/category/idei">Идеи</a></li><li id="menu-item-19028" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19028"><a href="https://xn--90abhccf7b.xn--p1ai/category/chego-nachat">С чего начать</a></li><li id="menu-item-19029" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19029"><a href="https://xn--90abhccf7b.xn--p1ai/category/sovety">Советы</a></li><li id="menu-item-19031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19031"><a href="https://xn--90abhccf7b.xn--p1ai/category/shablon">Шаблоны</a></li><li id="menu-item-19027" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19027"><a href="https://xn--90abhccf7b.xn--p1ai/category/raznoe">Разное</a></li></ul></div></div></section></div></div></div></div><footer id="zita-footer"><div class="footer-wrap widget-area"><div class="bottom-footer"><div class="bottom-footer-bar ft-btm-one"><div class="container"><div class="bottom-footer-container"> © Компания <a href="http://вебджем.рф"> Вебджем.рф </a> 2009 - 2024 | Все права защищены.</a></div></div></div></div></div></footer> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <script defer src="https://xn--90abhccf7b.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_eacc7423ae55f04fc134551454013fc2.js"></script></body></html>