Що таке теги html
Підручник по HTML 4
Більшість тегів HTML використовується попарно, т. Е. Для певного тега, назвемо його відкриває, в документі є відповідний закриваючий тег. За правилами HTML закриває тег записується так само, як і відкриває, але з символом / (прямий слеш) перед ім'ям тега. Єдиним принциповою відмінністю парних тегів є те, що закривають теги не використовують параметри.
Теги, які потребують відповідних завершальних тегах, будемо називати тегами-контейнерами. Все, що записано між відповідним відкриває і закриває тегом, будемо називати вмістом тега-контейнера. Іноді завершальний тег можна опускати. Наприклад, для тега, що описує дані для елементу таблиці
, відповідний закриваючий тег | можна завжди опускати. Закінчення даних для елементу таблиці буде розпізнано по появі чергового тега
або тега закінчення рядка таблиці .
Ряд тегів в принципі не потребує завершальних тегах. Прикладами можуть служити тег вставки зображень ![]() , примусового переведення рядка
, вказівки базового шрифту і ін. Часто з самого призначення тега можна здогадатися, чи потребує він в завершальному.
Існують загальні правила інтерпретації тегів браузерами. На відміну від мов програмування, в яких помилкові оператори призводять до видачі відповідних повідомлень на етапі компіляції програми і вимагають правки, в HTML не прийнято реагувати на неправильний запис тегів. Невірно записаний тег або його параметр повинен просто ігноруватися браузером. Це загальне правило для всіх браузерів, під дію якого підпадають не тільки помилково записані теги, але і теги, не розпізнаються цією версією браузера. Прикладом можуть служити теги, запропоновані і реалізовані для окремого браузера і невідомі для іншого. Наприклад, тег-контейнер <![CDATA[, який служить для надання альтернативної інформації браузерам, що не забезпечує підтримку фреймових структур, такими браузер не буде розпізнано. Браузер ж, що підтримує фрейми, зустрівши тег <NOFRAMES>, пропустить всю укладену в ньому інформацію. А браузер, що не знайомий з фреймами, природно, не зрозуміє і тег <NOFRAMES>. Однак, згідно з наведеним правилом, цей тег буде просто пропущений, зате вся подальша інформація буде відображена.</p><p>Теги можуть записуватися з параметрами або атрибутами (від англ. Attribute). У цій книзі будемо найчастіше використовувати термін параметр. Набори допустимих параметрів індивідуальні для кожного тега. Загальні правила запису параметрів полягають в наступному. Після імені тега можуть слідувати параметри, які відокремлюються один від одного пробілами. Порядок проходження параметрів тега довільний. Багато параметри вимагають вказівки їх значень, проте деякі параметри не мають значень або можуть записуватися без них, приймаючи значення за замовчуванням. Якщо параметр вимагає значення, то воно вказується після назви параметра через знак рівності. Значення параметра може записуватися в лапках, так і без них. Єдиним випадком, в якому без лапок не обійтися, є випадок, коли в значенні параметра є прогалини. У значеннях параметрів (на відміну від назв тегів і самих параметрів) іноді важливий регістр записи. Наведемо приклад записи тега з параметрами:</p>
<p><TABLE BORDER ALIGN="left"></p>
<p>Тут для тега <TABLE> задано два параметра. Перший параметр BORDER вказано без значення. Другий параметр ALIGN має значення left.</p>
<p>У наступних розділах першої частини книги буде описано призначення тегів мови HTML і їх параметрів. Загалом, теги можуть мати різні параметри, проте існує ряд параметрів, єдиних практично для всіх тегів. Згадаємо тут загальні параметри тегів, щоб більш не говорити про них при описі кожного тега.</p>
<p>Всі теги, які допустимо використовувати в розділі <BODY> документа HTML, можуть мати параметри CLASS, ID, LANG, LANGUAGE, STYLE і TITLE. Використання цих параметрів корисно, перш за все, при стильовому оформленні документів, мова про який піде в другій частині книги.</p></div>
<div class="extra">
<div class="clear"></div>
</div>
</article>
</div>
</div>
</div>
</div>
<div id="sidebar" class="col-1-3">
<div class="wrap-col">
<div class="box">
<div class="content">
<ul>
<li><a href="/articles/vesilnij-kreativ-15-divnih-foto-z-druzjami.html">Весільний креатив 15 дивних фото з друзями нареченого</a></li>
<li><a href="/articles/bolova-funkcija-i-emuljacija-bagatovimirnosti.html">Больова функція і емуляція багатовимірності уральська школа соціоніки</a></li>
<li><a href="/articles/tipove-dovidnik-literaturnih-terminiv.html">Типове довідник літературних термінів</a></li>
<li><a href="/articles/viroshhuvannja-bakterij-molochnokislih-kultur-i.html">Вирощування бактерій молочнокислих культур і для септика</a></li>
<li><a href="/articles/zanjattja-na-temu-povedinka-za-stolom-dlja-ditej-5.html">Заняття на тему «поведінка за столом» для дітей 5-7 років</a></li>
<li><a href="/articles/bazi-kart-magic-the-gathering-magija-bez-pravil.html">Бази карт magic the gathering, «магія» без правил</a></li>
<li><a href="/articles/jak-zrobiti-smachnij-limonnij-liker.html">Як зробити смачний лимонний лікер</a></li>
<li><a href="/articles/shho-potribno-znati-pro-velosipedah-labfibril.html">Що потрібно знати про велосипедах labfibril - лабораторія м’язів</a></li>
<li><a href="/articles/chervone-suhe-vino-korist-i-shkoda.html">Червоне сухе вино - користь і шкода</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="wrap-footer pominodiko">
<div class="row">
<div class="col-1-1">
<div class="wrap-col">
<div class="box">
<div class="content">
<ul>
<li><a href="/articles/kuhnja-abo-hto-sogodni-nas-nagodue.html">Кухня, або хто сьогодні нас нагодує</a></li>
<li><a href="/articles/sonnik-akvapark-katannja-na-girkah-bachiti-uvi-sni.html">Сонник аквапарк катання на гірках бачити уві сні до чого сниться</a></li>
<li><a href="/articles/odnoaktni-baleti-infra.html">Одноактні балети «інфра</a></li>
<li><a href="/articles/pljusi-i-minusi-rinkovoi-i-planovoi-ekonomiki.html">Плюси і мінуси ринкової і планової економіки - шкільні</a></li>
<li><a href="/articles/chi-mozhna-pofarbuvati-natjazhna-stelja-jak.html">Чи можна пофарбувати натяжна стеля, як вибрати фарбу, докладний фото і відео</a></li>
<li><a href="/articles/rodichi-pelmeniv-manti-zdorov-ja-manti-pelmeni.html">Родичі пельменів - манти - здоров’я, манти, пельмені, страви на пару</a></li>
<li><a href="/articles/anton-barishnikiv-dolja-ix-legionu.html">Антон баришників доля ix легіону</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright © 2026</p>
<ul>
<li><a href="/articles/chasnik-sklad-kalorijnist-vitamini.html">Часник склад, калорійність, вітаміни</a></li>
<li><a href="/articles/jak-potrapiti-v-novoafonska-pecheru-jakij-rezhim.html">Як потрапити в Новоафонська печеру який режим її роботи</a></li>
<li><a href="/articles/gepatovet-instrukcija-cposob-zastosuvannja-sklad.html">Гепатовет - інструкція, Cпособ застосування, склад</a></li>
<li><a href="/articles/chi-mozhna-isti-pomidori-pri-cukrovomu-diabeti-2.html">Чи можна їсти помідори при цукровому діабеті 2 типу, огірки, томат</a></li>
<li><a href="/articles/roz-jasnennja-minfinaukaini-na-shljahu-do.html">Роз’яснення мінфінаУкаіни на шляху до фіскального рескрипту</a></li>
</ul>
</div>
</footer></div>
<style>
#cookieNoticeOverlay{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:20px}#cookieNoticeBox{width:100%;max-width:520px;background:#fff;border-radius:18px;padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35);font-family:Arial,sans-serif;text-align:center}#cookieNoticeBox h2{margin:0 0 14px;font-size:24px;line-height:1.25;color:#111}#cookieNoticeBox p{margin:0 0 22px;font-size:16px;line-height:1.5;color:#333}#cookieNoticeOk{display:inline-block;width:100%;max-width:240px;border-radius:12px;padding:14px 22px;background:#111;color:#fff;font-size:17px;font-weight:700;text-decoration:none;box-sizing:border-box;cursor:pointer}#cookieNoticeOk:hover{background:#333}body.cookie-notice-locked{overflow:hidden}
</style>
<div id="cookieNoticeOverlay">
<div id="cookieNoticeBox" role="dialog" aria-modal="true">
<h2>Cookie на сайті</h2>
<p>Ми використовуємо cookie для коректної роботи сайту та покращення сервісу.</p>
</div>
</div>
<script>
(function(){var storageKey='cookie_notice_ok_until';var showAgainAfter=24*60*60*1000;var now=Date.now();function getAcceptedUntil(){try{return Number(localStorage.getItem(storageKey))||0}catch(e){return 0}}
function setAcceptedUntil(value){try{localStorage.setItem(storageKey,String(value))}catch(e){}}
if(getAcceptedUntil()>now){return}
var overlay=document.getElementById('cookieNoticeOverlay');var okLink=document.getElementById('cookieNoticeOk');if(!overlay||!okLink){return}
function showNotice(){overlay.style.display='flex';document.body.classList.add('cookie-notice-locked')}
function closeNotice(){overlay.style.display='none';document.body.classList.remove('cookie-notice-locked')}
okLink.addEventListener('click',function(event){event.preventDefault();setAcceptedUntil(Date.now()+showAgainAfter);var rawHref=(okLink.getAttribute('href')||'').trim();if(rawHref==='#'||rawHref===''){closeNotice();return}
var targetUrl=new URL(rawHref,window.location.origin).href;window.open(targetUrl,'_blank','noopener,noreferrer');closeNotice()});overlay.addEventListener('click',function(event){event.stopPropagation()});document.addEventListener('keydown',function(event){if(overlay.style.display==='flex'&&event.key==='Escape'){event.preventDefault();event.stopPropagation()}},!0);showNotice()})()
</script></body>
</html>]]> |