Html: tag

Семантические теги в html

Что нового?[править]

  • В отличие от HTML4, у которого 3 валидатора (strict, transitional, frameset), у HTML5 валидатор один: <!DOCTYPE html>.
  • HTML5 поддерживает MathML и SVG.
  • Новые теги:
    • <section>, <article>, <aside>, <header>, <footer>, <nav>, <main>, <hgroup> (уже считается устаревшим в W3C),
    • <figure>, <figcaption>, <video>, <audio>, <source>, <track>, <picture>, <canvas>, <svg>, <math>, <embed> (для вставки контента с плагином (только)),
    • <datalist>, <keygen>, <output>, <progress>, <meter>, <dialog>,
    • <data>, <time>, <mark>, <ruby>, <rt>, <rp>, <bdi>, <wbr>,
    • <details>, <summary>, <menu>, <menuitem> (нужно использовать вместо тега <command>).
  • Новые значения атрибута type для тега <input>:
    • date, datetime, datetime-local, time, month, week,
    • color, email, tel, number, range, search, url.
  • Новые атрибуты для тегов, например:
    • autocomplete, autofocus, placeholder, required, pattern (для регулярных выражений) и другие для тега <input>,
    • autocomplete, autofocus, placeholder, required и другие для <textarea>,
    • async для тега <script>,
    • srcset для тега <img>,
    • download для тегов <a> и <area>.
  • Новые глобальные атрибуты, то есть которые могут использоваться с любым из тегов, например:
  • Некоторые теги отмечены как устаревшие, вместо них рекомендуется использовать CSS

    , ,

    , , , .

    :
  • Исчезновение фреймов (<frame>, <frameset>, <noframes> (кроме <iframe>)) из-за проблем с поисковыми системами и некоторых неудобств при навигации по странице.
  • Исчезновение некоторых тегов, заменённых в обновлённой спецификации на более актуальные:
    • вместо <acronym> нужно использовать тег <abbr>,
    • вместо <applet> использовать <object>,
    • вместо <dir> использовать <ul>,
    • вместо <bgsound> — тег <audio>,
    • вместо <listing> и <xmp> — теги <pre> или <code>,
    • вместо <strike> — <del> или <s>,
    • вместо <isindex> — комбинацию тега <form> и текстового поля.
  • Не поддерживаются некоторые атрибуты у тегов, например:
    • charset и rev у тегов <link> и <a>,
    • coords, shape и name у тега <a>,
    • align у всех тегов,
    • background, bgcolor, text, topmargin, rightmargin, bottommargin, leftmargin, link, alink, vlink у тега <body>.
  • Новые API:
    • Рисование 2D-картинок в реальном времени (Canvas),
    • Контроль над проигрыванием медиафайлов,
    • Хранение данных в браузере,
    • Редактирование,
    • Drag-and-drop,
    • Работа с сетью,
    • MIME.
  • Новые элементы в DOM.

Стиль изложения

Длина заголовков

Заголовки должны быть достаточно короткими (желательно не длиннее 60 символов, максимум 100) и они должны выражать суть материала коротко и понятно.

Здесь речь идёт про заголовки, которые озаглавливают сам текст, а не его отдельные части. Эти же заголовки часто используют на других страницах для ссылок на полный текст.

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

Недопустимы заголовки типа «Уважаемые коллеги!», «Внимание!!!», «Важная информация»

Мотивация:

Пример

Плохо:
VI Всероссийская научно-практическая конференция с международным участием для студентов, аспирантов и молодых учёных «Современные методы энергоэффективности и современные технические средства уменьшения потребления энергии в условиях крайнего севера»

Хорошо:
Молодёжная конференция по энергоэффективности

<strong>Плохо:<strong>
VI Всероссийская научно-практическая конференция с международным участием для студентов, аспирантов и молодых учёных «Современные методы энергоэффективности и современные технические средства уменьшения потребления энергии в условиях крайнего севера»<strong>Хорошо:<strong>
Молодёжная конференция по энергоэффективности

Accessibility concerns

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

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

Example

<p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p>

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

Разметка текста

Расшифровка аббревиатур

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

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

Примеры

  1. В Институте космических и информационных технологий (ИКИТ) прошёл семинар по технологиям NVIDIA. На следующей неделе в ИКИТ состоится семинар по CUDA.

  2. В ИКИТ прошёл семинар по технологиям NVIDIA.

  3. На следующей неделе в ИКИТ состоится семинар по CUDA.

  1. В Институте космических и информационных технологий (ИКИТ) прошёл семинар по технологиям NVIDIA. На следующей неделе в ИКИТ состоится семинар по CUDA.
  2. В <abbr title=»Институт космических и информационных технологий»>ИКИТ<abbr> прошёл семинар по технологиям NVIDIA.
  3. На следующей неделе в <abbr title=»Институт космических и информационных технологий» class=»highlight»>ИКИТ<abbr> состоится семинар по CUDA.

http://sokr.ru/

Ссылки на файлы

У ссылок на файлы следует указывать тип и размер файла.

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

Текст ссылки должен давать краткое описание того, что находится в файле.

Рекомендуемые сокращения единиц измерения объёма информации:

  • Б — байт (8 бит);
  • КБ — двоичный килобайт (1024 Б);
  • МБ — двоичный мегабайт (1024 КБ);
  • ГБ — двоичный гигабайт (1024 МБ);
  • ТБ — двоичный терабайт (1024 ГБ).

Пример

  • (.pdf, 4.5 МБ)
  • (.xls, 450 КБ)
  • (.doc, 1.4 МБ)

<ul class=»attachments»><li class=»file-pdf»><a href=»#/files/konkurs-polozhenie.pdf» onclick=»return false»>Положение о конкурсе<a> (.pdf, 4.5 МБ)<li><li class=»file-spreadsheet»><a href=»#/files/model-data.xls» onclick=»return false»>Результаты моделирования<a> (.xls, 450 КБ)<li><li class=»file-text»><a href=»#/files/prikaz1.doc» onclick=»return false»>Приказ № 1 о реорганизации<a> (.doc, 1.4 МБ)<li><ul>

Использование списков

Перечисления в текстах оформляйте списками с помощью HTML-тегов или .

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

Как выделить текст курсивом в html?

iemcitedfn

Результат выделения данных тегов будет одинаковым — это выделение курсивом. Однако следует понимать, что данные Вашей страницы будет считывать не только человек, но и Поисковый Робот. Если Вы хотите, чтобы конкретные части текста лучше индексировались (отображалось по запросу в поисковике), то лучше использовать соответствующее для этого выделение — дня цитат cite, для терминов dfn и тд.
<html>
   <head>
   <title>Допустим страница о машинах</title>
   </head>
<body>
<i>Mercedes-Benz</i> - это немецкий автоконцерн, который был основан в 1886 году. 
Название произошло от двух марок - <dfn>Мерседес</dfn> и <dfn>Бенц</dfn>. 
Он занимается в основном выпуском <dfn>легковых автомобилей премиум-класса</dfn>, <dfn>грузовых автомобилей</dfn>, <dfn>автобусов</dfn>.
<p><cite>http://ru.wikipedia.org/wiki/Mercedes-Benz</cite></p>
</body>
</html>

Структурные HTML теги для текста

1.Теги заголовков. Из названия понятно что они предназначены для оформления заголовков и подзаголовков на сайте. В зависимости от того какой тег заголовка используется браузер делает его более крупным шрифтом и по умолчанию выделяет жирным.
Самый большой и самый крупный в HTML – это заголовок H1

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

PHP

Заголовок

1

Заголовок

Следующими идут заголовки h3, h4, h5 и самый маленький h6

PHP

1
2
3
4
5

2.Тег абзаца

Думаю понятно для чего он предназначен. По умолчанию занимает всю ширину страницы и может иметь небольшие отступы сверху и снизу (обычно снизу).

XHTML

Делаем абзацы в HTML

1

Делаем абзацы в HTML

3.Тег позволяет выделит какой то фрагмент текста

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

PHP

Пример текста в котором нужно выделить фрагмент.

1

Примертекставкоторомнужновыделитьфрагмент.

Как и другим тегам HTML, ему можно присвоить CSS класс или идентификатор.

PHP

1

4.Для оформления цитаты в HTML у нас есть 2 варианта:
Тег используется для выделения короткой цитаты внутри текста. Он является строчным элементом и его ширина будет равна ширине выделенного в него текста. По умолчанию текст, обёрнутый в этот тег отображается в кавычках.

XHTML

Цитата

1

Цитата

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

XHTML

Тег цитаты

1

Тег цитаты

5.Тег используется для выделения аббревиатур. Вы оборачиваете в него аббревиатуру и в атрибуте title пишете полное название.

XHTML

Здесь написана ПМА

1

Здесь написана ПМА

Браузер подчёркивает аббревиатуру, а при наведении на неё высвечивает полное название.

Здесь написана ПМА

6. — нужен чтобы задать или изменить направление написания текста в HTML. Лично я понятия не имею где это может пригодиться, но мало ли…
Для задания направления используется атрибут dir, которому можно задать значения:

rtl – справа на лева

ltr – слева на право

XHTML

Отображение справа на лево

1

Отображение справа на лево

7. — используется для переноса на новую строку.

XHTML

Пример переноса.

1

Примерпереноса.

Полезные советы:

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

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

— это облегчит чтение текста как для людей так и для программ, кроме того, позволит Вам в дальнейшем, легко управлять текстом с помощью CSS. Вообще старайтесь не оставлять «голые» слова и предложения, не взятые в какой либо тег форматирования текста.
Соблюдайте значимость заголовков

т. е. допустим заголовок страницы берите в тег

подзаголовки в тег

еще менее значимые подзаголовочки в тег

и т. д. В идеале на странице должен быть всего один заголовок

, потом текст разбивается несколькими

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

Когда выучите CSS забудьте и выкиньте из головы тег и все его атрибуты!! Им уже давно никто не пользуется, ну за редким исключением конечно..

Соглашения СФУ

Сокращения названий институтов СФУ

При написании названий институтов СФУ следует придерживаться общепринятых сокращений.

Полное название Сокращение
Военно-инженерный институт ВИИ
Гуманитарный институт ГИ
Инженерно-строительный институт ИСИ
Институт архитектуры и дизайна ИАиД
Институт горного дела, геологии и геотехнологий ИГДГиГ
Институт инженерной физики и радиоэлектроники ИИФиРЭ
Институт космических и информационных технологий ИКИТ
Институт математики и фундаментальной информатики ИМиФИ
Институт нефти и газа ИНиГ
Институт педагогики, психологии и социологии ИППС
Институт управления бизнес-процессами и экономики ИУБПЭ
Институт физической культуры, спорта и туризма ИФКСиТ
Институт филологии и языковой коммуникации ИФиЯК
Институт фундаментальной биологии и биотехнологии ИФБиБТ
Институт цветных металлов и материаловедения ИЦМиМ
Институт экологии и географии ИЭиГ
Институт экономики, управления и природопользования ИЭУиП
Политехнический институт ПИ
Торгово-экономический институт ТЭИ
Юридический институт ЮИ

Во всех названиях союз «и» в аббревиатуре присутствует в виде строчной буквы, кроме названий трёх институтов, при написании которых традиционно эта буква отсутствует: ИКИТ, ИППС, ИУБПЭ.

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

picture ​

Тег предоставляет возможность использования нескольких источников для изображения (нескольких изображений).

Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.

Элемент содержит два тега: один или более и один .

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

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

Теги физического форматирования текста.

О тегах физического форматирования текста речь в этом учебнике шла ранее, поэтому повторятся, не стану, а просто перечислю их:

<b>, <i>, <u>, <strike>, <s>, <tt>, <small>, <big>, <sup>, <sub>, <p>, <font>, <pre>…

— всё это теги физического форматирования текста.

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

На всякий случай вновь покажу старый пример:

<html><head><title>Стили текста</title></head><body><big><b><u>Научная статья.</u></b></big><br><br>Если разбавить дистиллированную воду Н<sub>2</sub>О сорока процентами этилового спирта С<sub>2</sub>Н<sub>5</sub>ОН то получится жидкость в 40<sup>о</sup> более известную широкой публике под названием <i>— водка.</i><br>Впервые данную пропорцию <s>придлажил</s> предложил <tt>Дмитрий Иванович МЕНДЕЛЕЕВ.</tt><br><br><br><small>Распитие спиртных напитков вредит вашему здоровью.</small></body></html>

смотреть пример  

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

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

Например, чем отличается тег <em> от тега <i>? или какая разница между <b> и <strong>? ведь результат и там и там одинаков!

Так да не так.. отличия есть.. и они достаточно существенные!!..

Логическая разметка текста.

Прежде чем рассказывать о новых тегах расскажу, о том, что следует подразумевать под фразой: «логическая разметка документа».

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

Теперь давайте опять вернемся к вопросу выше: «Чем отличается тег <em> от тега <i>?» — казалось бы какая разница ведь текст и там и там будет отображаться курсивом .. всё дело в том что тег <i> — (курсив) — является тегом физического форматирования текста и предназначен в первую очередь для людей, а тег <em> (особенно важный текст) — является тегом логического формирования текста и предназначен для машин! А то, что текст, взятый в тег <em>, обычно в браузерах отображается курсивом — это всего лишь, скажем так «мода» и придумка браузеров.

Спецификация HTML не говорит о том, что теги логического форматирования текста должны определённым образом отображаться браузерами, что вот, например тот же тег <em> должен быть отображен именно курсивом и не как иначе, а говорит лишь о том, что такой текст должен отличатся от основного и особым образом выделятся в документе..

Так какие теги лучше использовать? Ну раз уж мы уже заочно познакомились с тегами <em> и <strong> покажу пример, комментарии будут ниже..

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html><head><title>Как создать сайт</title></head><body><p><strong>Как создать сайт?</strong></p><p>Для того, что бы <em>самостоятельно создать сайт</em> для начала в блокноте нужно написать следующие теги:</p><b>&lt;html&gt;</b> — <i>начало документа</i><br><b>&lt;head&gt;</b> — <i>начало головы</i><br><b>&lt;/head&gt;</b> — <i>закрытие головы</i><br><b>&lt;body&gt;</b> — <i>начало тела</i><br><b>&lt;/body&gt;</b> — <i>закрытие тела</i><br><b>&lt;/html&gt;</b> — <i>конец документа</i><br></body></html>
смотреть пример  

Теперь объясню, почему на страницах данного сайта, как и в примере выше, в некоторых случаях используются теги <em> и <strong>, а в других случаях <b> и <i>.

Всё дело в том, что мне как создателю данного сайта очень хочется, чтобы люди набрав в том же гугле фразу: «Как создать сайт?» или «Самостоятельное создание сайта» видели в первых строчках поисковой выдачи гугла ссылку: «Как создать сайт?» и переходили по ней на главную страницу моего ресурса :)

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

И противоположенный случай..

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

meter ​

Тег определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, определяет меру чего-либо (gauge).

Этот тег не должен использоваться в качестве индикатора прогресса.

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

Атрибуты:

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

Так можно записать уровень заряда батареи вашего устройства в значение :

# Battle between abbr VS acronym ⚔️

Back in 1997, there was this fierce debate about vs . The war began when Netscape created the tag and Microsoft had the . No side wanted to budge! And our mediator, W3C, refused to interfere and take a stand. The battle continued for many years, leading many developers confused and unsure which to use. Microsoft seems to have an edge with its dominating Internet Explorer presence. But then HTML5 landed…

W3C finally decided to step in and said, «Nobody wins when the family feuds, We all lose when the family feuds, What’s better than one billionaire? Two» … Opps, sorry that was the lyrics to Jay Z’s Family Feuds, but I’m pretty sure it was along that lines

Anyways, long story short! is deprecated, so use

video ​

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

Для определения видео-источника используется либо атрибут , либо тег . Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа видео-контента используется атрибут ).

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

В настоящее время поддерживается три формата видео: , и .

Атрибуты:

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

предоставляет множество свойств, методов и событий для работы с элементами и .

Форматирование текста

<h1></h1>……<h6></h6>. — теги заголовков, от самого большого к самому маленькому.

— жирный текст без придания важности выделенному фрагменту. — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием

<strong></strong> — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.

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

<em></em> — расставление акцентов путём выделения фрагментов текста курсивом.

<mark></mark> — выделение частей текста жёлтым маркером.

<tt></tt> — имитация текста, набранного на печатной машинке.
<small></small> — отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.
<sub></sub> — подстрочное начертание символов.

<sup></sup> — надстрочное начертание символов.

<cite></cite> — оформление цитат.

<address> — добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.

<pre></pre> — вывод неформатированного текста с сохранением пробелов и особенностей переносов.

<p></p> — контейнер для абзаца.

<br> — переносит текст на другую строку без создания абзаца.

<blockquote> </blockquote> — отступы с обеих сторон для оформления цитаты или врезки.
<q></q> — краткое цитирование.

<dl></dl> — контейнер для размещения термина и его определения.

<dt> — добавление термина.

<dd> — добавление определения понятия
<dfn> — выделение термина курсивом. Последующий текст должен раскрывать понятие.

<abbr> — указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.

<ol></ol> — список с цифрами.

<ul></ul> — список со значками.

<li> — отметка каждого элемента перечня (цифра или значок в зависимости от типа списка).

<a></a> — добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.
<code></code> — выделение фрагмента кода с помощью шрифта monospace. 

See also

HTML

  • <a>: элемент Anchor

    HTML-элемент <a> (или привязка с атрибутом href) создает веб-страницы с гиперссылками, файлы, адреса электронной почты, местоположения так же, как и все остальное, что URL-адрес может содержать.

  • onclick events

    Элементы привязки часто используются как поддельные кнопки, устанавливая их href javascript:void(0) для предотвращения обновления страницы, а затем прослушивая события щелчка.

  • <acronym>

    Исправлено:Эта функция больше не рекомендуется.

  • <адрес>: элемент контактного адреса

    HTML-элемент <address> указывает, что в нем содержится контактная информация человека, организации.

Встраивание элементов

<img></img> — вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:

<img src=»name» align=?> — выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.

<img src=»name» border=?> — позволяет настроить в пикселях толщину рамки вокруг изображения.
<picture></picture> — контейнер для расположения элемента <img> без <source>, который даёт браузеру возможность самостоятельно выбрать подходящую картинку.

<audio></audio>  — вставка звукового контента.

<video></video> — вставка видео (поддерживается Ogg, WebM и MP4).
<source></source> — указывает местоположение файла для <video>, <audio> и <picture>
<track> — формирует субтитры для <video> и <audio>.

<object></object> — контейнер, через который встраиваются мультимедийные файлы. Для передачи параметров применяется тег <param>.
<hr> — размещает на странице горизонтальную линию. Имеет несколько атрибутов.

<hr size=?> — устанавливает высоту линии.

<hr width=?> — устанавливает ширину линии.

<hr noshade> — убирает тень у линии.

<hr color=?> — задаёт цвет линии.
<script></script> — определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на  внешний источник.
<noscript></noscript> — ограничивает фрагмент документа, в котором скрипт не выполняется.

Понравилась статья? Поделиться с друзьями:
Setup Pro
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: