Почему теги отображаются в браузере

Обновлено: 06.07.2024

Вроде делаю все правильно. Но как открываю в браузере, вижу то же самое, что и в блокноте.
Почему теги отображаются в браузере? При том что функции, что должны выполнять, не выполняют. Заголовок не выделяется, цвета не меняются.
Все отображается точно так же как и в блокноте.
Что я делаю не так?

код таков:
суперпростой. но это и не важно. где бы я его не печатала - в блокноте, в нотпаде++, в Adobe Dreamweaver, когда открываю в браузере - точно такая же картина! все теги видны.

Как Апполон, красив и статен,
Как ледокол «Ермак», силен,
Как герцог Букенгемский знатен,
Как десять ЭВМ, умен,
Как бой курантов, пунктуален,
Как меч Фемиды, справедлив,

Надо сохранить файл как *.HTML . а у тебя по ходу *.TXT

Андрей Искусственный Интеллект (290162) Проверь в свойствах файла.

все! я сделала! спасибо огромное! все заработало! спасибо.

Sfera Искусственный Интеллект (123131) 1 помести текст под head нет откр\закр тегов твой код не код а текстом является не пиши в блокноте используй софт например Adobe Dreamweaver

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

хотя навряд ли ведь. если кодировка не та, там просто символы другие будут

Sfera Искусственный Интеллект (123131) тегов не хватает браузер думает что текст поставь любую прогу с WYSIWYG например WYSIWYG Web Builder или Adobe Dreamweaver 82.200.204.12/node/458139/

Браузер вполне себе работает и без DOCTYPE и указания кодировки. Например, такой HTML отображается без проблем:
<body>
<b>Моя страница</b>
</body>
Это весь файл, больше ничего в нём нет.

Диана Юрьева Ученик (103) вот именно, что у меня не работает даже это. оно отображается с тегами

Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В листинге 4.1 показан код простого документа, содержащего основные теги.

Листинг 4.1. Исходный код веб-страницы

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O) . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.

Рис. 4.1. Результат выполнения примера

Далее разберем отдельные строки нашего кода.

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE> .

Существует несколько видов <!DOCTYPE> , они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.

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

Например, в строгом HTML и XHTML непременно требуется наличие тега <title> , а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.

В дальнейшем будем применять преимущественно строгий <!DOCTYPE> , кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.

Часто можно встретить код HTML вообще без использования <!DOCTYPE> , веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.

Тег <HTML> определяет начало HTML-файла, внутри него хранится заголовок ( <head> ) и тело документа ( <body> ).

Заголовок документа, как еще называют блок <head> , может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title> .

Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой «Кириллица (Windows)» и добавляется данная строка.

Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).

Рис. 4.2. Вид заголовка в браузере Firefox

Тег <title> является обязательным и должен непременно присутствовать в коде документа.

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

Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.

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

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

Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом  . Все, что находится между этими тегами отображаться на веб-странице не будет.

Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента.

Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком. Это хорошо видно на рис. 4.1.

Следует добавить закрывающий тег </body> , чтобы показать, что тело документа завершено.

Последним элементом в коде всегда идет закрывающий тег </html> .

Вопросы для проверки

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

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

2. Содержимое какого тега можно увидеть в окне браузера?

3. Какое утверждение наиболее подходит к случаю, когда тег <p> располагается в контейнере <head>?

Задание

Исправьте ошибки в коде документа.

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

Для раскрутки сайта необязательно досконально разбираться в HTML и быть гуру верстки. Но есть теги, работа с которыми неразрывно связана с SEO. И о них нужно знать.

«Теги», «метатеги», «атрибуты», «элементы» — в чем разница?

Читая статьи о SEO, вы наверняка встретите эти термины. Но их часто путают, называя теги элементами, элементы — атрибутами.

Начнем с тегов. Это базовые конструкции HTML. Все они заключены в скобки <. >. Теги могут быть одиночными и парными. Во втором случае есть открывающий и закрывающий тег, обозначающийся <. />. Примеры тегов:

Внутри тега располагается текст. В совокупности с тегом этот текст является элементом HTML. Элемент — это основная структурная единица документа, написанного на HTML. Вот примеры элементов:

<p>Этот тег свидетельствует о начале и конце абзаца</p>

<body>Текст, заключенный в этом теге, виден пользователю в браузере</body>

Элементы могут обладать атрибутами (свойствами). Они имеют стандартные значения или те, которые задаются пользователем. Атрибут прописывается в открывающем теге после имени элемента и перед закрывающей скобкой (>). Вот пример атрибута:

Разновидностью тегов являются метатеги. Это теги, предназначенные для представления структурированных метаданных о веб-странице. Они прописываются между тегами <head> и </head> — то есть пользователи не видят их содержимое.

Вот примеры метатегов:

Итак, с понятиями разобрались. Перейдем к самым важным HTML тегам для SEO.

HTML теги структуры документа

Каждый HTML документ имеет такую структуру:

Разберемся, что в нее входит:

В самом верху — строка декларации версии HTML. С нее начинается документ, который отвечает спецификации HTML определенной версии (например, в нашем случае это HTML 5).

Затем идет тег <html>. Он сообщает браузеру о том, что далее будет текст формата HTML.

После открывающего тега <html> идет открывающий тег <head>. Внутри него располагается служебная информация (пользователям она не отображается) — метатеги, скрипты счетчиков статистики, коды валидации ресурса в Яндекс.Вебмастере, Google Search Console и других сервисах.

А вот информация внутри тега <body> как раз видна пользователям — именно здесь расположен основной контент (текст, изображения, видео и т. п.). То есть если вы хотите, чтобы контент отображался на странице, его нужно добавлять именно внутрь тега <body>.

Естественно, это не исчерпывающий список тегов структуры. Есть еще <header>, <article>, <footer>, <div> и другие. Но для понимания базовой SEO-оптимизации сайта рассмотренных тегов достаточно.

HTML теги заголовков

Заголовки важны для поисковой оптимизации сайта, ведь они помогают поисковикам определить релевантность документов запросам пользователей.

Первый тег — <title>. Он прописывается между тегами <head> и </head>. То есть информация в нем не отображается на странице, но поисковики ее учитывают и выводят как заголовок в результатах поиска.

Самая важная информация в <title> должна поместиться в 60 символов — примерно столько отражается в заголовках сниппетов поисковых систем. Общий же текст в <title> может быть длиннее.

На одной странице допустим только один заголовок <title>.

А вот как текст из <title> отображается в заголовке сниппета на поиске Яндекса:

Тег <title> часто называют метатегом — по той причине, что он размещается в служебном разделе <head>. И действительно, по своей сути он напоминает метатег. И если вы будете называть его метатегом, страшного ничего не произойдет. Но формально это тег заголовка документа. Поэтому мы рассказали о нем именно в этом разделе.

Внутри тегов <body>…</body> идут заголовки, которые отражаются в браузере. Главный заголовок заключен в парный тег <h1> — он единственный на странице, идет в самом начале. Для SEO это самый значимый заголовок, он отражает суть документа, именно в него следует вписывать самые частотные ключевые фразы. Далее текст разбивается на разделы заголовками <h2>, а уже после них — дробится на смысловые единицы с помощью <h3 — <h6>.

Важно запомнить: заголовок нижнего уровня (например, <h3>) не должен располагаться выше заголовка верхнего уровня (например, <h2>).

<h2>Заголовок второго уровня</h2>

<h3>Заголовок третьего уровня</h3>

<h2>Заголовок второго уровня</h2>

А вот как отформатированный при помощи заголовков текст отображается в браузере:

HTML теги форматирования

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

Для целей SEO достаточно использовать такие теги:

<p>. </p> (парный тег, обозначающий абзац);

<ul>. </ul> (маркированный список);

<ol>. </ol> (нумерованный список; <ul> или <ol> могут вкладываться друг в друга);

<blockquote>…</blockquote> (тег цитирования, обычно появляются кавычки, горизонтальная линия слева текста, и он сдвигается вправо).

Конечно, это далеко не все теги, но чтобы самостоятельно отформатировать текст и не обращаться к верстальщику, SEO-специалисту будет достаточно этого набора.

Метатеги

Метатеги используются в HTML документе для следующих целей:

Идентификация авторства. Для этой цели служит метатег Author:

Передача информации поисковикам для формирования заголовков и индексации документов. Например, директива noindex метатега Robots может запретить поисковым роботам индексировать страницу:

Формирование карточки для отображения контента в социальных сетях (о том, как подготовить сайт к трафику из соцсетей, мы подробно писали здесь);

Влияние на режим отображения страниц. К примеру, тег Viewport задает режим отображения страницы сайта с адаптивной версткой на устройствах с разным разрешением экрана:

Остановимся подробнее на важных метатегах для целей поисковой оптимизации.

Самый важный для SEO метатег — Robots. С его помощью можно запретить или разрешить индексацию страницы и ссылок на ней. Синтаксис такой:

Значение index говорит о том, что роботам можно индексировать страницу (в противном случае меняем значение на noindex). Значение follow разрешает индексацию ссылок (в противном случае используем nofollow).

Для целей SEO также важен метатег Description. Информация из него используется Google для формирования описания в сниппете (но так происходит не всегда). А вот Яндекс формирует сниппет на свое усмотрение. Но все поисковики учитывают информацию из Description для определения релевантности контента страницы поисковому запросу. Поэтому сюда обязательно стоит вписать ключевые фразы.

Синтаксис выглядит так:

Для быстрой проверки заголовков title, h1-h6 и метатегов description и keywords на сайте используйте парсер PromoPult. Полезные лайфхаки по работе с ним — здесь.

Метатег Keywords при определении релевантности страницы поисковиками не учитывается. Но некоторые оптимизаторы до сих пор его прописывают. Выглядит он так:

О каких еще метатегах полезно знать:

Viewport — используется для адаптации верстки сайта под мобильные устройства.

Content-Type — указывает на кодировку страницы (должна быть UTF-8).

или в HTML5: <meta charset="UTF-8">

Content-Language — указывает на язык страницы. Неправильно указанный язык приводит к более низкому ранжированию в регионе продвижения.

Для того чтобы страница корректно отображалась в соцсетях, тоже используются метатеги. Например, протокол Open Graph поддерживает метатеги Property. Эти метатеги понимает Facebook, ВК, Pinterest, Twitter, LinkedIn, Telegram, WhatsApp, Viber, Slack и другие соцсети и мессенджеры.

HTML тег и атрибуты ссылок

С помощью тегов создаются гиперссылки. Синтаксис такой:

Атрибут href указывает на адрес документа в интернете.

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

_top (в текущем окне);

_blank (в новом окне);

_self (в текущем фрейме);

_parent (в родительском фрейме).

Если атрибут target не задать, то по умолчанию будет использоваться значение _self.

При использовании атрибута target со значением _blank (открытие ссылки на новой вкладке) важно указать еще атрибут rel со значением noopener. Это закроет уязвимость, связанную с получением частичного контроля над страницей со стороны ресурса, на который был переход. Синтаксис такой:

Для целей SEO часто требуется закрыть ссылку от индексации поисковыми роботами. Для этого используется атрибут rel со значением nofollow. Синтаксис такой:

HTML тег и атрибуты изображений

Для вставки и описания изображений тоже используется специальный тег. Для целей SEO особенно важны атрибуты alt.

Синтаксис тега изображения:

Здесь используются атрибуты:

src — атрибут, указывающий путь к файлу изображения.

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

title — это описание выводится в виде всплывающей подсказки при наведении курсора на изображение, на SEO не влияет.

width и height — соответственно, ширина и высота изображения.

Чек-лист самых важных тегов HTML для SEO

Теги структуры HTML документа: <html>, <head>, <body>

Метатеги: description, robots, viewport, author, property, content-type, content-language

Теги и атрибуты ссылок: <a>, атрибуты href, target, rel

Теги и атрибуты изображений: <img>, атрибуты src, alt, title, width, height

Естественно, HTML-тегов намного больше — и если уметь ими пользоваться, это только плюс. Но для базового SEO вполне достаточно тех, что мы рассмотрели.

«Плаваете» в HTML и вам сложно оценить правильность кода? Закажите SEO-аудит в PromoPult. Кроме определения валидности кода, он содержит много полезной информации, от которой вы будете отталкиваться при продвижении сайта.

«Теги», «метатеги», «атрибуты», «элементы» — в чем разница?

<p>Этот тег свидетельствует о начале и конце абзаца</p>

<body>Текст, заключенный в этом теге, виден пользователю в браузере</body>

Вот примеры метатегов:

Итак, с понятиями разобрались. Перейдем к самым важным HTML тегам для SEO.

HTML теги структуры документа

Каждый HTML документ имеет такую структуру:

Разберемся, что в нее входит:

Затем идет тег <html>. Он сообщает браузеру о том, что далее будет текст формата HTML.

HTML теги заголовков

На одной странице допустим только один заголовок <title>.

А вот как текст из <title> отображается в заголовке сниппета на поиске Яндекса:

<h2>Заголовок второго уровня</h2>

<h3>Заголовок третьего уровня</h3>

<h2>Заголовок второго уровня</h2>

А вот как отформатированный при помощи заголовков текст отображается в браузере:

HTML теги форматирования

Для целей SEO достаточно использовать такие теги:

<p>. </p> (парный тег, обозначающий абзац);

<ul>. </ul> (маркированный список);

<ol>. </ol> (нумерованный список; <ul> или <ol> могут вкладываться друг в друга);

Метатеги

Метатеги используются в HTML документе для следующих целей:

Идентификация авторства. Для этой цели служит метатег Author:

Остановимся подробнее на важных метатегах для целей поисковой оптимизации.

Синтаксис выглядит так:

О каких еще метатегах полезно знать:

Viewport — используется для адаптации верстки сайта под мобильные устройства.

Content-Type — указывает на кодировку страницы (должна быть UTF-8).

или в HTML5: <meta charset="UTF-8">

HTML тег и атрибуты ссылок

С помощью тегов создаются гиперссылки. Синтаксис такой:

Атрибут href указывает на адрес документа в интернете.

_top (в текущем окне);

_blank (в новом окне);

_self (в текущем фрейме);

_parent (в родительском фрейме).

Если атрибут target не задать, то по умолчанию будет использоваться значение _self.

HTML тег и атрибуты изображений

Синтаксис тега изображения:

Здесь используются атрибуты:

src — атрибут, указывающий путь к файлу изображения.

width и height — соответственно, ширина и высота изображения.

Чек-лист самых важных тегов HTML для SEO

Теги структуры HTML документа: <html>, <head>, <body>

Метатеги: description, robots, viewport, author, property, content-type, content-language

Теги и атрибуты ссылок: <a>, атрибуты href, target, rel

Теги и атрибуты изображений: <img>, атрибуты src, alt, title, width, height

Причин почему может не выводиться картинка в html довольно много. Рассмотрим самые частые ошибки синтаксиса.

Ошибка N1

Нарушен синтаксис атрибута src (написан как scr) тэга img. Явление этого сегодня довольно редкое, так как HTML-документы, как правило, пишутся в специализированных редакторах, которые подсвечивают правильно введённые тэги, атрибуты, спецсимволы. В комплексных средах разработки (DreamViever) подобная ошибка невозможна в принципе.

Ошибка №2

Почему не отображается картинка в html? Возможно синтаксис тега img и его атрибутов правильный, но неверно указано имя файла изображения.

Операционные системы по умолчанию скрывают расширение файла и поэтому картинка с именем picture.jpg.jpg в проводнике и диалоговых окнах открытия отображается как picture.jpg

Для исключения подобной ошибки необходимо в свойствах папки активировать показ расширения файлов.

Ошибка №3

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

Специально для Вас: Почему флешка не форматируется в ntfs: что делать

В HTML полный путь к любому файлу указывается относительно расположения страницы с которой осуществляется вызов. Если изображение находится во внутреннем по отношению к документу каталоге путь будет выглядеть так “имя внутреннего каталога/имя изображения”. Сам файл при этом может находится в других подкаталогах

Файл может находится еще и в нескольких подкаталогах. Именно поэтому проблема почему не отображается картинка в html немного сложнее чем может показаться сначала. Так в значении атрибута src указываются все подкаталоги.

Например: фотография myphoto.jpg находится в подкаталоге photo внутреннего каталога image. Значение атрибута src в этом случае прописывается как “image/photo/myphoto.jpg”.

Если изображение находится во внешнем по отношению к документу каталоге то прописывание полного пути начинается с “../”. Например: “../image/photo/myphoto.jpg”.

Ошибка №4

В браузере с помощью которого осуществляется просмотр документа отключен вывод изображений. В этом случае, если тэг img прописан полностью, то есть указан непустой атрибут alt будет выведено его значение. Например: при alt=”Моя фотография” отобразится «Моя фотография». При пустом или опущенном атрибуте alt большинство браузеров выводит пиктограмму изображения.

Специально для Вас: Видео использует функции неподдерживаемые вашим браузером: убираем ошибку

Читайте также: