относятся и к спискам, и к блочным элементам.
Структура тегов
При загрузке в браузере сами теги не отображаются, но влияют на способ отображения своего содержимого. Если в написание тега допущена ошибка, он игнорируется целиком.
Все теги имеют определенную структуру, которую необходимо соблюдать при написании. Кроме того, практически все теги имеют различные атрибуты, которые могут изменять способ отображения содержимого.
Давайте посмотрим на правильную структуру тегов содержащих атрибуты:
-
- Сам Себе Вебмастер
Для примера я привел два совершенно разных тега. Первый ![]()
одинарный — отвечает за вывод изображений, атрибут — src=»logo.jpg»
. Второй … парный отвечает за создание ссылок, атрибут — href=»сайт»
.
Вывод 1
: Атрибуты могут иметь парные и непарные теги.
Вывод 2
: Атрибуты могут иметь только открывающие теги, закрывающие теги не имеют атрибутов.
Картинка для разъяснения:
Язык гипертекстовой разметки
HTML (англ. HyperText Markup Language
) - является языком разметки документов во Всемирной паутине.
Хочу сразу обратить Ваше внимание, что HTML является языком разметки, а не программирования, как многие ошибочно полагают. Его основная задача создать каркас для описания различных компонентов документа, таких как абзацы
, заголовки
, списки
, таблицы
, ссылки
на другие страницы и так далее.
HTML документы описываются специальными именами HTML элементов (тегами
), каждый тег описывает различное содержание документа. Теги представляют собой команды
, которые сообщают браузеру, каким образом отображать веб-страницу (документ).
Теги бывают двух видов: парные
и одиночные
(пустые). У парных HTML-тегов первый тег в паре является начальным (открывающим
) тегом, а второй тег является конечным (закрывающим
) тегом. Основная функция начального тега заключается в том, чтобы сообщить браузеру где команда начинается, а конечным тегом определить где она заканчивается.
Давайте рассмотрим чем отличаются парные теги от одиночных.
Вид (синтаксис) парного тега:
<тег>
Содержание тега
Обратите внимание, что все теги заключены в угловые скобки <
и >
, а закрывающий тег всегда должен содержать прямой слеш перед названием тега -
, этим мы сообщаем браузеру, что на этом месте наша "команда" закончена.
Большинство ошибок
в верстке (создание структуры HTML кода
) у Вас может возникать по той причине, что не указан закрывающий тег или он указан без прямого слеша /
. Если не указать прямой слеш, то браузер воспринимает тег как открывающий, а не закрывающий. В том случае если вы вообще не указали закрывающий тег, то браузер не узнает где Ваша команда заканчивается, чтобы её остановить, что может привести к серьезным ошибкам, будьте внимательны.
К счастью, современные редакторы HTML кода позволяют быстрее отслеживать ошибки такого рода.
Вид (синтаксис) одиночного тега:
<тег>
Содержание
В современном стандарте HTML 5 одиночные теги записываются как и начальные теги у парных тегов (наименование тега помещено в угловые скобки <
и >
).
Обращаю Ваше внимание, что до выхода современного стандарта одиночные теги требовали наличие прямого слеша перед наименованием тега (записывались по аналогии с закрывающими тегами).
Использование прямого слеша в одиночных тегах не будет считаться ошибкой, но в этом и нет необходимости - короче код, быстрей загрузка.
Основное отличие одиночных тегов от парных заключается в том, что одиночные теги не требуют закрывающий тег после содержимого элемента.
Они добавляют на страницу одиночные объекты, например, изображение, или производят какое-то одиночное действие, например, такое как перевод строки. В HTML одиночных тегов значительно меньше чем парных, к концу обучения вы будете знать их все.
Хотя в HTML 5 теги не чувствительны к регистру, я рекомендую вам писать их в нижнем регистре. С помощью тегов браузер распознает структуру и значение текста, они сообщают браузеру, какая часть документа является заголовком, где начинается новый абзац, где начинается список, либо размещена таблица, что нужно выделить цветом, что перенести на следующую строку и так далее. Анализируя эту информацию, браузер отображает каждый элемент так, как мы ему это сообщили.
Пример простого HTML документа:
И так, мы с Вами поняли, что HTML - это краеугольный камень, благодаря которому любой браузер пользователя отобразит страницу.
Но как выглядит HTML? Давайте рассмотрим простой код, из которого состоит практически любая информационная страница:
Название для документа (страницы)<title>
</head>
<body>
<h2>
Это заголовок</h2>
<p>Это параграф (абзац).</p>
</body>
</html>
<p>Хочу сразу обратить Ваше внимание на то, что браузеры <b>игнорируют символы табуляции и пробелы в документе
</b> (если им явно это не указать, но об этом позднее).
Чтобы вам было легче воспринимать HTML код в примерах, теги вложенные в другие теги мы будем отделять табуляцией (как показано в примере) выше.</p>
<p>А теперь детально разберем из чего состоит любая HTML страница:</p>
<p>DOCTYPE
это декларация, которая определяет тип документа. Декларация не является тегом HTML это только инструкция для веб-браузера о том, какая версия HTML используется в документе. Декларация !DOCTYPE
помогает браузеру отобразить веб-страницу правильно, для этого браузер должен знать, как тип, так и версию документа.</p>
<p>Декларация <!DOCTYPE html>
сообщает, что в этом документе используется пятая версия <i>языка гипертекстовой разметки
</i> - <b>HTML 5
</b>.</p>
<b>Обращаю Ваше внимание на то, что декларация должна указываться самой первой в вашем HTML документе, перед тегом <html> . Декларация <!DOCTYPE> не чувствительна к регистру, но записывать её принято в верхнем регистре.
</b>
<p><b>Хронология версий HTML:
</b></p>
<table class="tableTag"><tr><th>Версия
</th>
<th>HTML
</th><th>HTML 2.0
</th><th>HTML 3.2
</th><th>HTML 4.01
</th><th>XHTML
</th><th>HTML 5
</th>
</tr><tr style="text-align:center;"><th>Год
</th>
<td>1991
</td>
<td>1995
</td>
<td>1997
</td>
<td>1999
</td>
<td>2000
</td>
<td>2014
</td>
</tr></table><p>Текст между <p> и </p>
(англ. <i>HTML Paragraph Element
</i>) определяет параграф (абзац). Содержание элемента всегда начинается с новой строки.</p>
<p>Ниже показано как отображается вышерассмотренный пример в браузере:</p>
<p>Обращаю Ваше внимание, что все примеры, которые рассматриваются в учебнике доступны для просмотра в отдельном окне.
Желательно, чтобы вы помимо вопросов и задач, которые будут приводится в конце каждой статьи создавали аналогичные (собственные примеры) и эксперементировали с ними. Это позволит Вам максимально быстро изучить и применять рассмотренный материал.</p>
<h2>Вопросы и задачи по теме</h2>
<p>Перед тем как перейти к изучению следующей темы ответьте, или найдите ответ на следующие вопросы:</p>
<ul><li>Какая основная задача языка гипертекстовой разметки?</li>
<li>Какая версия языка HTML сейчас используется?</li>
<li>Что такое декларация? Какая декларация используется в современном стандарте?</li>
<li>В какой HTML элемент помещается видимое содержимое документа (страницы)?</li>
</ul>
<p>Здравствуйте, уважаемые читатели блога сайт! В прошлой статье мы разобрались, а также что такое тип документа и как браузеры определяют используемый язык с помощью . Тег то рассмотрели, а вот само понятие (термин) нет. В этой статье я расскажу, что такое тег, зачем он нужен и какие теги бывают. Как я и говорил в прошлой статье данной рубрики, мы создадим файл-страничку, над которой будем экспериментировать, опираясь на полученные знания. Но это в конце статьи, а пока разберемся с HTML-тегом. </p>
<h3>Что такое HTML-тег, виды HTML-тегов, примеры написания</h3><b>HTML-тег
</b>— в переводе с английского <b>tag — помечать
</b> -символы, заключенные в угловые скобки и являющиеся элементами языка гипертекстовой разметки (HTML). Символы могут быть толок на <a href="/kak-pomenyat-yazyk-v-angliiskoi-windows-kak-pomenyat-yazyk-na-kompyutere.html">английском языке</a> (весь интернет на нем построен). Тег имеет вид
<strong></strong>
<p>Это тег выделения текста <a href="/vydelit-shrift-zhirnym-html-nachertanie.html">жирным шрифтом</a>. Теги имеют три вида:</p>
<ul><li><b>Открывающий тег
</b> - тег, стоящий в начале. В рассмотренном выше примере тег <strong> является открывающим и стоит перед тем текстом, который нужно выделить.</li>
<li><b>Закрывающий тег
</b> - тег, стоящий в конце. <a href="/podslushivayushchaya-programma-na-telefon-kak-opredelit-chto-telefon.html">Отличительной чертой</a> служит слеш «/» перед символами в угловых скобках. Опять же обратимся к рассмотренному выше примеру. Тег </strong> является закрывающим и стоит после текста, который следует выделить жирным</li>
<li><b>Одиночные теги
</b> — теги, которые не имеют закрывающего тега. Примером может служить <br /> Вот пример открывающего и закрывающего тега:</li>
</ul> <strong></strong>
<p>Вся конструкция, включая текст, будет выглядеть следующим образом:</p><p>
<strong>Этот текст будет выделен жирным</strong>
</p><p>А вот так будет выглядеть этот текст, когда его обработает браузер и предоставит нам:<b>Этот текст будет выделен жирным.
</b> Существует еще такое понятие, как<b> контейнерные теги
</b>, но это просто обобщенное название открывающего и закрывающего тегов. Как я писал выше, помимо контейнерных есть еще и одиночные теги. Отличие заключается в том, что такие теги не нужно закрывать. Ярким и наиболее частым примером служит тег новой строки.</p><p>В основном, одиночные теги используются для вставки какого-либо элемента, например изображения или таблицы.</p>
<h3>Что такое атрибуты,правила написания и зачем они нужны</h3>
Помимо тегов существуют еще и так называемые <b>атрибуты
</b>. Точнее не помимо, а в тегах. С помощью атрибутов можно задать <a href="/tehnologii-zapisi-dannyh-na-zhestkie-diski-kak-dannye.html">дополнительные параметры</a> для какого-либо тега. <b>Атрибуты
</b> для каждого тега свои, а в данной теме мы будем экспериментировать над тегом <font>, который без атрибутов, собственно, ничего толкового не делает.
<p><b>Font
</b> — контейнерный тег, применяемый для форматирования текста. С помощью данного тега вы сможете и выделить текст жирным, и изменить размер, и расстояние между строк — в общем все, что можно делать с текстом. Рассмотрим пример с размером текста. Для начала заключим текст в тег Font.</p><p>
<font> Текст </font>
</p><p>Теперь немного про правила написания атрибутов. Атрибуты<b> всегда
</b> пишутся в открывающем теге и после символов самого тега. Можно написать в одном теге несколько атрибутов в любом порядке. Атрибуты вы можете найти на сайте валидатора W3C (про который я напишу чуть ниже). Итак, вот пример тега font с атрибутом size:</p><p>
<font size="5"> Текст</font>
</p><p>Данный атрибут в теге font изменяет размер заключенного в теги Текста.<br>
Если вы откроете <a href="/ne-otkryvaetsya-ishodnyi-kod-stranicy-kak-otkryt-ishodnyi-kod-stranicy-kak.html">исходный код</a> страницы, то увидите, что место, где находится <a href="/pochemu-probel-mezhdu-slovami-bolshoi-vyravnivanie-po-shirine-v.html">большое слово</a> «Текста» имеет вид</p><p>
<font size="5"> Текста </font>
</p><p>Вы уже увидели как пишутся атрибуты. Ровно также они пишутся и в других тегах: сначала пишем сам атрибут (в <a href="/kak-razblokirovat-naidennyi-aifon-5-se-esli-dannye-ne-vazhny-v.html">данном случае</a> size), затем ставим «=» и заключаем параметр атрибута в двойные кавычки. Параметры атрибутов вы сможете найти все на том же сайте консорциума всемирной паутины.</p>
<h3>Что такое валидатор (validator) W3C, правила написания и список тегов</h3>
Как я и писал, существует великое множество тегов. Но где их всех найти? Вот для этой цели существует <b>валидатор W3C
</b>W3C -<b> World <a href="/vsemirnaya-pautina-istoriya-nazvaniya-i-kak-v-ssha-sozdavali-internet-chto.html">Wide Web</a> Consorcium,
</b>а по-русски — консорциум всемирной паутины. Не совсем понятно, да? Это такое место, где разрабатывают веб-стандарты — (языки гипертекстовой разметки — их детище). Во главе всего консорциума стоит, известный из прошлой статьи, Тим Бернерс-Ли — создатель HTML. Сайт этой организации — w3.org . Предупреждаю, сайт полностью на английском, так что запаситесь словарем или переводчиком в браузере. Кстати, Google у данного сайта равен 9, а — 37000 (это все очень много, если кто не в курсе).
<p>Возвращаемся к теме статьи. Нас интересуют стандарты языка HNTML 4.01. Переходим по ссылке HTML 4.01 Specification , после чего вверху видим вкладку elements , кликаем на нее. Вот и открывается страница со всеми тегами. Данные теги разработаны и приняты за стандарт консорциумом. Все, опять же, на английском. Сразу после слов «Index of Elements» мы видим легенду (значение букв в столбцах): <br><img src='https://i2.wp.com/monetavinternete.ru/wp-content/uploads/2012/09/Legenda-validatora-W3C.png' align="center" width="100%" loading=lazy></p>
<p>А сразу после легенды идет таблица самих тегов:</p>
<p><img src='https://i0.wp.com/monetavinternete.ru/wp-content/uploads/2012/09/Tablitsa-tegov-na-sayte-W3C.png' align="center" width="100%" loading=lazy></p>
<ul><li>В первом столбце — <b>Name
</b> — само название тега — то что должно стоять в угловых скобках (< и >).</li>
<li>Второй столбец — <b>Start Tag
</b> — наличие открывающего тега. В <a href="/podstanovka-dinamicheskih-dannyh-excel-prisoedinenie-stolbca-spiska-ili.html">данном столбце</a> вы можете увидеть букву «O», что значит «Optional», а в переводе с английского - Опционально. Данная буква присутствует только напротив тегов <html>, <head>, <body> и <tbody> и означает, что можно ставить открывающий тег, а можно не ставить — браузер сам все сделает.</li>
<li>Третий столбец — <b>End Tag
</b> — наличие закрывающего тега. Напротив данного тега можно увидеть как букву «O», так и букву «F». Значение первой не изменилось. Вторая же буква — «F» — дословно с английского «запрещено» — означает, что закрывающий тег ставить запрещено, его просто не существует. Например, не существует тега </img>, ибо нечего в нем закрывать.</li>
<li>Четвертый -<b> Empty
</b> — означает, что тег является одиночным (пустым). Все теги, напротив которых стоит буква «E» в данном столбце, стоит еще и буква «F» в предыдущем столбце. Ведь у одиночных тегов не бывает закрывающих. Примером служит все тот же тег <img>.</li>
<li>Пятый столбец — <b>Depr.
</b> или <b>Deprecated
</b> — с английского «не рекомендуемые». Если в данном столбце стоит буква «D» (которая расшифровывается точно также) значит, что данный тег не рекомендуется к использованию в HTML. Забегая немного вперед, сегодня для оформления как текста, так и <a href="/kak-vyglyadit-nadpis-kitaiskii-yazyk-vneshnii-vid-kitaiskoi-klaviatury.html">внешнего вида</a> всего сайта и HTML-документа используются <a href="/kaskadnye-tablicy-stilei-v-html-primery.html">каскадные таблицы</a> стилей — CSS. Если коротко и просто, то создается один файл, в котором прописываются все параметры текста, которые можно вызвать определенными атрибутами тегов. Так вот, <a href="/funkcionalnaya-zavisimost-bazy-dannyh-chto-takoe-funkciya-funkcionalnaya.html">данная функция</a> используется только на сайтах, потому что при рассылке новостей по почте или в RSS CSS не применим. И тут приходит на помощь эти самые теги. Большинство таких тегов, кстати, относятся к оформлению текста (<font> и <Center> являются примером)</li>
<li>Шестой столбец — <b>DTD
</b> — может содержать либо букву <b>«L»
</b>, либо <b>«F»
</b>. Первая — <b>«L»
</b> - <b>Loose DTD
</b> — означает, что тег, напротив которого стоит данная буква, может использоваться только в переходном типе документов (<!DOCTYPE> — Transitional, про который я писал в предыдущей статье). Вторая — <b>«F»
</b> — <b>Frameset DTD
</b> — означает, что тег может использоваться только в документе, типа FRAMESET (<!DOCTYPE> — Frameset). Если же буква отсутствует, то тег можно использовать во всех типах документов.</li>
<li>И последний, седьмой столбец - <b>Description
</b> — <a href="/operacionnaya-sistema-semeistva-windows-nt-kratkoe-opisanie-operacionnoi-sistemy.html">краткое описание</a> тега, опять же на английском</li>
</ul><p>Атрибуты же содержаться на той же страничке спецификации HTML 4.01, но уже во вкладке «attributes». Атрибутов намного больше, нежели тегов. И опять распишу все по пунктам.</p>
<ul><li>Первая колонка — <b>Name
</b> — как и в случае с тегами — название атрибута. Все на английском, но имея <a href="/bazovye-znaniya-html-css-dlya-nachinayushchih-chto-da-t-znanie-html-tegi-dlya-vydeleniya.html">базовые знания</a> можно догадаться, что делает тот или иной атрибут.</li>
<li>Вторая колонка — <b>Related Elements
</b> — это перечень всех тегов, в которых используется какой-либо атрибут. Все теги со ссылками, поэтому сразу можно будет перейти к информации о теге.</li>
<li>Третья колонка — <b>Type
</b> — это все возможные значения <a href="/css-kvadratnye-skobki-selektory-po-atributam-tega-znachenie.html">определенного атрибута</a>. Например напротив выбранного нами атрибута size в <a href="/kak-izmenit-cvet-shrifta-v-word-zadaem-cvet-teksta-atribut-color-tega.html">теге Font</a> стоит значение CDATA. Его мы рассмотрим позже, а если коротко, то это <a href="/android-6-opisanie-vot-etot-nabor-specialnyh-kodov-skrytaya-igra-v.html">специальный набор</a> вариантов размера (в данном случае). Ведь можно писать как пиксели, так и проценты</li>
<li>Четвертая колонка — <b>Default
</b> — означает, обязателен ли атрибут в определенном теге. Например, в теге <a href="/kak-avtomaticheski-dobavit-atribut-alt-v-tegi-img-vashego-bloga-na-wordpress-tam.html">Img атрибут</a> src обязателен, так как указывает на источник, из которого брать картинку.</li>
<li>6, 7, и 8 колонки означают то же самое, что и в случае с тегами.</li>
</ul><p>Все вышеописанное относится только к <a href="/skachat-proigryvatel-flash-player-poslednei-versii-onlain-html-igry.html">HTML версии</a> 4.01. Про HTML 5 мы поговорим в другой статье, затронем и XHTML. А сейчас, как я и обещал, мы создадим страничку на <a href="/obyazatelnye-tegi-struktura-dokumenta-html-pravila-yazyka-html.html">языке HTML</a>, над которой и будем экспериментировать.</p>
<h3>Создание файла в формате html — HTML-документ</h3>
<p>Прежде всего, разберемся что такое <b>HTML-документ
</b>. А это, собственно, файл в <a href="/vstavka-izobrazhenii-v-html-stranicy-formaty-izobrazhenii-dlya-veb-vstavka.html">формате HTML</a>. И все интернет странички являются HTML- документами. Например, при попадании на сайт в <a href="/zaiti-na-skrytuyu-stranicu-vk-istoriya-statusov-polzovatelya-rabotaem-s.html">адресной строке</a> в конце можно увидеть после адреса «.html» или «.htm». Вот файл с таким расширением мы и создадим. Вообще, если хотите экспериментировать над сайтом, а не над страничкой, то лучше создать <a href="/lokalnyi-chat-bez-servera-chat-dlya-lokalnoi-seti-besplatnaya-versiya.html">локальный сервер</a> — Денвер (про который я все хочу написать).</p>
<p>Учитывая то, что я не рассказал даже о тегах, присутствующих на каждой страничке, то просто создадим файл с любым именем и расширением.html. Можно (и лучше всего) использовать <b>Notepad++
</b> , потому что в данном <a href="/ipad-tekstovyi-redaktor-luchshie-tekstovye-redaktory-dlya-ipad.html">текстовом редакторе</a> используется подсветка кода, что очень удобно при редактировании кода и сохранять файлы можно во множестве форматов. Также есть программы, в которых при наборе кода сразу появляется результат в обработанном виде</p>
<p>Итак, нам нужно просто открыть <b>Notepad++
</b> и сохранить файл с произвольным текстом (можно и пустой), но в формате.html. Для этого, как обычно, кликаете на надпись файл, затем "сохранить как " и ищем среди <a href="/bolshoe-vremya-otobrazheniya-spiska-sinhronizacii-wsus-tipichnye.html">большого списка</a> расширений <b>«HyperText Markup Language file
</b> (расширения файлов)». Вот, собственно, и все. Первые строки в этот файл мы добавим уже в следующей статье из рубрики «Создаем сайт с нуля»</p>
<p>Для структурирования и оформления текста применяются теги — специальные <a href="/google-adwords-analiz-klyuchevyh-slov-planirovshchik-klyuchevyh-slov-google-adwords-instrukciya-po.html">ключевые слова</a>, обрамленные в скобки < и > . Большинство из них имеют закрывающую пару с косой чертой «/» перед именем тега. Это позволяет обозначать определенные части текста. Например:</p>
<p>Как видно из примера, в браузере теги не отображаются, но могут влиять на отображение текста.</p>
<p>Некоторые теги не предназначены для выделения области текста, а отвечают за какой-либо одиночный элемент документа (например, изображение или кнопку). Такие теги не требуют закрывающей пары, а косая черта «/» ставится перед закрывающей скобкой тега. Например, <br /> (перенос строки) или <hr /> (<a href="/kak-sozdat-raznye-varianty-gorizontalnoi-linii-v-html-kak.html">горизонтальная линия</a>). Такие одиночные теги называют пустыми, в то время как парные — непустыми, или контейнерами.</p>
<p>Элементом (или узлом) называют совокупность открывающего и закрывающего тегов вместе с их содержимым, а также пустые теги. Элементы — это те кирпичики, из которых состоит документ. Для удобства чтения, состоящие из пустых тегов элементы мы будем отображать с косой чертой, а из парных — без нее.</p>
<h3>Синтаксис и механизм представлений</h3>
<p>Напомним, что одной из функций механизма <a href="/cvetovye-html-kody-chislovoe-predstavlenie-cveta-primer-cvet.html">представлений HTML</a> 5 является обеспечение совместимости нового стандарта с уже существующими HTML/XHTML-документами. Это происходит благодаря наличию трех «режимов» (HTML5, XHTML5, DOM5 HTML) интерпретатора, каждый из которых поддерживает свой синтаксис.</p>
<p>Вообще говоря, <a href="/divy-html-standarty-i-proverka-chto-schitat-blochnym-elementom.html">стандартом HTML</a> разрешается набирать теги в любом регистре. Кроме того, можно опускать некоторые закрывающие теги (и косую черту в одиночных тегах). В HTML 5 это тоже допустимо (синтаксис представления HTML5), но такой код не будет совместим с синтаксисом XML /XHTML, что делает затруднительным применение XML-совместимых технологий, таких как, например, микроформаты. По этой причине мы рекомендуем писать код, используя <a href="/raznica-mezhdu-html-i-xhtml-sintaksis-xhtml.html">синтаксис XHTML</a> (документ интерпретируется в представлении XHTML5). Исходя из этого и будет вестись дальнейшее изложение.</p>
<p>Для совместимости со старыми браузерами, которые не понимают синтаксис XHTML, в одиночных тегах желательно оставлять пробел между именем и косой чертой «/», хотя это скорее полезная привычка, чем правило:</p>
<h3>Правило вложенности тегов</h3>
<p>Парные теги (контейнеры) могут содержать не только текст, но и другие теги. При этом действует одно правило — теги должны закрываться в порядке, обратном тому, в котором они открывались. Обратите внимание на расположение тегов в следующем примере:</p>
<p>Чтобы запомнить это правило, представьте, будто теги — это матрешки. Вы можете положить их одну в другую, но нельзя одну половинку поместить внутри, а другую — снаружи. Это правило не относится к пустым тегам, которые попросту не имеют закрывающей пары.</p>
<p>Вложенные элементы называются дочерними, а те, в которые они вложены — родителями. Это относительное свойство, поскольку каждый узел может являться одновременно дочерним для одного и родителем для других. Элемент <a href="/domen-org-hn-kakaya-strana-tolkovyi-slovar-stranovye-domeny-verhnego.html">верхнего уровня</a> (не имеющий родителей) называется корневым.</p>
<h3>Атрибуты тегов</h3>
<p>Любой открывающий (или пустой) тег может содержать атрибуты, определяющие некоторые <a href="/windows-7-otsutstvuyut-dopolnitelnye-parametry-papok-svoistva.html">дополнительные свойства</a> всего элемента. Атрибуты прописываются сразу после имени тега, отделяясь от него и друг от друга пробелом:</p><p>
<а href="http://www.example.com/" target="_blank">Ссылка на сайт</a>
</p><p>В этом примере мы указали тегу <a> (гиперссылка) два атрибута. Первому (href), отвечающему за адрес ссылки, мы присвоили значение http://www.example.com/ . Значение _blank <a href="/iframe-i-frame-chto-eto-takoe-i-kak-luchshe-ispolzovat-freimy-v-html.html">атрибута target</a> означает, что при нажатии на ссылку указанная в href страница должна открываться в новой вкладке браузера.</p>
<p>Некоторые атрибуты могут иметь только одно допустимое значение и всего два <a href="/pomehi-v-bluetooth-naushnikah-postoronnii-zvuk-i-shum-v-naushnikah-i.html">возможных состояния</a> — когда атрибут присутствует в элементе и, соответственно, когда отсутствует. В этом курсе такие атрибуты, по аналогии с переменными в математике, называются булевыми. Значение булева атрибута обычно совпадает с его названием. Например, disabled="disabled" . Вообщя говоря, их можно опускать, указывая только название атрибута (т. н. сокращенные атрибуты). Однако для совместимости с синтаксисом XHTML/XML значения указывать все же обязательно. Кроме того, названия всех атрибутов необходимо набирать в нижнем регистре и заключать их значения в двойные кавычки, хотя HTML 5 и не ставит такого ограничения.</p>
<table class="keyvalue"><tr><th scope="row">Не рекомендуется:
</th><td> <input TYPE=text disabled>
</td>
</tr><tr><th scope="row">Рекомендуется:
</th><td> <input type="text" disabled="disabled" />
</td>
</tr></table><h3>Специальные символы</h3>
<p>Но как быть, если в значении атрибута нужно использовать <a href="/skolko-vidov-kavychek-1-ili-2-kak-pravilno-postavit-dvoinye-ili-dvoinye.html">двойную кавычку</a>? Или в тексте документа — треугольную скобку? Ведь тогда непонятно, какая из кавычек закрывает атрибут, а какая относится к его значению, и является ли скобка началом тега или это <a href="/kak-oboznachaetsya-koren-kvadratnyi-na-klaviature-vstavka.html">математический знак</a> «меньше»? В этом, а также во многих других случаях на помощь приходят <a href="/simvoly-dlya-statusa-vkontakte-specialnye-simvoly-dlya-nika-zv-zdochki.html">специальные символы</a> HTML.</p>
<p>Специальные символы в HTML реализуются с помощью интерпретируемых браузером мнемокодов. Например, двойную кавычку (") можно вывести кодом " , а знак евро (€) — € . Все мнемокоды начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Чтобы обычный амперсанд в тексте не путался с началом мнемокода, его всегда необходимо выводить кодом & . С помощью мнемокодов можно отображать даже символы UTF-8. Такие мнемокоды имеют вид xxx; , где вместо xxxx указывается десятичный код символа в кодировке UTF-8. Например, © отобразится как «©». Многие из символов UTF-8 имеют аналоги в виде текстовых мнемокодов. Тот же символ « » можно обозначить вот так: .</p>
<h2>9 комментариев</h2>
Я где то читал что атрибут target="_blank" как бы не очень хорошо использовать, не нарушает ли он каких нибудь стандартов? Я читал, что разработчику нельзя решать за пользователя как ему открывать ссылку (в новой вкладке или в той же), как бы это не хорошо. Хотелось бы узнать ваше мнение.
Атрибут target="_blank" не включен в стандарт XHTML. Для сохранения валидности XHTML-страниц, значение target подменяют (при необходимости, конечно) с <a href="/kak-sdelat-prozrachnyi-background-css-ustanovka-i-izmenenie-css-prozrachnosti-s-pomoshchyu.html">помощью JavaScript</a>. В HTML это вполне валидный атрибут и в таких трюках нет необходимости.<p>По поводу целесообразности соглашусь с тем, что злоупотреблять им не стоит, поскольку большинству пользователей известен способ открыть любую ссылку в новой вкладке, да и кнопка "Назад" всегда под рукой. И все же, без target="_blank" есть некоторая вероятность потерять пользователя, "забывшего" вернуться, тогда как с ним есть вероятность навлечь праведный гнев того же пользователя. Получается палка о двух концах.</p><p>В своей практике, как правило, использую этот атрибут только для ссылок, добавленных пользователями (в комментариях, например), т.е. переход по которым не был запланирован при подготовке статьи. А также в ситуациях, когда это действительно необходимо: например на страницах, где в момент клика пользователь может загружать видео, слушает радио, общается в чате и т.д. </p>
Кажись, именно в HTML 5 можно оставлять парные теги открытыми, если за ними идет другой тег. Типа, в списках тег li теперь можно не закрывать.
Катерина, можно, да. И в HTML 4 тоже. В таком случае браузеры должны закрывать их самостоятельно. Однако в некоторых случаях они (IE9, например) делают это неправильно, что приводит к ошибкам в верстке, которые не так просто обнаружить. Парсеры XML (если есть необходимость их использовать) скорее всего тоже споткнутся об эти грабли. А плюсов от такой экономии кода, в общем-то, нет. На мой взгляд, теги все-таки лучше закрывать.
Те, кто верстает на HTML 5, не сильно заботятся про IE. Он не поддерживает очень много возможностей HTML5 -- Википедия Сравнение браузеров (HTML5). А на htmlbook.ru есть перечень тегов, которые позволено пропускать -- http://htmlbook.ru/samhtml5/sintaksis-html5
<p>Пользователей IE достаточно много, чтобы просто оставить их за бортом. Graceful degradation — наше всё. Касаемо незакрытых парных тегов вы правы — если строго следовать этому перечню, проблем даже в IE быть не должно, эти правила действуют со времен HTML 3.2.</p>
Спасибо, ознакомлюсь)
Спасибо за откровение!
Отличный материал, однозначно стоит использовать.
<p>Вы уже прочитали, что весь язык состоит из тегов. В этом уроке разберемся подробнее с HTML тегами. В языке HTML происходит деление тегов на одинарные (не парные) и парные теги. Итак, одинарные HTML теги состоят из одного тега, то есть, у них нет закрывающего тега. А у парных дескрипторов есть открывающийся и закрывающийся тег.</p>
<h2>Одинарные теги HTML</h2>
<p><b>Одинарные теги
</b> не имеют закрывающего тега. Например: <br> , <img> . Раньше писали так: <br/> , <img src='/odinochnye-tegi-html-chem-neparnye-tegi-otlichayutsya-ot-parnyh-v-ch-m.html' loading=lazy> , теперь такой стиль написания одинарных тегов не актуален, поэтому не пишите так. Самые используемые одинарные теги: <br> - перенос на <a href="/kak-izmenit-i-zapolnit-tablicu-v-vorde-vstavka-neskolko.html">новую строку</a>, <hr> - разделительная линия, <img> - вставка изображения.</p>
<h2>Парные теги HTML</h2>
<p><b>Парных тегов
</b> намного больше. У парного дескриптора есть открывающий и закрывающий тег. Парный тег образует контейнер. Содержимое контейнера – это то, что находится между открывающим и закрывающим тегом. В примере из этой статьи вы видели тег <h1>Что такое дескрипторы в HTML?</h1> , так вот, это <a href="/chto-takoe-parnye-tegi-chto-takoe-tegi-html-i-kakie-vidy-tegov-sushchestvuyut.html">парный тег</a>, содержимым этого тега является текст «Что такое теги в HTML?». Его началом является тег <h1> , а концом </h1> .</p>
<p>Главная ошибка новичков в написании парных тегов, это путаница во вложенности. Например, вот это <a href="/pravilnaya-forma-zapisi-kommentariya-v-html-kommentarii-v-html--css--js--i.html">правильная запись</a>: <p><b>Жирный абзац</b></p> . А вот ошибка: <p><b>Жирный абзац</p></b> , HTML документ с такой версткой считается не валидным. Чтобы не путать вложенность, делайте так: создаем парные теги , далее вкладываем в них другие , и в конце пишем текст внутрь обоих тегов <p><b>Как правильно писать парные теги</b></p> .</p>
<h2>Что нового в HTML5 в плане тегов?</h2>
<p><b>Язык HTML5
</b> является расширением HTML4, поэтому он сохранил <a href="/kakoe-ustroistvo-kompyutera-vypolnyaet-bolshuyu-chast.html">большую часть</a> или все дескрипторы из HTML4 и добавил свои. В HTML5 появились <a href="/voznikayushchie-po-hodu-submit-link-specialnye-tegi-pisma-primery-dlya-sobytiya.html">специальные теги</a> для разбиения сайта на основные блоки: шапка, меню, подвал, сайдбар и контент.</p>
<h2>Почему важно научиться пользоваться тегами?</h2>
<p>Поисковики Yandex и Google трепетно относятся к верстке <a href="/chto-takoe-html-struktura-dokumenta-html-standarty-kodirovaniya-v.html">HTML документов</a>, проверяя их на валидность. Ищут в них ключевики заключенные в специальные дескрипторы и так далее. Но этот раздел не про это. Это относится к продвижению (SEO).</p>
<h2>Как выучить все теги HTML?</h2>
<p>Да, тегов не мало. Но специально учить их не нужно. Пока вы будете практиковаться, что-то писать, у вас все дескрипторы, парные и одинарные, легко запомнятся. Со временем, конечно.</p>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
<div class="vce-share-bar">
<ul class="vce-share-items">
<li><a class="fa fa-facebook" href="javascript:void(0);" data-url="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fpypad.ru%2Fodinochnye-tegi-html-chem-neparnye-tegi-otlichayutsya-ot-parnyh-v-ch-m.html"></a></li>
<li><a class="fa fa-twitter" href="javascript:void(0);" data-url="http://twitter.com/intent/tweet?url=https%3A%2F%2Fpypad.ru%2Fodinochnye-tegi-html-chem-neparnye-tegi-otlichayutsya-ot-parnyh-v-ch-m.html"></a></li>
<li><a class="fa fa-google-plus" href="javascript:void(0);" data-url="https://plus.google.com/share?url=https%3A%2F%2Fpypad.ru%2Fodinochnye-tegi-html-chem-neparnye-tegi-otlichayutsya-ot-parnyh-v-ch-m.html"></a></li>
<li><a class="fa fa-pinterest" href="javascript:void(0);" data-url="http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fpypad.ru%2Fodinochnye-tegi-html-chem-neparnye-tegi-otlichayutsya-ot-parnyh-v-ch-m.html"></a></li>
<li><a class="fa fa-whatsapp no-popup" href="whatsapp://send?text=https%3A%2F%2Fpypad.ru%2Fodinochnye-tegi-html-chem-neparnye-tegi-otlichayutsya-ot-parnyh-v-ch-m.html"></a></li>
</ul>
</div>
</article>
</main>
<div class="main-box vce-related-box">
<h3 class="main-box-title">Возможно вас заинтересует</h3>
<div class="main-box-inside">
<article class="vce-post vce-lay-d post-273 post type-post status-publish format-standard has-post-thumbnail hentry category-stroitelstvo category-fundament tag-gazobeton tag-dom tag-kak-vybrat tag-stroitelstvo tag-fundament">
<div class="meta-image">
<a href="/obzor-garnitury-creative-aurvana-in-ear3-plus-obzor-creative-aurvana-in-ear3-plus-velikolepnye.html" title="Обзор: creative aurvana in-ear3 plus — великолепные арматурные наушники с двойными излучателями Впечатления от прослушивания">
<img width="145" height="71" src="/uploads/ea8b9e2edac089e5abde0feedccbf389.jpg" class="attachment-vce-lay-d size-vce-lay-d wp-post-image" alt="Обзор: creative aurvana in-ear3 plus — великолепные арматурные наушники с двойными излучателями Впечатления от прослушивания"sizes="(max-width: 145px) 100vw, 145px" / loading=lazy> </a>
</div>
<header class="entry-header">
<span class="meta-category"><a href="" class="category">Windows 8</a> </span>
<h2 class="entry-title"><a href="/obzor-garnitury-creative-aurvana-in-ear3-plus-obzor-creative-aurvana-in-ear3-plus-velikolepnye.html" title="Обзор: creative aurvana in-ear3 plus — великолепные арматурные наушники с двойными излучателями Впечатления от прослушивания">Обзор: creative aurvana in-ear3 plus — великолепные арматурные наушники с двойными излучателями Впечатления от прослушивания</a></h2>
</header>
</article>
<article class="vce-post vce-lay-d post-273 post type-post status-publish format-standard has-post-thumbnail hentry category-stroitelstvo category-fundament tag-gazobeton tag-dom tag-kak-vybrat tag-stroitelstvo tag-fundament">
<div class="meta-image">
<a href="/stabilnye-programmy-dlya-sozdaniya-zagruzochnoi-fleshki-legkaya.html" title="Легкая запись образа на флешку">
<img width="145" height="71" src="/uploads/4e086932c2eef2a59774913b28a9163b.jpg" class="attachment-vce-lay-d size-vce-lay-d wp-post-image" alt="Легкая запись образа на флешку"sizes="(max-width: 145px) 100vw, 145px" / loading=lazy> </a>
</div>
<header class="entry-header">
<span class="meta-category"><a href="" class="category">Windows 7, XP</a> </span>
<h2 class="entry-title"><a href="/stabilnye-programmy-dlya-sozdaniya-zagruzochnoi-fleshki-legkaya.html" title="Легкая запись образа на флешку">Легкая запись образа на флешку</a></h2>
</header>
</article>
<article class="vce-post vce-lay-d post-273 post type-post status-publish format-standard has-post-thumbnail hentry category-stroitelstvo category-fundament tag-gazobeton tag-dom tag-kak-vybrat tag-stroitelstvo tag-fundament">
<div class="meta-image">
<a href="/rukovodstvo-po-bystromu-startu-platformy-orange-pi-one-s-operacionnoi.html" title="Orange Pi Lite - обзор, установка и настройка операционной системы Распаковываем Orange Pi One">
<img width="145" height="71" src="/uploads/c7297f77b3182fcda78e2e6d98a52faa.jpg" class="attachment-vce-lay-d size-vce-lay-d wp-post-image" alt="Orange Pi Lite - обзор, установка и настройка операционной системы Распаковываем Orange Pi One"sizes="(max-width: 145px) 100vw, 145px" / loading=lazy> </a>
</div>
<header class="entry-header">
<span class="meta-category"><a href="" class="category">Гаджеты</a> </span>
<h2 class="entry-title"><a href="/rukovodstvo-po-bystromu-startu-platformy-orange-pi-one-s-operacionnoi.html" title="Orange Pi Lite - обзор, установка и настройка операционной системы Распаковываем Orange Pi One">Orange Pi Lite - обзор, установка и настройка операционной системы Распаковываем Orange Pi One</a></h2>
</header>
</article>
<article class="vce-post vce-lay-d post-273 post type-post status-publish format-standard has-post-thumbnail hentry category-stroitelstvo category-fundament tag-gazobeton tag-dom tag-kak-vybrat tag-stroitelstvo tag-fundament">
<div class="meta-image">
<a href="/sertifikaty-android-prestigio-4322-duo-proshivka-ili-pereproshivka.html" title="Прошивка или перепрошивка телефона Prestigio MultiPhone">
<img width="145" height="71" src="/uploads/b4d22fce8e20e61308eabc35d5a17953.jpg" class="attachment-vce-lay-d size-vce-lay-d wp-post-image" alt="Прошивка или перепрошивка телефона Prestigio MultiPhone"sizes="(max-width: 145px) 100vw, 145px" / loading=lazy> </a>
</div>
<header class="entry-header">
<span class="meta-category"><a href="" class="category">Телевизоры</a> </span>
<h2 class="entry-title"><a href="/sertifikaty-android-prestigio-4322-duo-proshivka-ili-pereproshivka.html" title="Прошивка или перепрошивка телефона Prestigio MultiPhone">Прошивка или перепрошивка телефона Prestigio MultiPhone</a></h2>
</header>
</article>
</div>
</div>
</div>
<aside id="sidebar" class="sidebar right">
<div id="search-2" class="widget widget_search">
<form class="vce-search-form" action="/" method="get">
<input name="s" class="vce-search-input" size="20" type="text" value="Поиск" onfocus="(this.value == 'Поиск') && (this.value = '')" onblur="(this.value == '') && (this.value = 'Поиск')" placeholder="Поиск" />
<button type="submit" class="vce-search-submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="recent-posts-2" class="widget widget_recent_entries">
<h4 class="widget-title">Свежие записи</h4>
<ul>
<li>
<a href="/obzor-garnitury-creative-aurvana-in-ear3-plus-obzor-creative-aurvana-in-ear3-plus-velikolepnye.html">Обзор: creative aurvana in-ear3 plus — великолепные арматурные наушники с двойными излучателями Впечатления от прослушивания</a>
</li>
<li>
<a href="/stabilnye-programmy-dlya-sozdaniya-zagruzochnoi-fleshki-legkaya.html">Легкая запись образа на флешку</a>
</li>
<li>
<a href="/rukovodstvo-po-bystromu-startu-platformy-orange-pi-one-s-operacionnoi.html">Orange Pi Lite - обзор, установка и настройка операционной системы Распаковываем Orange Pi One</a>
</li>
<li>
<a href="/sertifikaty-android-prestigio-4322-duo-proshivka-ili-pereproshivka.html">Прошивка или перепрошивка телефона Prestigio MultiPhone</a>
</li>
<li>
<a href="/kak-zashchitit-faily-na-usb-fleshke-kak-postavit-parol-na.html">Как поставить пароль на флешку — простые и эффективные варианты Можно ли ставить пароль на флешку</a>
</li>
<li>
<a href="/chto-takoe-vebinar-i-kak-on-prohodit-chto-takoe-vebinary-i-kak-oni-prohodyat.html">Что такое вебинары и как они проходят?</a>
</li>
<li>
<a href="/kak-zakryt-papku-parolem-v-windows-7-kak-ustanovit-parol-na-papku-bez.html">Как установить пароль на папку без дополнительных программ</a>
</li>
<li>
<a href="/sis-fail-s-versiei-programmy-x-plore-x-plore-failovyi-menedzher-dlya-android-failovyi.html">X-plore: файловый менеджер для Android</a>
</li>
<li>
<a href="/xiaomi-mi-drone-pervye-realnye-testy-novogo-kvadrokoptera-kvadrokoptery.html">Квадрокоптеры Xiaomi Mi drone от компании xiaomi</a>
</li>
</ul>
</div>
<div id="categories-2" class="widget widget_categories">
<h4 class="widget-title">Рубрики</h4>
<ul>
<li class="cat-item cat-item-16"><a href="/category/internet/" title="Интернет"><span class="category-text">Интернет</span><span class="count"><span class="count-hidden"></span></span></a>
</li>
<li class="cat-item cat-item-16"><a href="/category/gadgets/" title="Гаджеты"><span class="category-text">Гаджеты</span><span class="count"><span class="count-hidden"></span></span></a>
</li>
<li class="cat-item cat-item-16"><a href="/category/tips/" title="Советы"><span class="category-text">Советы</span><span class="count"><span class="count-hidden"></span></span></a>
</li>
<li class="cat-item cat-item-16"><a href="/category/program/" title="Программы"><span class="category-text">Программы</span><span class="count"><span class="count-hidden"></span></span></a>
</li>
<li class="cat-item cat-item-16"><a href="/category/security/" title="Безопасность"><span class="category-text">Безопасность</span><span class="count"><span class="count-hidden"></span></span></a>
</li>
<li class="cat-item cat-item-16"><a href="/category/tv/" title="Телевизоры"><span class="category-text">Телевизоры</span><span class="count"><span class="count-hidden"></span></span></a>
</li>
<li class="cat-item cat-item-16"><a href="/category/windows-10/" title="Windows 10"><span class="category-text">Windows 10</span><span class="count"><span class="count-hidden"></span></span></a>
</li>
<li class="cat-item cat-item-16"><a href="/category/windows-8/" title="Windows 8"><span class="category-text">Windows 8</span><span class="count"><span class="count-hidden"></span></span></a>
</li>
<li class="cat-item cat-item-16"><a href="/category/configuring-wi-fi/" title="Настройка Wi-Fi"><span class="category-text">Настройка Wi-Fi</span><span class="count"><span class="count-hidden"></span></span></a>
</li>
<li class="cat-item cat-item-16"><a href="/category/dll-files/" title="Файлы DLL"><span class="category-text">Файлы DLL</span><span class="count"><span class="count-hidden"></span></span></a>
</li>
<li class="cat-item cat-item-16"><a href="/category/windows7xp/" title="Windows 7, XP"><span class="category-text">Windows 7, XP</span><span class="count"><span class="count-hidden"></span></span></a>
</li>
<li class="cat-item cat-item-16"><a href="/category/different/" title="Разное"><span class="category-text">Разное</span><span class="count"><span class="count-hidden"></span></span></a>
</li>
</ul>
</div>
</aside>
</div>
<footer id="footer" class="site-footer">
<div class="container">
<div class="container-fix">
<div class="bit-3">
</div>
<div class="bit-3">
</div>
<div class="bit-3">
</div>
</div>
</div>
<div class="container-full site-info">
<div class="container">
<div class="vce-wrap-left">
<p>Copyright © 2024. Портал о компьютерной технике</p>
</div>
</div>
</div>
</footer>
</div>
</div>
<a href="javascript:void(0)" id="back-top"><i class="fa fa-angle-up"></i></a>
<div id="vk_api_transport"></div>
<script type="text/javascript">
jQuery(document).ready(function($) {
if ($('.social-likes')) {
$('.social-likes').each(function() {
var p = $(this).parent();
if (p.data('url')) {
$(this).data({
'url': p.data('url'),
'title': p.data('title')
});
}
if ($(this).find('.pinterest').length) {
if (p.data('media')) {
$($(this).find('.pinterest')[0]).data({
'media': p.data('media')
});
} else
$($(this).find('.pinterest')[0]).remove();
}
});
$('.social-likes').socialLikes({
zeroes: 0
});
}
});
</script>
<script type='text/javascript' src='/assets/evc-share.js'></script>
<script type='text/javascript' src='/assets/social-likes.min.js'></script>
<script type='text/javascript' src='/assets/scripts.js'></script>
<script type='text/javascript' src='/assets/main.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var vce_js_settings = {
"sticky_header": "1",
"sticky_header_offset": "700",
"sticky_header_logo": "",
"logo_mobile": "",
"logo_mobile_retina": "",
"rtl_mode": "0",
"ajax_url": "\/wp-admin\/admin-ajax.php",
"ajax_mega_menu": "1",
"mega_menu_slider": "",
"mega_menu_subcats": "",
"lay_fa_grid_center": "",
"full_slider_autoplay": "",
"grid_slider_autoplay": "",
"fa_big_opacity": {
"1": "0.5",
"2": "0.7"
}
};
/* ]]> */
</script>
<script type='text/javascript' src='/assets/min.js'></script>
<script type='text/javascript' src='/assets/wp-embed.min.js'></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
if (typeof VKWidgetsComments !== 'undefined' && VKWidgetsComments.length && evc_post_id) {
if ($('#vk-widget-' + evc_post_id).length) {
if ($('#respond').length) {
$('#respond form').hide();
$('#respond').append($('#vk-widget-' + evc_post_id));
}
}
cClose = false;
if ($("#comments .comment-list").length) {
$("#comments .comment-list").wrap('<div class = "evc-comments-wrap"></div>');
docViewHeight = $(window).height();
$(document).scroll(function() {
var docViewTop = $(window).scrollTop();
var elemTop = $('.evc-comments-wrap').offset().top;
//var elemBottom = elemTop + $('.evc-comments-wrap').height();
if (elemTop * 3 / 4 <= docViewTop && !cClose) {
cClose = true;
$(".evc-comments-wrap").animate({
"height": 0
}, 800);
}
});
}
}
// Rresponsive VK Comments Widget Width
if ($('.vk_widget_comments').length) {
responsiveVkWidget();
$(window).on('resize', function() {
responsiveVkWidget();
});
}
function responsiveVkWidget() {
var vkParentWidth = parseInt($('.vk_widget_comments').parent().width());
$('.vk_widget_comments, .vk_widget_comments iframe').css({
width: vkParentWidth
});
$('.vk_widget_comments, .vk_widget_comments iframe').attr('width', vkParentWidth);
}
// END Rresponsive VK Comments Widget Width
}); // End jQuery
/* ]]> */
</script>
</body>
</html>
