Виды хтмл тегов

Все хтмл теги подразделяются на два вида:

1. Одиночные
2. Парные

Парные имеют открывающий и закрывающий тег.

Также между этими двумя элементами обязательно должен присутствовать какой-то контент или другие теги. Причем уровень вложенности не ограничен.

К примеру, если вам нужно вставить абзац, то сначала ставим открывающий тег <p>. Это будет начало абзаца.

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

Обратите внимание!

К закрывающему элементу всегда добавляется слеш. Благодаря ему браузер понимает, где заканчивается команда

В данном примере конец абзаца.

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

Сначала из справочника (будет ниже) подбираем нужный тег, который выделяет текст жирным.

Далее вставляем открывающий тег в том месте, где начнется выделение. А закрывающий там, где оно заканчивается.

Наглядный пример выделения

Есть определенные правила вложенности тегов. Более подробно на эту тему вы найдете в статье про структуру html документа.

Одиночные состоят из одного тега. Например, <hr>. Представляют собой самостоятельные сущности, которым не нужен внутренний контент.

Структурные HTML теги для текста

1.Теги заголовков. Из названия понятно что они предназначены для оформления заголовков и подзаголовков на сайте. В зависимости от того какой тег заголовка используется браузер делает его более крупным шрифтом и по умолчанию выделяет жирным.
Самый большой и самый крупный в HTML – это заголовок H1

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

PHP

Заголовок

1

Заголовок

Следующими идут заголовки h3, h4, h5 и самый маленький h6

PHP

…

…

…

…

…

1
2
3
4
5

…

…

…

…

…

2.Тег абзаца

Думаю понятно для чего он предназначен. По умолчанию занимает всю ширину страницы и может иметь небольшие отступы сверху и снизу (обычно снизу).

XHTML

Делаем абзацы в HTML

1

Делаем абзацы в HTML

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

Его отличительной особенностью является то, что он занимает ширину выделенного текста. То есть если вы обернёте в него слово, то его ширина будет равна ширине этого слова.
В HTML он активно используется для того чтобы задать другой стиль оформления для фрагмента текста, а так же в скриптах.

PHP

Пример текста в котором нужно выделить фрагмент.

1

Примертекставкоторомнужновыделитьфрагмент.

Как и другим тегам HTML, ему можно присвоить CSS класс или идентификатор.

PHP

…

1

…

4.Для оформления цитаты в HTML у нас есть 2 варианта:
Тег используется для выделения короткой цитаты внутри текста. Он является строчным элементом и его ширина будет равна ширине выделенного в него текста. По умолчанию текст, обёрнутый в этот тег отображается в кавычках.

XHTML

Цитата

1

Цитата

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

XHTML

Тег цитаты

1

Тег цитаты

5.Тег используется для выделения аббревиатур. Вы оборачиваете в него аббревиатуру и в атрибуте title пишете полное название.

XHTML

Здесь написана ПМА

1

Здесь написана ПМА

Браузер подчёркивает аббревиатуру, а при наведении на неё высвечивает полное название.

Здесь написана ПМА

6. — нужен чтобы задать или изменить направление написания текста в HTML. Лично я понятия не имею где это может пригодиться, но мало ли…
Для задания направления используется атрибут dir, которому можно задать значения:

rtl – справа на лева

ltr – слева на право

XHTML

Отображение справа на лево

1

Отображение справа на лево

7. — используется для переноса на новую строку.

XHTML

Пример переноса.

1

Примерпереноса.

Теги в HTML

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

Существуют парные и одиночные теги

Парные теги. Это два тега – открывающий и закрывающий, между которыми находится содержимое тега–контент. Примером двойного тега является <title>. Особенность закрывающего тега в том, что он после угловой скобки содержит «/».

Одиночные теги. Примером такого тега служит <img>. У него нет закрывающего тега и, как и большинство таких тегов, он не содержит в себе информацию напрямую, а лишь служит для вставки изображения.

Логическая разметка текста.

Прежде чем рассказывать о новых тегах расскажу, о том, что следует подразумевать под фразой: «логическая разметка документа».

Под логической разметкой документа, прежде всего, принято понимать разметку текста тегами направленную на удобство работы поисковых систем и других программ, которые работают с данным документом, а так же придавать тексту в документе некий смысл. Так вот программам абсолютно по барабану как выглядит Ваш документ, красивый он или нет, какой стиль шрифта и текста используется и.т.д. программы в первую очередь пытаются найти логику на Вашей страничке, что бы в дальнейшем использовать её по своему усмотрению, например для более релевантной поисковой выдачи или для автоматического составления содержания Вашего документа…

Теперь давайте опять вернемся к вопросу выше: «Чем отличается тег <em> от тега <i>?» — казалось бы какая разница ведь текст и там и там будет отображаться курсивом .. всё дело в том что тег <i> — (курсив) — является тегом физического форматирования текста и предназначен в первую очередь для людей, а тег <em> (особенно важный текст) — является тегом логического формирования текста и предназначен для машин! А то, что текст, взятый в тег <em>, обычно в браузерах отображается курсивом — это всего лишь, скажем так «мода» и придумка браузеров.

Спецификация HTML не говорит о том, что теги логического форматирования текста должны определённым образом отображаться браузерами, что вот, например тот же тег <em> должен быть отображен именно курсивом и не как иначе, а говорит лишь о том, что такой текст должен отличатся от основного и особым образом выделятся в документе..

Так какие теги лучше использовать? Ну раз уж мы уже заочно познакомились с тегами <em> и <strong> покажу пример, комментарии будут ниже..

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html><head><title>Как создать сайт</title></head><body><p><strong>Как создать сайт?</strong></p><p>Для того, что бы <em>самостоятельно создать сайт</em> для начала в блокноте нужно написать следующие теги:</p><b>&lt;html&gt;</b> — <i>начало документа</i><br><b>&lt;head&gt;</b> — <i>начало головы</i><br><b>&lt;/head&gt;</b> — <i>закрытие головы</i><br><b>&lt;body&gt;</b> — <i>начало тела</i><br><b>&lt;/body&gt;</b> — <i>закрытие тела</i><br><b>&lt;/html&gt;</b> — <i>конец документа</i><br></body></html>
смотреть пример  

Теперь объясню, почему на страницах данного сайта, как и в примере выше, в некоторых случаях используются теги <em> и <strong>, а в других случаях <b> и <i>.

Всё дело в том, что мне как создателю данного сайта очень хочется, чтобы люди набрав в том же гугле фразу: «Как создать сайт?» или «Самостоятельное создание сайта» видели в первых строчках поисковой выдачи гугла ссылку: «Как создать сайт?» и переходили по ней на главную страницу моего ресурса

Так вот пометив нужные мне куски текста с помощью тегов и , я тем самым даю понять гуглу что этот текст важный и что на него следует обратить особенное внимание! — конечно, это не залог успеха, тем более для столь популярных (высокочастотных) пользовательских запросов, но при прочих равных условиях, это большой плюс в глазах поисковых систем

И противоположенный случай..

Как человек старающийся сделать сайт удобным для чтения и восприятия другими людьми, я выделяю некоторые участки текста курсивом (юмор, примечания и прочую отсебятину) и жирным шрифтом (изучаемые теги в примерах), но я не хочу, чтобы поисковые системы обращали сильное внимание на фразы типа: «начало головы» «закрытие тела» — так как сайт написан для начинающих веб-ремесленников, а не для начинающих патологоанатомов, поэтому размечаю такой текст тегами и — они дают нужный результат, собственно полужирный шрифт и курсив, но не являются «красной тряпкой» для программ

HTML теги для форматирования текста

1. — выделение текста жирным.

XHTML

Жирный

1

Жирный

2.Теги и для выделения курсивом.

XHTML

Курсив

1

Курсив

3. — подчёркивает обёрнутый в него текст.

XHTML

Подчёркнутый

1

Подчёркнутый

4. — используется для выделения слов или фраз полужирным

Учитывается браузером и поисковиками для определения важности выделенного текста.

5. — нужен для задания верхнего индекса при помощи HTML, например при отображении степени в формулах или для обозначения единиц площади или объёма.

XHTML

120 м2

1

120м2

6. _{— используется для задания нижнего индекса.}

XHTML

СO₂

1

СO₂

7. — зачёркнутый текст. Вообще в HTML он предназначен для выделения удалённого текста, но используется где ни попадя, в том числе и для задания цен без скидки в интернет магазинах или на лендингах.

XHTML

Цена: 450руб. 400 руб.

1

Цена450руб.400руб.

Цена: 450руб

400 руб.

8. — используется чтобы выделить фрагмент текста более мелким шрифтом.

XHTML

Большой и маленький

1

Большойи маленький

В HTML существуют и другие теги для текста, но они очень редко используются.

На этом у меня всё, удачи вам в освоении HTML!

С уважением Юлия Гусарь

§ 4. Выравнивание текста

    Для того, чтобы выровнять текст используется атрибут align с возможными значениями center, left, right и justify. Он, соответственно, выравнивает текст по центру, по левому краю, по правому краю и одновременно по двум краям сразу. Например, html-код:

align=»center»>Текст по центру

выровняет текст по центру:

Текст по центру

    А этот код:

right»>Выравнивание текста по правому краю

выровняет текст по правому краю

Выравнивание текста по правому краю

    Если атрибут align не используется, то текст будет выровнен по левому краю. Это происходит по умолчанию. Пример, код:

По умолчанию текст выравнивается по левому краю

выровнит текст по левому краю

По умолчанию текст выравнивается по левому краю

textContent: просто текст

Свойство предоставляет доступ к тексту внутри элемента за вычетом всех .

Например:

Как мы видим, возвращается только текст, как если бы все были вырезаны, но текст в них остался.

На практике редко появляется необходимость читать текст таким образом.

Намного полезнее возможность записывать текст в , т.к. позволяет писать текст «безопасным способом».

Представим, что у нас есть произвольная строка, введённая пользователем, и мы хотим показать её.

• С вставка происходит «как HTML», со всеми HTML-тегами.
• С вставка получается «как текст», все символы трактуются буквально.

Сравним два тега div:

1. В первый имя приходит «как HTML»: все теги стали именно тегами, поэтому мы видим имя, выделенное жирным шрифтом.
2. Во второй имя приходит «как текст», поэтому мы видим .

В большинстве случаев мы рассчитываем получить от пользователя текст и хотим, чтобы он интерпретировался как текст. Мы не хотим, чтобы на сайте появлялся произвольный HTML-код. Присваивание через – один из способов от этого защититься.

HTML Quotation Elements Which are Closely Related to the tag

During the web development process, it is essential to insert quotations and citations when needed. There is a collection of elements that are closely related to the HTML quote tag which are utilized for these purposes and they include <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML elements. Let’s examine them one by one.

– The <Blockquote> Tag

When inserting a section of text hailing from an external source, the HTML <blockquote> tag comes in handy. This tag shares numerous similarities with the HTML quote tag and it includes block-level elements such as paragraphs, headings, lists and divisions of text. It is usually implemented in conjunction with the cite element and here is an example illustrating the use of HTML for quotes.

HTML5 code

<!DOCTYPE html><html><body><p>Here is a quote from Parade’s website:</p><blockquote cite=”https://parade.com/937586/parade/life-quotes/”>Everybody wants to be famous, but nobody wants to do the work.I live by that. You grind hard so you can play hard.At the end of the day, you put all the work in, and eventuallyit will pay off. It could be in a year, it could be in 30 years.Eventually, your hard work will pay off. Kevin Hart</blockquote></body></html>

Here is a quote from Parade’s website: Everybody wants to be famous, but nobody wants to do the work. I live by that. You grind hard so you can play hard. At the end of the day, you put all the work in, and eventually it will pay off. It could be in a year, it could be in 30 years. Eventually, your hard work will pay off. Kevin Hart.

– The HTML <Abbr> Tag

Normally categorized under the citation element, the <abbr> tag identifies an acronym for example CSS, HTML or Esq. While inserting web content, it is important to mark out abbreviations for browsers, search engines and translation systems. During the process of inserting this citation element, web content providers should make a point of utilizing the global title attribute so that the associated description is displayed when the abbreviation is moused over.

HTML5 code example

<!DOCTYPE html><html><body><p>The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.</p></body></html>

The WHO was founded in 1948.

– The HTML <Address> Tag

HTML5 code

<!DOCTYPE html><html><body><p><address>Written by John Doe.<br>Visit us at:<br>Example.com<br>Box 564, Disneyland<br>USA</address></p></body></html>

Written by John Doe.Visit us at:Example.comBox 564, DisneylandUSA

– HTML <Cite> Tag

With the <cite> HTML tag, you can define the specific title of a creative piece of work. This can be a poem, song, book, magazine, painting, movie or sculpture. When implementing this HTML q tag, we should note that the name of the author or owner of creative work does not qualify as a title.

HTML5 code

<!DOCTYPE html><html><body><p><cite>The Boxer</cite> by Jean-Michel Basquiat. Painted in 1982.</p></body></html>

The Boxer by Jean-Michel Basquiat. Painted in 1982.

– HTML <Bdo> Tag

The <bdo> tag is known in full as Bi-Directional Override. It changes the direction of the flow of text. With this element, you can change the course of text from Right to Left and vice versa.

HTML5 Code

<!DOCTYPE html><html><body><p><bdo dir=”rtl”>This text will be written from right to left</bdo></p></body></html>

Итого

Каждый DOM-узел принадлежит определённому классу. Классы формируют иерархию. Весь набор свойств и методов является результатом наследования.

Главные свойства DOM-узла:

Свойство позволяет узнать тип DOM-узла. Его значение – числовое: для элементов, для текстовых узлов, и т.д. Только для чтения.

Для элементов это свойство возвращает название тега (записывается в верхнем регистре, за исключением XML-режима). Для узлов-неэлементов описывает, что это за узел. Только для чтения.

Внутреннее HTML-содержимое узла-элемента. Можно изменять.

Полный HTML узла-элемента. Запись в не меняет . Вместо этого она заменяет его во внешнем контексте.

Содержимое узла-неэлемента (текст, комментарий). Эти свойства практически одинаковые, обычно мы используем . Можно изменять.

Текст внутри элемента: HTML за вычетом всех . Запись в него помещает текст в элемент, при этом все специальные символы и теги интерпретируются как текст. Можно использовать для защиты от вставки произвольного HTML кода.

Когда значение установлено в , делает то же самое, что и CSS .

В зависимости от своего класса DOM-узлы имеют и другие свойства. Например у элементов () есть свойства , , у элементов () есть и т.д. Большинство стандартных HTML-атрибутов имеют соответствующие свойства DOM.

Впрочем, HTML-атрибуты и свойства DOM не всегда одинаковы, мы увидим это в следующей главе.