Синтаксис XML. Основные HTML-теги
Здравствуйте, уважаемые читатели блога ! Продолжаем рубрику «Создаем сайт с нуля», а в частности тему тегов... И сегодня мы рассмотрим теги, которые присутствуют в любой интернет-страничке - , и
. Есть еще один тег, который должен находиться в каждом HTML-документе и про который я уже писал в одной из предыдущих статей — , поэтому затрагивать его мы не будем.
В прошлых статьях рубрики я писал про создание пустого файла в формате html. Фактически, он был использован в статье про (именно в нем были применены теги заголовков). Теперь мы напрямую будем редактировать этот файл с полными описаниями.
И начнем статью именно с редактирования созданного файла. Лично я назвал его index.html, но имя может быть любым. Открываем его с помощью любого текстового редактора (лучше использовать Notepad++, так как в нем есть подсветка кода и другие полезные примочки). И сразу добавим в него теги ,
и ровно в таком порядке, в каком они написаны. Не забудьте их закрыть, как показано на скриншоте. Документ примет следующий вид:
А теперь рассмотрим значение каждого тега в отдельности. Не зря же они есть в каждом HTML-документе.
Функции тега
Итак, тег является контейнерным
(). Внутри него заключается все видимое и невидимое содержимое веб-страницы (включая теги и ). Открывающий тег идет сразу после декларации Doctype, а закрывающий стоит в конце документа. Тем самым, он дает понять браузеру, откуда начинать обработку документа и где ее заканчивать.
Теоретически, он и сам может понять что и как. Ведь ? Это переводчик языка HTML и вряд ли он начнет обработку с середины документа и закончит ее, не дойдя до конца. Вопрос, конечно, спорный, но я всегда думал (и сейчас не отказываюсь от своего мнения) о том, что написание данного тега обязательно.
Даже учитывая то, что функция данного тега лишь в обозначении границ содержимого
, он имеет свои атрибуты (которые сейчас либо не используются вообще, либо используются крайне редко). В разных источниках указываются отличные друг от друга атрибуты, поэтому не осмелюсь выдвигать правильную версию.
Единственное, что точно могу сказать — большинство атрибутов не поддерживаются HTML 4.01 или нежелательны. Хотя один пример все же приведу. — всплывающая подсказка в любом месте документа. Например, при наведении мыши на изображение вы можете увидеть всплывающий текст. Также и в случае с этим тегом:
А вот что вы увидите, наведя курсор на документ с данным содержимым:
Предпочтительнее использовать атрибут title не в теге , а в любых других конкретных участках страницы. Во-первых — удобно, во-вторых — поисковые системы лучше отнесутся к вашему сайту. Непосредственно на оптимизацию ресурса этот тег не оказывает. Идем далее.
Функция тега
И следующим на очереди идет тег
. В нем содержится вся техническая информация о странице, которая служит для помощи браузеру и поисковым системам. Тег является контейнерным и следует сразу после , только в отличии от последнего, закрывающий тег стоит не в конце документа, а перед открывающим тегом .
Какую же информацию можно увидеть в
? А никакую. Все, что находится в пределах этого тега доступно для глаза человека только с помощью просмотра исходного кода страницы. Все содержимое этого тега предназначено для поисковых систем и браузеров
. Единственное, что вы хоть как-то можете увидеть это тег , который отвечает за заголовок окна веб-страницы. Вот пример:</p>
<p><img src='https://i2.wp.com/monetavinternete.ru/wp-content/uploads/2013/01/Title-v-tege-head.png' align="center" width="100%" loading=lazy></p>
<p>Текст после иконки и есть содержание тега <title>. А теперь рассмотрим содержание <head>, которое мы увидеть не можем, но которое является очень <a href="/word/samaya-vazhnaya-chast-kompyutera-chto-vhodit-v-sostav-kompyutera/">важной частью</a> <b>создания и продвижения сайта.
</b>В первую очередь это строка</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</p><p>Это мета-тег отвечающий за <b>тип содержимого страницы
</b> (Content-Type). В <a href="/how-to-open-file/kak-mozhno-vosstanovit-staruyu-stranicu-v-kontakte-esli-udalit/">данном случае</a>, это html код в кодировке UTF-8 (content="text/html; charset=UTF-8"). Далее идет <a href="/windows/html-teg-title-effektivno-ispolzuem-zagolovok-stranicy-pravilnyi/">тег title</a>, описанный выше. Затем идут строки, начинающиеся с тега <link>. Он указывает на связь с внешним документом. Например, строка</p><p>
<link href="http://сайт/.../style.css" rel="stylesheet" media="screen" type="text/css" />
</p><p>указывает на то, что подключен (rel="stylesheet") файл с (type="text/css"), который находится по такому-то адресу (для уменьшения длины строки, я заменил половин адреса на точки). После обработки данной строки браузером он определит, откуда брать <b><a href="/program/zhe-ispolzuya-mnogourovnevye-kaskadnye-tablicy/">каскадные таблицы</a> стилей
</b>.</p>
<p>Вообще, в теге head много информации,о которой можно рассказывать бесконечно долго. Последнее, что стоит отметить (конкретно в случае с ) — наличие тегов описания, <a href="/word/servis-dlya-sozdaniya-klyuchevyh-slov-programma-dlya-podbora-klyuchevyh-slov/">ключевых слов</a> и canonical. Я использую <b>плагин All in One <a href="/browsers/plagin-yoast-seo-pervonachalnaya-nastroika-vkladka-tipy-zapisei-yoast-ili-all-in-one-seo-pack/">SEO Pack</a>
</b>, поэтому они и присутствуют в пределах <head>.</p>
<p>Здравствуйте, уважаемые читатели блога сайт! В прошлой статье мы разобрались, а также что такое тип документа и как браузеры определяют используемый язык с помощью . Тег то рассмотрели, а вот само понятие (термин) нет. В этой статье я расскажу, что такое тег, зачем он нужен и какие теги бывают. Как я и говорил в прошлой статье данной рубрики, мы создадим файл-страничку, над которой будем экспериментировать, опираясь на полученные знания. Но это в конце статьи, а пока разберемся с HTML-тегом. </p>
<h3>Что такое HTML-тег, виды HTML-тегов, примеры написания</h3><b>HTML-тег
</b>— в переводе с английского <b>tag — помечать
</b> -символы, заключенные в угловые скобки и являющиеся элементами языка гипертекстовой разметки (HTML). Символы могут быть толок на <a href="/download-soft/radiostancii-na-angliiskom-yazyke-onlain-slushat-radiostancii-na/">английском языке</a> (весь интернет на нем построен). Тег имеет вид
<strong></strong>
<p>Это тег выделения текста жирным шрифтом. Теги имеют три вида:</p>
<ul><li><b>Открывающий тег
</b> - тег, стоящий в начале. В рассмотренном выше примере тег <strong> является открывающим и стоит перед тем текстом, который нужно выделить.</li>
<li><b>Закрывающий тег
</b> - тег, стоящий в конце. <a href="/browsers/chto-luchshe-vybrat-monitor-ili-televizor-dlya-kompyutera-osnovnye/">Отличительной чертой</a> служит слеш «/» перед символами в <a href="/download-soft/uglovaya-skobka-bolshe-ili-menshe-polnaya-enciklopediya/">угловых скобках</a>. Опять же обратимся к рассмотренному выше примеру. Тег </strong> является закрывающим и стоит после текста, который следует выделить жирным</li>
<li><b>Одиночные теги
</b> — теги, которые не имеют закрывающего тега. Примером может служить <br /> Вот пример открывающего и закрывающего тега:</li>
</ul> <strong></strong>
<p>Вся конструкция, включая текст, будет выглядеть следующим образом:</p><p>
<strong>Этот текст будет выделен жирным</strong>
</p><p>А вот так будет выглядеть этот текст, когда его обработает браузер и предоставит нам:<b>Этот текст будет выделен жирным.
</b> Существует еще такое понятие, как<b> контейнерные теги
</b>, но это просто обобщенное название открывающего и закрывающего тегов. Как я писал выше, помимо контейнерных есть еще и одиночные теги. Отличие заключается в том, что такие теги не нужно закрывать. Ярким и наиболее частым примером служит тег <a href="/windows/kak-nachat-predlozhenie-novoi-stroki-chto-v-instagram-pishut-s-novoi/">новой строки</a>.</p><p>В основном, одиночные теги используются для вставки какого-либо элемента, например изображения или таблицы.</p>
<h3>Что такое атрибуты,правила написания и зачем они нужны</h3>
Помимо тегов существуют еще и так называемые <b>атрибуты
</b>. Точнее не помимо, а в тегах. С помощью атрибутов можно задать <a href="/excel/upravlenie-vai-fai-routerom-na-kompe-esli-ne-poluchaetsya-voiti-v/">дополнительные параметры</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="/download-soft/goryachie-klavishi-otkryt-kod-stranicy-kak-posmotret-ishodnyi-kod/">исходный код</a> страницы, то увидите, что место, где находится <a href="/excel/vord-mezhdu-slovami-bolshoi-probel-kak-v-vorde-ubrat-bolshie/">большое слово</a> «Текста» имеет вид</p><p>
<font size="5"> Текста </font>
</p><p>Вы уже увидели как пишутся атрибуты. Ровно также они пишутся и в других тегах: сначала пишем сам атрибут (в данном случае size), затем ставим «=» и заключаем параметр атрибута в <a href="/internet/php-str-replace-regulyarnye-vyrazheniya-php-regexp-primery-regulyarnyh/">двойные кавычки</a>. Параметры атрибутов вы сможете найти все на том же сайте консорциума <a href="/word/world-wide-web---vsemirnaya-pautina-vsemirnaya-pautina/">всемирной паутины</a>.</p>
<h3>Что такое валидатор (validator) W3C, правила написания и список тегов</h3>
Как я и писал, существует великое множество тегов. Но где их всех найти? Вот для этой цели существует <b>валидатор W3C
</b> W3C -<b> <a href="/windows/world-wide-web---vsemirnaya-pautina-chto-takoe-world-wide-web-vsemirnaya/">World Wide</a> Web Consorcium,
</b>а по-русски — консорциум всемирной паутины. Не совсем понятно, да? Это такое место, где разрабатывают веб-стандарты — (языки гипертекстовой разметки — их детище). Во главе всего консорциума стоит, известный из прошлой статьи, Тим Бернерс-Ли — создатель HTML. Сайт этой организации — w3.org . Предупреждаю, сайт полностью на английском, так что запаситесь словарем или переводчиком в браузере. Кстати, Google у данного сайта равен 9, а — 37000 (это все очень много, если кто не в курсе).
<p>Возвращаемся к теме статьи. Нас интересуют стандарты языка HNTML 4.01. Переходим по ссылке HTML 4.01 Specification , после чего вверху видим вкладку elements , кликаем на нее. Вот и открывается страница со всеми тегами. Данные теги разработаны и приняты за стандарт консорциумом. Все, опять же, на английском. Сразу после слов «Index of Elements» мы видим легенду (значение букв в столбцах): <br><img src='https://i0.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://i2.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="/program/kak-v-eksele-rasstavit-alfavitnom-poryadke-sortirovka-dannyh-v-excel-po/">данном столбце</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» (которая расшифровывается точно также) значит, что <a href="/how-to-open-file/chto-takoe-teg-dannyh-chto-takoe-tegi-html-i-kakie-vidy-tegov-sushchestvuyut/">данный тег</a> не рекомендуется к использованию в HTML. Забегая немного вперед, сегодня для оформления как текста, так и <a href="/browsers/izmenenie-vneshnego-vida-windows-7-kak-vernut-standartnuyu-temu-v-windows/">внешнего вида</a> всего сайта и HTML-документа используются каскадные таблицы стилей — CSS. Если коротко и просто, то создается один файл, в котором прописываются все параметры текста, которые можно вызвать определенными атрибутами тегов. Так вот, <a href="/good-to-know/sohranit-dvoichnye-dannye-v-fail-1s-rasshirenie-funkcionalnosti-raboty-s/">данная функция</a> используется только на сайтах, потому что при рассылке новостей по почте или в RSS CSS не применим. И тут приходит на помощь эти самые теги. Большинство таких тегов, кстати, относятся к оформлению текста (<font> и <Center> являются примером)</li>
<li>Шестой столбец — <b>DTD
</b> — может содержать либо букву <b>«L»
</b>, либо <b>«F»
</b>. Первая — <b>«L»
</b> - <b>Loose DTD
</b> — означает, что тег, напротив которого стоит <a href="/excel/keis-po-literature-primery-ispolzovanie-keis-tehnologii-na-urokah/">данная буква</a>, может использоваться только в переходном типе документов (<!DOCTYPE> — Transitional, про который я писал в предыдущей статье). Вторая — <b>«F»
</b> — <b>Frameset DTD
</b> — означает, что тег может использоваться только в документе, типа FRAMESET (<!DOCTYPE> — Frameset). Если же буква отсутствует, то тег можно использовать во всех типах документов.</li>
<li>И последний, седьмой столбец - <b>Description
</b> — <a href="/excel/ekonometrika-primenenie-paketa-stata-kratkoe-opisanie-paketa/">краткое описание</a> тега, опять же на английском</li>
</ul><p>Атрибуты же содержаться на той же страничке спецификации HTML 4.01, но уже во вкладке «attributes». Атрибутов намного больше, нежели тегов. И опять распишу все по пунктам.</p>
<ul><li>Первая колонка — <b>Name
</b> — как и в случае с тегами — название атрибута. Все на английском, но имея базовые знания можно догадаться, что делает тот или иной атрибут.</li>
<li>Вторая колонка — <b>Related Elements
</b> — это перечень всех тегов, в которых используется какой-либо атрибут. Все теги со ссылками, поэтому сразу можно будет перейти к информации о теге.</li>
<li>Третья колонка — <b>Type
</b> — это все возможные значения определенного атрибута. Например напротив выбранного нами атрибута size в <a href="/how-to-open-file/kak-izmenit-cvet-shrifta-v-html-s-pomoshchyu-veb-brauzera-google-chrome-zadaem/">теге Font</a> стоит значение CDATA. Его мы рассмотрим позже, а если коротко, то это <a href="/payment-system/kak-otkryt-fai-programmy-dlya-otkrytiya-file-failov-nabor-specialnyh-programm/">специальный набор</a> вариантов размера (в данном случае). Ведь можно писать как пиксели, так и проценты</li>
<li>Четвертая колонка — <b>Default
</b> — означает, обязателен ли атрибут в определенном теге. Например, в теге <a href="/program/atribut-alt-tega-img-chto-takoe-alt-tekst-i-pochemu-ego-nuzhno-dobavit-pryamo/">Img атрибут</a> src обязателен, так как указывает на источник, из которого брать картинку.</li>
<li>6, 7, и 8 колонки означают то же самое, что и в случае с тегами.</li>
</ul><p>Все вышеописанное относится только к HTML версии 4.01. Про HTML 5 мы поговорим в другой статье, затронем и XHTML. А сейчас, как я и обещал, мы создадим страничку на <a href="/internet/istoriya-razrabotki-html-yazyk-html-istoriya-razvitiya/">языке HTML</a>, над которой и будем экспериментировать.</p>
<h3>Создание файла в формате html — HTML-документ</h3>
<p>Прежде всего, разберемся что такое <b>HTML-документ
</b>. А это, собственно, файл в <a href="/browsers/programma-iz-html-v-xls-konvertirovanie-html-v-formaty-microsoft-excel-veshchei-o/">формате HTML</a>. И все интернет странички являются HTML- документами. Например, при попадании на сайт в <a href="/good-to-know/kak-otkryt-konsol-v-brauzere-mozilla-adresnaya-stroka-v-mozilla-firefox/">адресной строке</a> в конце можно увидеть после адреса «.html» или «.htm». Вот файл с таким расширением мы и создадим. Вообще, если хотите экспериментировать над сайтом, а не над страничкой, то лучше создать <a href="/browsers/vybiraem-lokalnyi-veb-server-dlya-windows-lokalnyi-server/">локальный сервер</a> — Денвер (про который я все хочу написать).</p>
<p>Учитывая то, что я не рассказал даже о тегах, присутствующих на каждой страничке, то просто создадим файл с любым именем и расширением.html. Можно (и лучше всего) использовать <b>Notepad++
</b> , потому что в данном <a href="/download-soft/tekstovyi-redaktor-dlya-iphone-obzor-tekstovyh-redaktorov-dlya-ipad-tolstomu-i-ne/">текстовом редакторе</a> используется подсветка кода, что очень удобно при редактировании кода и сохранять файлы можно во множестве форматов. Также есть программы, в которых при наборе кода сразу появляется результат в обработанном виде</p>
<p>Итак, нам нужно просто открыть <b>Notepad++
</b> и сохранить файл с произвольным текстом (можно и пустой), но в формате.html. Для этого, как обычно, кликаете на надпись файл, затем "сохранить как " и ищем среди большого списка расширений <b>«HyperText <a href="/program/yazyk-gipertekstovoi-razmetki-html5-struktura-i-osnovy-raboty-osnovy-html-yazyk/">Markup Language</a> file
</b> (расширения файлов)». Вот, собственно, и все. Первые строки в этот файл мы добавим уже в следующей статье из рубрики «Создаем сайт с нуля»</p>
<p>Как я уже говорил, теги HTML - это <a href="/browsers/gde-dobyt-bitkoiny-sbor-bitkoinov-na-kriptovalyutnyh-kranah/">специальные инструкции</a>, указывающие браузерам как отображать ту или иную часть страницы. Сейчас мы поговорим о них подробнее, но не старайтесь сразу все запоминать - у вас не получится, да и не нужно это, так как в остальных главах вы будете на каждом шагу сталкиваться с тегами - постепенно все само запомнится. Просто прочитайте и постарайтесь понять.</p>
<h2>Открывающие и закрывающие теги, теги-контейнеры</h2>
<p>Теги могут быть <i>открывающими
</i> (начальными) и <i>закрывающими
</i> (конечными). Открывающие теги состоят из знаков «<» и «>» между которыми указывается имя тега, а у закрывающих перед именем дополнительно ставится прямой слэш (/).</p>
<p>Большинство HTML-тегов являются парными - имеют обязательные открывающий и закрывающий теги, например: <STRONG>
и </STRONG>
. Некоторые имеют только открывающий тег, например <BR>
, и называются <b>пустыми
</b>. Другие же могут иметь открывающий тег, а закрывающий можно указывать, а можно и нет, тогда браузер сам определит, где заканчивается действие тега.</p>
<p>Теги, которые имеют обязательный или необязательный закрывающий тег принято называть <b>теги-контейнеры
</b> или <b>элементы-контейнеры
</b>.</p>
<p>Все теги HTML не чувствительны к регистру, то есть можно указывать <STRONG>
и <strong>
или вообще <sTRonG>
.</p>
<p>Теперь совет. Рекомендую вам всегда писать теги в <a href="/download-soft/fundamentalnye-osnovy-linux-osnovy-linux-ispolzovanie-nizhnego-registra-i/">нижнем регистре</a> (<a href="/word/what-is-uppercase-or-lowercase-letters-a-lesson-on-the-subject-of-a-letter-is-not-a-topic-letter-of-lowercase-letter-n/">строчными буквами</a>) и ставить необязательные закрывающие теги. Во-первых, это является признаком профессионализма и хорошего тона, а во-вторых, в HTML-коде со всеми закрывающими тегами гораздо проще ориентироваться и править его. Ну да я вам об этом еще не раз напомню.</p>
<p>Пример использования тегов</p><p>
<b><a href="/program/kak-ubrat-zhirnyi-shrift-v-aifone-kakoi-shrift-ispolzuet-kompaniya/">Жирный шрифт</a></b> <i>Курсивный шрифт</i>
</p><p>Результат в браузере</p>
<h2>И все таки, как будет правильно - «теги» или «элементы»?</h2>
<p>Вообще, в большинстве случаев правильно будет говорить - «элементы». Именно из HTML-элементов состоит веб-страница, и именно элементы выводят в окне браузера изображения, таблицы, ссылки и т.д. А теги предназначены для того, чтобы сообщить браузеру, где и какой элемент находится, начинается и заканчивается. Давайте еще раз рассмотрим пример, который расположен выше. Там указаны два элемента B
и I
. Каждый из них содержит обычный текст и имеет открывающий и закрывающий теги.</p>
<p>Так уж сложилось, что на сегодняшний день слово «тег» прочно вошло в русский язык (да и не только в русский) в качестве синонима слову «элемент». Я думаю из-за того, что при использовании обоих слов не теряется смысл повествования. Поэтому в данном учебнике я тоже буду использовать оба этих слова, чтобы вы привыкли к ним и научились подсознательно определять, о чем <a href="/download-soft/chto-delat-esli-net-zvuka-v-naushnikah-razumeetsya-rech-idet-ne-o/">идет речь</a> в каждом конкретном случае. И сильно на этом не заморачивайтесь, знаете, чем отличается тег от элемента - вот и хорошо.</p>
<h2>Теги можно указывать в одну строку, а можно в несколько</h2>
<p>Да, HTML-теги можно указывать в одну строку, а можно в несколько, для браузеров это не имеет никакого значения, они просто игнорируют переносы строк. А также между тегами можно ставить сколько угодно пробелов - все подряд идущие пробелы браузеры воспринимают как один. Например, вот так:</p>
<p>
<b>Жирный шрифт</b>
<i>
Курсивный шрифт
</i>
</p><p>Результат в браузере</p>
<h2>Правильная вложенность тегов</h2>
<p>Многие теги можно вкладывать друг в друга, чтобы они вместе воздействовали на один и тот же элемент страницы. Но при этом важно соблюдать правильную вложенность - тег, появляющийся раньше, должен закрываться позже. Кстати, ошибка вложенности является одной из самой распространенной среди новичков.</p>
<p><тег1><тег2><тег3>
...<span></тег3></тег2></тег1>
</span> - правильно</p>
<p><тег1><тег2><тег3>
...<span></тег1></тег3></тег2>
</span> - неправильно</p>
<p>Пример использования вложенных тегов</p><p>
<b><i>Жирный курсивный шрифт</i></b>
</p><p>Результат в браузере</p>
<h2>Родительские и дочерние теги, потомки и предки</h2>
<p>Чтобы указать иерархическую структуру HTML-тегов, их принято называть определенными словами. На самом деле все очень просто. Итак, давайте возьмем такой пример:</p><p>
<тег1>
<тег2>...</тег2>
<тег3><тег4>...</тег4></тег3>
</тег1>
</p><p><b>Родительские теги
</b> - тег является родительским для других тегов, если они вложены внутрь него на один уровень. В нашем примере <ТЕГ1>
является родительским для <ТЕГ2>
и <ТЕГ3>
, но не является для тега <ТЕГ4>
. А вот <ТЕГ3>
родитель <ТЕГ4>
.</p>
<p><b>Дочерние теги
</b> - обратно родительским. <ТЕГ2>
и <ТЕГ3>
дочерние для <ТЕГ1>
, а <ТЕГ4>
для тега <ТЕГ3>
.</p>
<p><b>Предки
</b> - тег является предком для всех тегов, которые находятся внутри него на любом уровне вложенности. <ТЕГ1>
предок для всех тегов, а <ТЕГ3>
предок <ТЕГ4>
.</p>
<p><b>Потомки
</b> - обратно предкам. Все теги - потомки тега <ТЕГ1>
, но <ТЕГ4>
еще и потомок тега <ТЕГ3>
.</p>
<p>Ну что, не запутались? Чтобы проще запомнить, проведите аналогию со своим семейным древом и сразу все встанет на свои места.</p>
<h2>Что значит «один тег содержит другой»?</h2>
<p>Как вы уже знаете, теги можно вкладывать друг в друга и, соответственно, одни могут содержать другие. Но тут есть один небольшой, но очень <a href="/browsers/kak-pomenyat-versiyu-androida-kak-otkatit-obnovlenie-android-vazhnye/">важный момент</a>, которому новички часто не уделяют должного внимания. Давайте возьмем уже знакомый нам пример:</p><p>
<тег1>
<тег2>...</тег2>
<тег3><тег4>...</тег4></тег3>
</тег1>
</p><p>Говорят, что один тег содержит другой только, если первый является родительским тегом, а второй - дочерним и никак иначе. то есть в нашем примере <ТЕГ1>
содержит <ТЕГ2>
и <ТЕГ3>
, но не содержит <ТЕГ4>
. А вот <ТЕГ3>
как раз и содержит <ТЕГ4>
. Немного необычно, правда? Но своя логика в этом есть, согласитесь.</p>
<p>Каждый HTML-элемент может содержать только определенный набор тегов, а некоторые вообще не могут содержать ничего кроме текста. Все это зависит от типа, к которому относится тег, поэтому, перед тем как вкладывать теги, проверьте - может ли один из них содержать другой.</p>
<h2>Типы тегов</h2>
<p>В HTML, теги делятся на несколько типов или моделей:</p>
<p><b>Inline (встроенные, уровня строки)
</b> - все, что выводят эти теги на страницу, всегда отображается браузером на одной сроке. И только если доступной ширины (например, ширины окна браузера) не хватает, то происходит перенос строки на следующую и т.д.</p>
<p>Пример использования встроенных тегов</p><p>
<b>Жирный шрифт</b> <i>Курсивный шрифт</i>
</p><p>Результат в браузере</p>
<p><b>Block (блочные, уровня блока)
</b> - все, что выводит каждый из таких тегов на страницу, отображается браузером с новой строки, После себя такие элементы также создают переносы строк.</p>
<p>Пример использования <a href="/windows/izbegaem-rasprostranennyh-oshibok-v-html5-razmetke-blochnaya-verstka-tegov-div-html-teg/">блочных тегов</a></p><p>
<p>Параграф 1</p> <p>Параграф 2</p>
</p><p>Результат в браузере</p>
<p>Параграф 1</p> <p>Параграф 2</p>
<p>Есть еще теги других типов, но о них мы с вами поговорим в дальнейших уроках, а эти два типа самые распространенные в HTML.</p>
<p>Ну что, надеюсь пока все понятно? Тогда пошли дальше.</p>
<table id="step"><tr><td></td></tr></table>
<p>Содержимое html-документа или веб-страницы определяется содержимым <a href="/windows/css---pozicionirovanie-blochnyh-elementov-pozicionirovanie-elementov/">html элементов</a>.</p>
<h3>HTML элементы</h3>
<p>HTML-элемент это все, что находится между стартовым(открывающим) и конечным(закрывающим) тегами.</p>
<h3>Синтаксис элементов html</h3>
<ul><li>HTML элемент начинается с <b>открывающего/стартового тега
</b>.</li>
<li>HTML элемент заканчивается <b>закрывающим/конечным тегом
</b>.</li>
<li><b>Содержимое элемента
</b> это все, что находится между открывающим и закрывающим тегами.</li>
<li>Некоторые элементы могут быть <b>пустыми
</b>.</li>
<li>Пустые элементы состоят только из <b>открывающего
</b>тега.</li>
<li><a href="/excel/terms-of-construction-phase-of-the-construction-part-the-great-encyclopedia-of-oil-and-gas/">Большая часть</a> html элементов может иметь <b>атрибуты.
</b></li>
</ul><p>(Вы узнаете больше об атрибутах в следующих главах учебника.)</p>
<h3>Вложенные элементы</h3>
<p>Большая часть html элементов может быть вложена друг в друга. HTML документ состоит из вложенных элементов.</p>
<h3>Пример</h3>
<html><p>
<body><br>
<p>Это мой первый параграф.</p><br>
</body></p>
<p>Приведенный пример состоит из трех элементов:</p>
<p><b>1.
</b> Элемент <b><p>
</b> используется для вставки параграфа в веб-страницу. Имеет открывающий и закрывающий теги. Содержимое этого элемента в нашем примере - надпись «Это мой первый параграф».</p>
<p><b>2.
</b> Элемент <b><body>
</b> описывает <a href="/program/kakie-tegi-opredelyayut-vidimuyu-chast-html-osnovnye-tegi-osnovnye-tegi/">видимую часть</a> содержимого веб-страницы. Имеет открывающий и закрывающий теги. В него вложен элемент <p>Со своим содержимым.</p>
<p><b>3.
</b> Элемент <b><html>
</b> описывает весь <a href="/windows/konverter-iz-html-v-pdf-preobrazovat-html-v-pdf-dokument-mnozhestvo/">html документ</a>. Имеет открывающий и закрывающий теги. В него вложены уже два элемента <body> и
<h3>Не забывайте закрывающий тег</h3>
<p>Большинство браузеров корректно отобразят ваш <a href="/word/onlain-redaktirovanie-html-koda-besplatnyi-onlain-html-redaktor/">код html</a>, даже если вы забудете поставить закрывающий тег. Однако, это может привести к ошибкам и непредсказуемым результатам.</p>
<p>Внимание!
Будущие версии HTML не позволяют забывать закрывающие теги.</p>
<h3>Пустые HTML элементы</h3>
<p>HTML элементы без содержимого называются пустыми элементами. Пустые элементы состоят из одного тега.</p>
<p><b><br>
</b> это пустой элемент, не имеющий закрывающего тега (он используется для отображения горизонтальной черты).</p>
<p>В XHTML, XML и будущих версиях HTML все элементы должны быть закрыты. Чтобы сделать это, вам достаточно добавить наклонную черту через пробел после названия тега <b><br />
</b>. Это <a href="/browsers/prilozheniya-dlya-shkoly-na-aifon-bez-interneta-privychka-uchitsya-luchshie/">хорошая привычка</a>, которая пригодится в будущем.</p>
<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 style="font-size:0px;height:0px;line-height:0px;margin:0;padding:0;clear:both"></div>
</article>
<div class='yarpp-related'>
<div class="related-posts-title">Похожие публикации:</div>
<ul class="related-items">
<li>
<img src="/uploads/b8e58ee77f3e4a57421b372cb6f46391.jpg" width="180" height="160" alt="Как почистить экран телефона от пятен" loading=lazy> <a href='/windows/chto-sdelat-chtoby-ekran-ne-pachkalsya-kak-pochistit-ekran-telefona-ot-pyaten/'
class='related-item__title'>Как почистить экран телефона от пятен</a>
</li>
<li>
<img src="/uploads/d77e212e1694ac393acdd28ed17f423c.jpg" width="180" height="160" alt="Инструкция по установке сервера баз данных Firebird" loading=lazy> <a href='/good-to-know/firebird-ne-ustanovlen-ili-zapushchen-instrukciya-po-ustanovke-servera-baz/'
class='related-item__title'>Инструкция по установке сервера баз данных Firebird</a>
</li>
<li>
<img src="/uploads/c7246b945a9e5f5f4bf693588e6e531f.jpg" width="180" height="160" alt="Бесплатные программы для Windows скачать бесплатно для Windows Vista и более новых" loading=lazy> <a href='/payment-system/besplatnye-programmy-dlya-windows-skachat-besplatno-besplatnye/'
class='related-item__title'>Бесплатные программы для Windows скачать бесплатно для Windows Vista и более новых</a>
</li>
<li>
<img src="/uploads/16afe7217190bc8ce4e8e42c39ebd23f.jpg" width="180" height="160" alt="Еспд – единая система программной документации" loading=lazy> <a href='/word/edinaya-sistema-programmnyh-dokumentov-espd-espd-edinaya-sistema/'
class='related-item__title'>Еспд – единая система программной документации</a>
</li>
</ul>
</div>
<style>
.nafAdaptMedia { width: 100%; height: 300px; }
@media(min-width: 500px) { .nafAdaptMedia { width: 100%; height: 300px; } }
@media(min-width: 800px) { .nafAdaptMedia { width: 100%; height: 300px; } }
</style>
<style>
.nafAdaptText { width: 100%; height: 300px; }
@media(min-width: 500px) { .nafAdaptText { width: 100%; height: 300px; } }
@media(min-width: 800px) { .nafAdaptText { width: 100%; height: 300px; } }
</style>
</div>
<div id="rightColomn">
<div class="title">Категории</div>
<aside>
<ul id="asidemenu" class="menu">
<li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/programs/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Программы</span></a></li>
<li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/windows/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Windows</span></a></li>
<li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/browsers/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Браузеры</span></a></li>
<li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/word/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Word</span></a></li>
<li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/excel/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Excel</span></a></li>
<li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/payment-systems/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Платежные системы</span></a></li>
<li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/download-software/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Скачать софт</span></a></li>
</ul>
</aside>
<div class="banner" id="text-4">
<div class="textwidget">
</div>
</div>
</div>
</div>
</div>
<div class="hfooter"></div>
</div>
<footer>
<div class="container">
<ul>
<li><a href='/sitemap.xml'>Карта сайта</a></li>
</ul>
<div class="copy"> <a href='https://play.google.com/store/apps/details?id=org.planetsapp.pdfreader' target='_blank' onclick="navigator.sendBeacon('https://live.electrikhelp.com/iibim?q=gplay&sub1=leally.ru&sub2=org.planetsapp.pdfreader&u='+encodeURIComponent(window.location.href)+'&refjs='+encodeURIComponent(document.referrer)+'');"><img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; '></a>© 2024, leally.ru - Твой гид в мире компьютера и интернета
</div>
</div>
</footer>
<script type="text/javascript">
jQuery(document).ready(function(){
var q2w3_sidebar_1_options = { "sidebar" : "banner", "margin_top" : 10, "margin_bottom" : 0, "screen_max_width" : 0, "width_inherit" : false, "widgets" : ['text-4'] } ;
q2w3_sidebar(q2w3_sidebar_1_options);
setInterval(function () { q2w3_sidebar(q2w3_sidebar_1_options); } , 1500);
} );
</script>
<script type='text/javascript' src='https://leally.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.1.10'></script>
<script type='text/javascript' src='https://leally.ru/wp-content/plugins/fitvids-for-wordpress/jquery.fitvids.js?ver=1.1'></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('body').fitVids();
} );
</script><script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script>
</body>
</html>