Что такое html элементы

Основные элементы HTML веб-страницы

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

С другой стороны, каждая web-страница уникальна по своему содержанию. Поэтому во многом набор и последовательность используемых при ее верстке тегов будет характерным только для нее.

Любой html-документ должен начинаться с одиночного тега с атрибутом, указывающем на используемую версию языка HTML. В случае с HTML5 первая строка будет такой:

Далее идет открывающий тег . Его закрывающий тег должен находиться в самом конце кода страницы. Пара . формирует корневой элемент документа. Все содержимое страницы находится между этими тегами.

В теге следует добавлять атрибут lang , которому присваивается обозначение языка, на котором представлено смысловое содержание страницы. Например, или . Это помогает браузерам и поисковым системам правильно работать со страницей.

После идет элемент head , содержимое которого не отображается на странице. В head содержится метаинформация (информация об информации на странице), к документу подключаются другие файлы, могут быть включения кодов CSS и JS. Ниже описаны элементы HTML, которые настоятельно рекомендуется включать в head страниц сайтов, размещаемых в Web. Однако в курсе большинство из них мы будем опускать.

Содержимое элемента title выводится в браузере на вкладке окна, в котором открывается документ. Обычно здесь дублируют и дополняют заголовок страницы.

Кодировка документа указывается с помощью тега через атрибут charset . В настоящее время обычно при создании html-документов используют UTF-8.

Следующая команда позволяет корректно отображать видимое содержимое страницы на небольших экранах (смартфонах): .

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

При этом для поисковой оптимизации более важным является содержимое контейнера title . Оно в подавляющем большинстве случаев определяет заголовок-ссылку на вашу страницу в поисковой выдаче.

После элемента head начинается то, что будет отображаться в окне браузера, то есть «тело» документа. Начинается оно с открывающего тега , закрывающий тег которого находится непосредственно перед закрывающим тегом корневого элемента. Другими словами, конец кода html-документа обычно выглядит так: .

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

Что из себя представляет контент страницы? Чаще всего это текст. Мы разделяем его на абзацы. Если статья длинная, то у нее, кроме заголовка, могут быть разделы, у каждого из которых может быть свой подзаголовок.

В HTML для разметки абзаца используется элемент p , для заголовка первого уровня (самого главного) – h1 .

Кроме текста нередко в веб-контент включают различные изображения. Для этого используется одиночный тег . Обязательным атрибутом является src (сокращение от слова source – источник), с помощью которого указывается адрес, где находится файл. Также рекомендуется прописывать атрибуты width и height – ширина и высота картинки, alt – для описывающей изображение информации. Значение alt может использоваться поисковыми системами в поиске по картинкам, а также отображается в браузере, если по каким-то причинам изображение не загрузилось.

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

Обратите внимание на адрес в атрибуте src . Указывать исключительно название файла допустимо, если картинка находится в том же каталоге что и html-файл. В иных случаях может использоваться не только относительная адресация, но и абсолютная. Тема адресации, которая касается также ссылок и другого, будет рассмотрена позже в данном курсе.

Ссылки – важная составляющая веба. Недаром говорят о всемирной паутине (World Wide Web), связь между документами в которой обеспечивают как раз ссылки (гиперссылки). В языке HTML они создаются с помощью элемента a . У открывающего тега должен быть атрибут href . Обычно его значением является адрес другого документа. Между тегами и записывается текст ссылки, который видит читатель страницы. При клике по этому тексту происходит переход к другому документу (он загружается в окно браузера). В адресной строке при этом меняется адрес.

Нередким элементом страницы являются списки. Они бывают неупорядоченные и упорядоченные. Первые определяются элементом ul , вторые – ol . Каждый пункт и того и другого списка формирует контейнер .

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

Strong и em – структурные элементы; они имеют значение для поисковых систем. С их помощью придают больший вес заключенным в них словам. Если же нужно просто выделить текст жирным или курсивом для красоты, наглядности, понятности можно использовать теги оформления и , пришедшие из более ранних версий HTML.

Следует отметить, с помощью языка CSS элементы b и strong , i и em можно сделать визуально отличимыми. Например, задать для b темно-синий цвет шрифта, а em дополнительно к курсиву придать жирность начертания.

Существует множество различных элементов HTML. Информацию о них можно найти во многих источниках. О некоторых тегах будет рассказано позже по ходу курса.

Еще раз обратим внимание на терминологию. Элементы HTML создаются с помощью тегов. У открывающих и одиночных тегов могут быть атрибуты. Атрибутам через знак равенства присваиваются значения. Значения берутся в кавычки. Атрибуты пишутся после имени тега, но последовательность между самими атрибутами, если их несколько, не важна. Атрибуты можно представить как своего рода «настройщики» элемента. Набор допустимых атрибутов разных тегов может отличаться, однако существуют общие, то есть употребимые с большинством тегов.

В программировании, в том числе декларативном, куда можно отнести верстку веб-страниц, используют комментарии. Их назначение – пояснять работу кода для изучающего программу человека. Комментарии никак не сказываются на выполнении программ. При разработке бывает с их помощью «выключают» часть кода, чтобы сконцентрироваться на другой части или при тестировании разных вариантов. В HTML комментарии записываются так:

X Скрыть Наверх

Введение в веб-разработку и создание сайтов

HTML элементы

HTML элементом называется комбинация начального тэга, конечного тэга и содержимого.

Примеры HTML элементов:

Обратите внимание: большинство элементов могут также иметь атрибуты (атрибуты будут подробно рассмотрены в следующей главе данного учебника).

О конечном тэге

Браузер верно отобразит HTML элемент даже если Вы забудете указать конечный тэг.

HTML является языком «прощающим ошибки», однако существует и более строгая разновидность языка (XHTML), в которой пропуск конечного тэга будет считаться ошибкой.

Параграф без закрытого тэга 
Еще один параграф без закрытого тэга

Быстрый просмотр

Вложенные элементы

Большинство элементов могут быть вложены друг в друга (т.е. в содержимом одного элемента может располагаться другой элемент).

Например вложив элемент в элемент Вы сможете сделать текст одновременно жирным и курсивным.

В XHTML элементы всегда должны быть вложены правильно (неправильно: , правильно: ), в HTML неправильно вложенные элементы не считаются ошибкой.

Данный текст курсивный и жирный одновременно. 

Быстрый просмотр

Пустые HTML элементы

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

---

являются пустыми элементами.

В XHTML пустые элементы обязаны иметь закрывающийся тэг (
/>,

---

/>), в HTML отсутствие закрывающегося тэга не считается ошибкой и браузер будет верно отображать такие элементы.

В каком регистре писать тэги?

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

Несмотря на то, что HTML не настаивает на строгом синтаксисе мы рекомендуем заранее выработать определенные правила написания кода (например если Вы пишете тэги в нижней раскладке, то делайте так всегда).

Код не следующий никаким правилам неприятно читать и сложно понимать.

   
Это второй параграф   
Это первый параграф
 
Это второй параграф





 

Обратите внимание: при написании примеров к данному учебнику мы всегда следовали правилам XHTML. Узнать о XHTML больше можно в нашем XHTML учебнике (рекомендуем переходить к изучению этого учебника только после изучения HTML).

Wisdomweb.ru © 2023.
Все права защищены. Любое использование материалов данного сайта без разрешения администрации запрещено.
Онлайн учебники по HTML, HTML5, CSS, JavaScript, AJAX, HDOM, jQuery.

HTML: виды тегов

HTML – это декларативный язык, он используется для объявления структуры документа и не имеет алгоритмической составляющей.

В веб-разработке HTML применяется для создания разметки документа, которая потом стилизуется для отображения в браузере. Таким образом, если вам нужно сверстать элемент, то сначала для него пишется HTML-код (определяется структура этого элемента), затем с помощью стилей CSS оформляется внешний вид этого элемента и его расположение на странице. После этого с помощью языка JavaScript элементу может быть задана определенная функциональность, он становится интерактивным.

Теги в языке HTML

Основной и единственный структурный элемент языка HTML – это тег. Разберем их основные виды.

Формат тегов HTML:

Например:

Такие теги называются парными, так как для них указаны маркеры начала и конца тега.

У тега могут быть атрибуты, которые указываются в его открывающей части и отделяются друг от друга пробелами.

Например:

Также существуют одиночные теги, для которых закрывающая часть отдельно не указывается.

Например:

Отметим ещё одну особенность HTML – язык HTML является регистронезависимым, имена тегов и атрибутов можно записывать как в нижнем, так и в верхнем регистре.

Виды тегов

Теги языка HTML можно условно разделить на несколько категорий:

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

• h1, h2, h3, h4, h5, h6 – теги заголовков;
• b, em – теги для изменения начертания текста;
• ul, ol – теги для создания списков;
• a – тег для создания ссылок.

2. Теги структуры документа

• nav – тег для создания навигации по сайту;
• aside – создаёт боковую панель на сайте, где размещается неосновной контент;
• header – тег для создания шапки сайта или раздела;
• section – тег для создания раздела веб-страницы;
• div – тег, с помощью которого выделяется отдельный блок, с целью его последующего изменения;
• span – определяет строчные элементы.

3. Функциональные теги

• html – включает в себя всё содержимое страницы;
• body – раздел html-файла, где содержится техническая инфомрация;
• script – предназначен для создания/подключения скриптов;
• link – предназначен для подключения внешних файлов (шрифтов или стилей);
• meta – содержит информацию, предназанченную для поисковых систем и браузеров.

4. Теги встраиваемого контента

• img – изображение;
• audio – аудиуоконтент;
• iframe – отдельная область документа, в которую можно подгружать другие независимые документы.

5. Теги форм (для взаимодействия с пользователем)

• form, input – теги для создания формы.

6. Теги таблиц

• table, td, tr – теги для создания таблицы.

Элементы HTML

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

Настолько здесь

….

элемент HTML,

…

другой элемент HTML. Некоторые элементы HTML которым не нужно быть закрытым, как ,

---

и элементы
. Эти как пустые элементы.

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

Бирка HTML против элемента

Элемент HTML определен начиная биркой. Если элемент содержит другое содержание, то он кончается с заключительной биркой.

Например

начинает бирку параграфа и

заключительная бирка такого же параграфа но

This paragraph

элемент параграфа.

Гнездят элементы HTML

Оно очень много позволен держать один элемент HTML внутри другого элемента HTML:

Пример

     
This is italic heading
 
This is underlined paragraph
   

Это покажет после результата:

This is italic heading

This is underlined paragraph

Kickstart Your Career

Get certified by completing the course