Azərbaycanca AzərbaycancaБеларускі БеларускіDansk DanskDeutsch DeutschEspañola EspañolaFrançais FrançaisIndonesia IndonesiaItaliana Italiana日本語 日本語Қазақ ҚазақLietuvos LietuvosNederlands NederlandsPortuguês PortuguêsРусский Русскийසිංහල සිංහලแบบไทย แบบไทยTürkçe TürkçeУкраїнська Українська中國人 中國人United State United StateAfrikaans Afrikaans
Підтримка
www.wikidata.uk-ua.nina.az

Елементи HTML основні компоненти мови розмітки HTML HTML документ складається з головного елементу html до змісту якого

Елементи HTML

Елементи HTML

Елементи HTML — основні компоненти мови розмітки HTML. HTML-документ складається з головного елементу html, до змісту якого додаються інші елементи.

Кожен елемент має свою унікальну назву, яка записується латинськими літерами і не чутлива до їхнього регістру. В загальному вигляді елемент має три складові: теги (початковий та кінцевий), атрибути та зміст (контент). Тег — це назва елементу, записана у кутових дужках (< >). Атрибути задають технічну інформацію про елемент. Зміст елемента — це вся необхідна текстова та графічна інформація документа, яка буде відтворюватися браузером на екрані.

Багато хто вважає, що елементи — це і є теги (наприклад, «тег p»). Проте варто пам'ятати, що елемент — це здебільшого дві складові (теги і зміст), а тег — це складова елемента. Наприклад, елемент head завжди представлений в документі, навіть якщо обидва теги, <head> та </head>, відсутні в розмітці.

Загальний огляд

Специфікація HTML 4.01 [ 4 червня 2016 у Wayback Machine.] описує 91 елемент, кожний з яких має щонайменш 16 атрибутів. Ці атрибути є спільними для всіх елементів, усі вони не обов'язкові. Кожний елемент входить щонайменше до одного з трьох визначень типу документа (DTD). У кожному DTD встановлені синтаксичні правила запису елементу: зазначаються теги елемента, повний список атрибутів та настанови щодо значень атрибутів та модель змісту елемента. Деякі елементи мають статус не рекомендованих для застосування у розмітці. Це пояснюється тим, що в подальшому розвитку мови HTML їх планують прибрати з розмітки.

Синтаксис

image
Складові частини HTML-елементу:
  • Початковий тег: <abbr … >
    • Атрибут:
      • назва: title
      • значення: World Wide Web
  • Зміст: WWW
  • Кінцевий тег: </abbr>
Повний запис: <abbr title="World Wide Web">WWW</abbr>

Початковий тег елемента має вигляд <element-name>, а кінцевий тег має вигляд </element-name>. Атрибути елемента записуються в початковому тегу одразу після назви елемента. Зміст елемента записується між його двома тегами.

Наприклад: <element-name element-attribute="attribute-value">зміст елемента</element-name>

Деякі елементи, наприклад p та li, можуть не мати кінцевого тегу. Кілька з них, наприклад head та body, також можуть не мати і початкового тегу. Деякі елементи, наприклад br, не мають змісту, тож і не мають кінцевого тегу.

Деякі елементи мають обов'язкові атрибути, без наявності яких вони не зможуть виконувати свої функції (наприклад, атрибут href елементу a або атрибут src елементу img).

Моделі змісту елементів

image
Категорії вмісту елементів HTML

Модель змісту елемента — це перелік типів даних, які може приймати зміст елемента, а також перелік інших елементів HTML, які можуть входити до змісту елемента. Наприклад, в суворому DTD для елемента dl зазначено, що до його змісту можуть входити лише елементи dt або dd. А елемент option може містити виключно текст та (мнемоніки).

DTD HTML [ 4 січня 2010 у Wayback Machine.] зазначає дві основні моделі змісту: inline (інлайн) та block (блок). Елементи з моделлю змісту inline називаються інлайн-елементи, аналогічно є і блок-елементи.

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

До інлайн-елементів належать: tt, i, b, big, small, em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym, a, img, object, br, script, map, q, sub, sup, span, bdo, input, select, textarea, label, button.

До блок-елементів належать: p, dl, div, noscript, blockquote, form, hr, table, fieldset, address, h1, h2, h3, h4, h5, h6, ol, ul, pre.

Базові елементи HTML

Документ HTML має чітку структуру. Спочатку в документі має бути вказана (декларація типу документа) (!doctype), у якій зазначається DTD. Одразу після неї починається головний елемент документа — html. Модель змісту для цього елементу визначена як "head, body", це означає, що до змісту елемента html спочатку може входити виключно елемент head, а за ним елемент body. Елемент head окреслює межі так званої «шапки» документа, де записується технічна інформація про документ, а елемент body несе в собі «тіло» документа — весь його корисний зміст.

Шапка документа (head)

Елемент head містить в собі технічну інформацію про документ, таку як назва, ключові слова (для пошукових роботів) та інші метадані. Браузери не відтворюють зміст елементу на екрані, проте можуть надати користувачам інформацію з елементу за допомогою інших механізмів.

Теги: може не мати початкового та кінцевого тегу.

Атрибути:

  • lang — мова;
  • dir — напрямок тексту;
  • profile — визначає розташування одного чи кількох профілів метаданих.

Модель змісту: до змісту елемента входять елементи title та base, проте base може бути відсутній. Також можуть бути присутні елементи script, style, object, link та meta.

Назва документа (title)

У кожному документі HTML в елементі head обов'язково має бути (лише один на документ) елемент title, оскільки він є назвою документа і застосовується для визначення його загального змісту. Також документам рекомендується давати максимально розгорнуті назви, які найбільш широко покривають зміст документа. Наприклад, замість того, щоб називати документ просто «Загальна структура», потрібно його назвати «Загальна структура документа HTML». Хоча елемент title і знаходиться в межах елемента head, його зміст завжди відтворюється браузерами. В ОС Windows текст назви відтворюється у верхньому лівому кутку вікна браузера.

Теги: початковий (<title>) і кінцевий (</title>) теги завжди мають бути присутні у розмітці.

Атрибути:

  • lang — мова;
  • dir — напрямок тексту;

Модель змісту: до змісту елемента title може входити лише текст і (символьні мнемоніки).

Метадані документа (meta)

В тезі meta можуть знаходитись різні дані про сторінку. Наприклад в meta прописують типи кодування сторінки або ключові слова для пошуку сайту. Meta не має закриваючого тегу.

Тіло документа (body)

В тілі документа знаходиться його корисний зміст. Цей зміст може відтворюватися браузерами різноманітними шляхами. Наприклад, в аспекті аудіо браузерів тіло документа являє собою промову, для текстових браузерів вся інформація постає у вигляді суцільного тексту, а для графічних браузерів тіло документа можна уявити як полотно, на якому з'являється весь зміст документу: текст, зображення, кольори, графіка та інше.

Теги: може не мати початкового та кінцевого тегу.

Атрибути:

  • onload — містить в собі скрипт, який виконується, як тільки документ завантажився;
  • onunload — містить в собі скрипт, який виконується, як тільки документ вивантажився;
  • та ще 16 загальних атрибутів.

Модель змісту: до елементу body у необмеженій кількості входять блок-елементи або елемент script, а також можуть з'являтися елементи ins або del.

Типи елементів HTML

За своїм призначенням та дією елементи HTML можна розділити на три великі категорії: структурні, презентаційні та елементи для інтерактивної взаємодії з користувачем.

Структурні

Елементи структурної розмітки застосовуються задля опису семантики тексту та задання структури документа. Своєю чергою, в залежності від змісту документа, структурні елементи поділяються на: текст, списки, таблиці, гіперпосилання та додаткові об'єкти (до яких відносяться зображення та аплети).

Вони не зазначають ніякого спеціального (візуального) відтворення тексту, проте більшість браузерів мають стандартні стилі форматування для кожного елемента. Для подальшого стилізування тексту рекомендується використовувати Каскадні таблиці стилів (CSS).

Презентаційні

Елементи презентаційної (візуальної) розмітки застосовуються задля опису зовнішнього вигляду документа та не зазначають при цьому функцій тексту до якого вони застосовуються. Остання чинна специфікація HTML 4.01 визначає більшість з цих елементів такими, що не рекомендується застосовувати у розмітці.

В залежності від свого змісту, елементи презентаційної розмітки поділяють на: елементи додання каскадних таблиць стилів, візуальні елементи тексту (шрифти, кольори, насиченість та нахил шрифту, лінії та інші) та фрейми.

Інтерактивної взаємодії

Елементи інтерактивної взаємодії дозволяють користувачам впливати на зміст або вигляд документа. Вони поділяються на два види: для введення даних користувачами та скрипти для активних документів.

Посилання та джерела

  1. . World Wide Web Consortium. 24 грудня 1999. Архів оригіналу за 1 грудня 2009. Процитовано 15 грудня 2009. Some people refer to elements as tags (e.g., "the P tag"). Remember that the element is one thing, and the tag (be it start or end tag) is another. For instance, the HEAD element is always present, even though both start and end HEAD tags may be missing in the markup.
  2. . World Wide Web Consortium. 24 грудня 1999. Архів оригіналу за 1 грудня 2009. Процитовано 17 грудня 2009. Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
  3. . World Wide Web Consortium. 24 грудня 1999. Архів оригіналу за 7 січня 2010. Процитовано 21 грудня 2009. User agents do not generally render elements that appear in the HEAD as content. They may, however, make information in the HEAD available to users through other mechanisms.
  4. . World Wide Web Consortium. 24 грудня 1999. Архів оригіналу за 7 січня 2010. Процитовано 22 грудня 2009. Every HTML document must have a TITLE element in the HEAD section.
  5. . World Wide Web Consortium. 24 грудня 1999. Архів оригіналу за 7 січня 2010. Процитовано 21 грудня 2009. For example, for visual browsers, you can think of the body as a canvas where the content appears: text, images, colors, graphics, etc. For audio user agents, the same content may be spoken.
  6. . World Wide Web Consortium. 24 грудня 1999. Архів оригіналу за 1 грудня 2009. Процитовано 16 грудня 2009. Topics are grouped into three categories: structure, presentation, and interactivity. Although it is not easy to divide HTML constructs perfectly into these three categories, the model reflects the HTML Working Group's experience that separating a document's structure from its presentation produces more effective and maintainable documents.
  • Специфікація HTML 4.01 [ 6 березня 2005 у Wayback Machine.]

Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри, мобільний, телефон, android, ios, apple, мобільний телефон, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, ПК, web, Інтернет

Elementi HTML osnovni komponenti movi rozmitki HTML HTML dokument skladayetsya z golovnogo elementu html do zmistu yakogo dodayutsya inshi elementi Kozhen element maye svoyu unikalnu nazvu yaka zapisuyetsya latinskimi literami i ne chutliva do yihnogo registru V zagalnomu viglyadi element maye tri skladovi tegi pochatkovij ta kincevij atributi ta zmist kontent Teg ce nazva elementu zapisana u kutovih duzhkah lt gt Atributi zadayut tehnichnu informaciyu pro element Zmist elementa ce vsya neobhidna tekstova ta grafichna informaciya dokumenta yaka bude vidtvoryuvatisya brauzerom na ekrani Bagato hto vvazhaye sho elementi ce i ye tegi napriklad teg p Prote varto pam yatati sho element ce zdebilshogo dvi skladovi tegi i zmist a teg ce skladova elementa Napriklad element head zavzhdi predstavlenij v dokumenti navit yaksho obidva tegi lt head gt ta lt head gt vidsutni v rozmitci Zagalnij oglyadSpecifikaciya HTML 4 01 4 chervnya 2016 u Wayback Machine opisuye 91 element kozhnij z yakih maye shonajmensh 16 atributiv Ci atributi ye spilnimi dlya vsih elementiv usi voni ne obov yazkovi Kozhnij element vhodit shonajmenshe do odnogo z troh viznachen tipu dokumenta DTD U kozhnomu DTD vstanovleni sintaksichni pravila zapisu elementu zaznachayutsya tegi elementa povnij spisok atributiv ta nastanovi shodo znachen atributiv ta model zmistu elementa Deyaki elementi mayut status ne rekomendovanih dlya zastosuvannya u rozmitci Ce poyasnyuyetsya tim sho v podalshomu rozvitku movi HTML yih planuyut pribrati z rozmitki Sintaksis Skladovi chastini HTML elementu Pochatkovij teg lt abbr gt Atribut nazva title znachennya World Wide Web Zmist WWW Kincevij teg lt abbr gt Povnij zapis lt abbr title World Wide Web gt WWW lt abbr gt Pochatkovij teg elementa maye viglyad lt element name gt a kincevij teg maye viglyad lt element name gt Atributi elementa zapisuyutsya v pochatkovomu tegu odrazu pislya nazvi elementa Zmist elementa zapisuyetsya mizh jogo dvoma tegami Napriklad lt element name element attribute attribute value gt zmist elementa lt element name gt Deyaki elementi napriklad p ta li mozhut ne mati kincevogo tegu Kilka z nih napriklad head ta body takozh mozhut ne mati i pochatkovogo tegu Deyaki elementi napriklad br ne mayut zmistu tozh i ne mayut kincevogo tegu Deyaki elementi mayut obov yazkovi atributi bez nayavnosti yakih voni ne zmozhut vikonuvati svoyi funkciyi napriklad atribut href elementu a abo atribut src elementu img Modeli zmistu elementiv Kategoriyi vmistu elementiv HTML Model zmistu elementa ce perelik tipiv danih yaki mozhe prijmati zmist elementa a takozh perelik inshih elementiv HTML yaki mozhut vhoditi do zmistu elementa Napriklad v suvoromu DTD dlya elementa dl zaznacheno sho do jogo zmistu mozhut vhoditi lishe elementi dt abo dd A element option mozhe mistiti viklyuchno tekst ta mnemoniki DTD HTML 4 sichnya 2010 u Wayback Machine zaznachaye dvi osnovni modeli zmistu inline inlajn ta block blok Elementi z modellyu zmistu inline nazivayutsya inlajn elementi analogichno ye i blok elementi Inlajn elementi mozhut mistiti viklyuchno dani tekst cifri simvoli mnemoniki ta inshi inlajn elementi Blok elementi mozhut mistiti inlajn elementi ta inshi blok elementi Cya strukturna vidminnist polyagaye u tomu sho blok elementi stvoryuyut bilsh shiroki strukturi Krim togo za zamovchennyam blok elementi vidtvoryuyutsya brauzerami ne tak yak inlajn elementi Zdebilshogo blok elementi pochinayutsya z novogo ryadka u toj chas yak inlajn elementi ne perenosyatsya na novij ryadok Do inlajn elementiv nalezhat tt i b big small em strong dfn code samp kbd var cite abbr acronym a img object br script map q sub sup span bdo input select textarea label button Do blok elementiv nalezhat p dl div noscript blockquote form hr table fieldset address h1 h2 h3 h4 h5 h6 ol ul pre Bazovi elementi HTMLDokument HTML maye chitku strukturu Spochatku v dokumenti maye buti vkazana deklaraciya tipu dokumenta doctype u yakij zaznachayetsya DTD Odrazu pislya neyi pochinayetsya golovnij element dokumenta html Model zmistu dlya cogo elementu viznachena yak head body ce oznachaye sho do zmistu elementa html spochatku mozhe vhoditi viklyuchno element head a za nim element body Element head okreslyuye mezhi tak zvanoyi shapki dokumenta de zapisuyetsya tehnichna informaciya pro dokument a element body nese v sobi tilo dokumenta ves jogo korisnij zmist Shapka dokumenta head Element head mistit v sobi tehnichnu informaciyu pro dokument taku yak nazva klyuchovi slova dlya poshukovih robotiv ta inshi metadani Brauzeri ne vidtvoryuyut zmist elementu na ekrani prote mozhut nadati koristuvacham informaciyu z elementu za dopomogoyu inshih mehanizmiv Tegi mozhe ne mati pochatkovogo ta kincevogo tegu Atributi lang mova dir napryamok tekstu profile viznachaye roztashuvannya odnogo chi kilkoh profiliv metadanih Model zmistu do zmistu elementa vhodyat elementi title ta base prote base mozhe buti vidsutnij Takozh mozhut buti prisutni elementi script style object link ta meta Nazva dokumenta title U kozhnomu dokumenti HTML v elementi head obov yazkovo maye buti lishe odin na dokument element title oskilki vin ye nazvoyu dokumenta i zastosovuyetsya dlya viznachennya jogo zagalnogo zmistu Takozh dokumentam rekomenduyetsya davati maksimalno rozgornuti nazvi yaki najbilsh shiroko pokrivayut zmist dokumenta Napriklad zamist togo shob nazivati dokument prosto Zagalna struktura potribno jogo nazvati Zagalna struktura dokumenta HTML Hocha element title i znahoditsya v mezhah elementa head jogo zmist zavzhdi vidtvoryuyetsya brauzerami V OS Windows tekst nazvi vidtvoryuyetsya u verhnomu livomu kutku vikna brauzera Tegi pochatkovij lt title gt i kincevij lt title gt tegi zavzhdi mayut buti prisutni u rozmitci Atributi lang mova dir napryamok tekstu Model zmistu do zmistu elementa title mozhe vhoditi lishe tekst i simvolni mnemoniki Metadani dokumenta meta V tezi meta mozhut znahoditis rizni dani pro storinku Napriklad v meta propisuyut tipi koduvannya storinki abo klyuchovi slova dlya poshuku sajtu Meta ne maye zakrivayuchogo tegu Tilo dokumenta body V tili dokumenta znahoditsya jogo korisnij zmist Cej zmist mozhe vidtvoryuvatisya brauzerami riznomanitnimi shlyahami Napriklad v aspekti audio brauzeriv tilo dokumenta yavlyaye soboyu promovu dlya tekstovih brauzeriv vsya informaciya postaye u viglyadi sucilnogo tekstu a dlya grafichnih brauzeriv tilo dokumenta mozhna uyaviti yak polotno na yakomu z yavlyayetsya ves zmist dokumentu tekst zobrazhennya kolori grafika ta inshe Tegi mozhe ne mati pochatkovogo ta kincevogo tegu Atributi onload mistit v sobi skript yakij vikonuyetsya yak tilki dokument zavantazhivsya onunload mistit v sobi skript yakij vikonuyetsya yak tilki dokument vivantazhivsya ta she 16 zagalnih atributiv Model zmistu do elementu body u neobmezhenij kilkosti vhodyat blok elementi abo element script a takozh mozhut z yavlyatisya elementi ins abo del Tipi elementiv HTMLZa svoyim priznachennyam ta diyeyu elementi HTML mozhna rozdiliti na tri veliki kategoriyi strukturni prezentacijni ta elementi dlya interaktivnoyi vzayemodiyi z koristuvachem Strukturni Elementi strukturnoyi rozmitki zastosovuyutsya zadlya opisu semantiki tekstu ta zadannya strukturi dokumenta Svoyeyu chergoyu v zalezhnosti vid zmistu dokumenta strukturni elementi podilyayutsya na tekst spiski tablici giperposilannya ta dodatkovi ob yekti do yakih vidnosyatsya zobrazhennya ta apleti Voni ne zaznachayut niyakogo specialnogo vizualnogo vidtvorennya tekstu prote bilshist brauzeriv mayut standartni stili formatuvannya dlya kozhnogo elementa Dlya podalshogo stilizuvannya tekstu rekomenduyetsya vikoristovuvati Kaskadni tablici stiliv CSS Prezentacijni Elementi prezentacijnoyi vizualnoyi rozmitki zastosovuyutsya zadlya opisu zovnishnogo viglyadu dokumenta ta ne zaznachayut pri comu funkcij tekstu do yakogo voni zastosovuyutsya Ostannya chinna specifikaciya HTML 4 01 viznachaye bilshist z cih elementiv takimi sho ne rekomenduyetsya zastosovuvati u rozmitci V zalezhnosti vid svogo zmistu elementi prezentacijnoyi rozmitki podilyayut na elementi dodannya kaskadnih tablic stiliv vizualni elementi tekstu shrifti kolori nasichenist ta nahil shriftu liniyi ta inshi ta frejmi Interaktivnoyi vzayemodiyi Elementi interaktivnoyi vzayemodiyi dozvolyayut koristuvacham vplivati na zmist abo viglyad dokumenta Voni podilyayutsya na dva vidi dlya vvedennya danih koristuvachami ta skripti dlya aktivnih dokumentiv Posilannya ta dzherela World Wide Web Consortium 24 grudnya 1999 Arhiv originalu za 1 grudnya 2009 Procitovano 15 grudnya 2009 Some people refer to elements as tags e g the P tag Remember that the element is one thing and the tag be it start or end tag is another For instance the HEAD element is always present even though both start and end HEAD tags may be missing in the markup World Wide Web Consortium 24 grudnya 1999 Arhiv originalu za 1 grudnya 2009 Procitovano 17 grudnya 2009 Generally block level elements may contain inline elements and other block level elements Generally inline elements may contain only data and other inline elements Inherent in this structural distinction is the idea that block elements create larger structures than inline elements World Wide Web Consortium 24 grudnya 1999 Arhiv originalu za 7 sichnya 2010 Procitovano 21 grudnya 2009 User agents do not generally render elements that appear in the HEAD as content They may however make information in the HEAD available to users through other mechanisms World Wide Web Consortium 24 grudnya 1999 Arhiv originalu za 7 sichnya 2010 Procitovano 22 grudnya 2009 Every HTML document must have a TITLE element in the HEAD section World Wide Web Consortium 24 grudnya 1999 Arhiv originalu za 7 sichnya 2010 Procitovano 21 grudnya 2009 For example for visual browsers you can think of the body as a canvas where the content appears text images colors graphics etc For audio user agents the same content may be spoken World Wide Web Consortium 24 grudnya 1999 Arhiv originalu za 1 grudnya 2009 Procitovano 16 grudnya 2009 Topics are grouped into three categories structure presentation and interactivity Although it is not easy to divide HTML constructs perfectly into these three categories the model reflects the HTML Working Group s experience that separating a document s structure from its presentation produces more effective and maintainable documents Specifikaciya HTML 4 01 6 bereznya 2005 u Wayback Machine

Дата публікації:
Топ