Let’s Dig into <meta charset=“utf-8”/>
So, I recently saw many people, mainly who were starting in HTML asking about this meta tag, charset attribute to be specific.
Let’s dig into this further, shall we?
What is it?
Let’s start by breaking it down.
- Meta: It is an HTML tag that contains metadata about a webpage. They are used by search engine to determine the page content and how to treat a webpage.
- Charset: It is an attribute that tells your browser what character encoding to use for this webpage to show the content as desired.
- UTF-8: It is the version of the character set.
Why is it Important?
Ever used emojis, yes? Well, this meta tag is responsible for encoding these emojis into a machine-readable character and vice-versa. Most websites these days have to display characters which are not traditional ASCII characters. When received such characters in HTML source, Browsers should be able to handle those to display properly.
Why use UTF-8?
Well, it’s very unlikely that you’re not using it already. The UTF-8 character set covers all characters and symbols that exists in this universe. So, it only makes sense to use it to make your site be perceived as it is desired. You want to use an emoji or character, make your site look modern and graphical, UTF-8 to the rescue.
What if I don’t use `<meta charset=”utf-8”/>’?
Well, then you will to look up HTML entities (&#xxx;) to use that emoji or symbol and display properly.
But, as I said, it’s highly unlikely that you’re not already using it as <!DOCTYPE html>, by default, specifies UTF-8 as character for encoding.
Well, now you might ask that why is it written specifically, even after writing ‘<DOCTYPE html>’?
Many old browsers are still there which do not support HTML5, even tho, it is a norm. So, for them including this tag is important.
Well, that’s been it for this story, hope this story was worth your time and you enjoyed it. Consider following me here if you did.
Did you know, by holding on the clap icon, you can give more than one claps, easy, right!
If you’d like to support me, you can do that here. Many thanks!!
<meta> — элемент для описания метаданных
HTML-элемент <meta> представляет такие метаданные, которые не могут быть представлены другими HTML-метатегами, такими как <base> , <link> , <script> , <style> или <title> .
| Категории контента | Мета данные. Если задан itemprop атрибут: flow content, phrasing content. |
|---|---|
| Допустимое содержимое | Отсутствует — это пустой элемент. |
| Пропуск тегов | Так как это пустой элемент, то открывающий тег должен присутствовать, а закрывающий — отсутствовать. |
| Допустимые родители | <meta charset> , <meta http-equiv> : <head> элемент. Если http-equiv это не заявленная декларация, то может быть внутри элемента <noscript> или <head> . |
| Допустимые ARIA-роли | Отсутствуют |
| DOM-интерфейс | HTMLMetaElement (en-US) |
Атрибуты
Этот элемент включает в себя глобальные атрибуты.
Примечание: атрибут name имеет особое значение для элемента <meta> и атрибут itemprop не должен быть задан в <meta> элементе в котором уже определены какие-либо name , http-equiv или charset атрибуты.
Этот атрибут задаёт кодировку символов, используемую на странице. Он должен содержать стандартное имя IANA MIME для кодировки символов. Хотя стандарт не требует определённой кодировки, он рекомендует:
- Авторам рекомендуется использовать UTF-8 (en-US) .
- Не следует использовать ASCII-несовместимые кодировки, чтобы избежать угроз безопасности: браузеры, не поддерживающие их, могут интерпретировать вредоносный контент как HTML. Это относится к семейству кодировок JIS_C6226-1983 , JIS_X0212-1990 , HZ-GB-2312 , JOHAB и EBCDIC .
Примечание: ASCII-несовместимые кодировки — это те, которые не преобразуют 8-битные коды точек 0x20 , 0x7E , 0x0020 , 0x007E в коды Unicode точек.
Предупреждение:
- Авторы не должны использовать CESU-8 , UTF-7 , BOCU-1 и/или SCSU , так как есть примеры атак межсайтового скриптинга (en-US) использующих данные кодировки.
- Авторам не следует использовать кодировку UTF-32 , потому что не все алгоритмы кодирования HTML5 могут отличить её от UTF-16 . Примечание:
- Указанный набор символов должен соответствовать одной странице. Нет веских оснований для объявления неточного набора символов.
- <meta> элемент должен находиться внутри элемента <head> и задаваться в 1024 первых байтах HTML страницы, поскольку некоторые браузеры смотрят только эти байты перед выбором кодировки.
- Этот <meta> элемент — часть алгоритма, определяющего набор символов (algorithm to determine the character set) страницы, который браузер поддерживает. Заголовок Content-Type и любые Byte-Order Marks элементы переопределяют данный элемент.
- Настоятельно рекомендуется определить кодировку символов. Если для страницы не определён набор символов, то некоторые cross-scripting технологии могут повредить страницу, например такие как UTF-7 fallback cross-scripting technique. Постоянная установка этого элемента будет защищать вас от этого риска.
- Этот <meta> элемент это синоним для pre-HTML5 <meta http-equiv=»Content-Type» content=»text/html; charset=IANAcharset»> где * IANAcharset *соответствует значению эквивалентного charset атрибута. Этот синтаксис по-прежнему разрешён, хотя и устарел и больше не рекомендуется.
Этот атрибут содержит значение для http-equiv или name атрибута, в зависимости от контекста.
Этот атрибут определяет прагму, которая может изменять поведение серверов и пользователей. Значение прагмы определяется с помощью content и может быть следующим:
- «content-language»
- : Эта прагма определяет значение языка страницы по умолчанию.
Примечание: Не используйте эту прагму, так как она устарела Используйте глобальный атрибут <html> элемента вместо этого.
- : Это значение позволит администратору веб-сайта определить политику содержания для обслуживаемых ресурсов. За некоторыми исключениями, политика в основном включают в себя указание происхождения сервера и конечные точки сценария. Это помогает предотвратить атаки межсайтового скриптинга.
Примечание:
- Не используйте эту прагму, так как она устарела. Используйте атрибут charset в элементе <meta> вместо этого. не может быть использована для выбора типа документа в XHTML документе, или в HTML5 документе, за которым следует XHTML синтаксис, никогда не задавайте MIME тип как XHTML MIME. Это будет некорректно.
- Только HTML документ может использовать контент-тип, так что большинство из них являются неиспользуемыми, поэтому они являются устаревшими и заменяются charset атрибутом.
- : Специализация этой прагмы — предпочтительный стиль таблиц, используемый на странице. content атрибут должен содержать заголовок <link> элемента который href связывает атрибут с CSS таблцей стилей, или заголовок <style> элемента, который содержит CSS таблицу стилей.
- : Эта прагма определяет:
- Количество секунд перезагрузки таблицы, если content атрибут содержит только целое положительное число;
- Время, в количестве секунд, за которое страница должна быть перенаправлена на другую, если content атрибут содержит целое положительное число, заканчивающийся строкой ‘ ;url= ‘ и корректный URL.
Примечание: Не используете эту прагму, так как она устарела. Используйте HTTP header set-cookie вместо этого.
Этот атрибут определяет имя уровня документа метаданных. Его не следует устанавливать, если один из атрибутов itemprop , http-equiv или charset также указан в наборе. Имя этого документального уровня метаданных связано со значением, которое содержится в content атрибуте.Допустимые значения для имени элемента, со связанными с ними значениями, хранятся посредством content атрибута:
-
application-name , определяет имя веб-приложения, запущенного на веб-странице;
Примечание:* Браузеры могут использовать его для идентификации приложения. Он отличается от <title> элемента, который обычно состоит из имени приложения, но также может содержать специальную информацию, как например имя документа или статус;
- Простые веб-страницы не определяют application-name meta.
Примечание: Некоторые браузеры поддерживают ключевые слова всегда, по умолчанию и никогда для реферера. Эти значения устарели.
Примечание: Динамическая вставка <meta name=»referrer»> (с помощью document.write или appendChild) создаёт недетерминизм, когда дело доходит до отправки рефереров. Также стоит отметить, что когда определяется несколько конфликтующих политик, применяется No-referrer policy.Атрибут также может иметь значение, взятое из существующего листа определений WHATWG Wiki MetaExtensions page. Хотя ни один из них официально не был принят, в число предложений входят несколько часто используемых имён:
Примечание:
- Только кооперативные роботы будут следовать правилам, определённым именем роботов.
- Роботу необходимо получить доступ к странице, чтобы считать мета значение. Если вы хотите скрыть от них информацию, то используйте robots.txt файл.
- Если вы хотите удалить страницу индекса, изменение мета в noindex будет работать, но только тогда, когда робот снова посетит страницу. Убедитесь, что файл robots.txt не предотвращает такие посещения. Некоторые поисковые системы имеют инструменты, позволяющие быстро удалить какую-либо страницу.
- Некоторые возможные значения взаимно исключают друг друга, такие как использование индекса и noindex или follow и nofollow одновременно. В этих случаях поведение робота не определено и может варьироваться от одного к другому. Поэтому избегайте этих случаев.
- Некоторые поисковые роботы-роботы, такие как Google, Yahoo Search или Bing, поддерживают те же значения в директиве HTTP, X-Robot-Tags: это позволяет им использовать эту прагму для документов, отличных от HTML, например изображений.
- viewport , который даёт подсказки о размере изначального размера viewport. Эта прагма используется только на некоторых мобильных устройствах.
Примечание:
- Хотя и не стандартизирован, этот атрибут используется разными мобильными браузерами, например Safari Mobile, Firefox for Mobile or Opera Mobile.
- Значения по умолчанию могут быть изменены у разных браузеров или устройств..
- Для изучения этой прагмы на Firefox for Mobile, посмотрите статью this article.
Этот атрибут определяет схему, которая описывает метаданные. Схема — это контекст, ведущий к правильной интерпретации content значения, например формата.
Примечание: Не используйте этот атрибут, так как он устарел. Для него нет никакой замены, поскольку реально он не использовался. Опустите его.
Замечания
В зависимости от установленных атрибутов, тип метаданных может быть одним из следующих:
meta charset=’utf 8′ what the fuss?
I have seen html developers writing below piece of code in the head tag of the html document.
What does charset=’utf-8′ mean? What if this tag is ommited from the document?
Lets go to the basics, a text is a collection of characters and its stored in the computer as bytes. When we save anything to our computer it exists as bytes. Characters are represented by numbers and stored in sequence of bytes. Sometimes more than one byte is used to represent a single character.
Character encoding governs the way these bytes will be converted back to characters.
What is character encoding?
Now what happens when we omit the encoding declaration? When a developer miss the meta tag declaring the char encoding, then the char encoding of the content is left to be interpreted by the browser.
Have you ever noticed garbled characters on a web page? See the pic below.
So the absence of character may lead garbled text compromising on readability and also on search engine( SEO ) failing to make sense of the text and will not display the content in search result
One more important thing, «Fonts» are nothing but representation of characters in symbolic form. A font is a collection of glyph definations, defining shapes for characters.
Once the bytes are interpreted as a character via a character encoding, the application looks for fonts which can be used to display these characters. If the encoding is wrong then the shape used to denote that character will be wrong.
If a font does not have a glyph of a particular character, it may look into other fonts and display wrong info or a square box, question mark or any other character.
Browser’s Role
Browsers identifies the character encoding of a document via a algorithm. In absence of the character encoding declaration, it may calculate the character encoding incorrectly and may render the page incorrectly with garbled characters.
Specifying the character encoding speeds up a webpage rendering as browser does not have tp calculate the encoding and saves time.
Different ways of specifying character encodings
Character encoding can be specified by meta tags specified above in the article or they can be set by the server.
In php it can be done using the header function like this
Apache Sever configuration
It can also be configured in Apache server, via .htaccess file. Just add the following like to the file
We need to configure our text editors to save data in whichever encoding we want out data to be in. For sublime it can be done like image below.
Что такое meta charset utf 8 в html
Тег <meta> (от англ. meta information — мета информация) определяет данные (они называются ещё метатеги), которые используются для хранения информации, предназначенной для браузеров и поисковых систем.
Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <head> . Как правило, атрибуты любого метатега сводятся к парам « имя=значение », имена которых определяются ключевыми словами content , name или http-equiv .
Синтаксис¶
Закрывающий тег не требуется.
Атрибуты¶
charset¶
Указывает кодировку документа. Атрибут введён в HTML5 и предназначен для сокращения формы <meta> , которая задавала кодировку в предыдущих версиях HTML и XHTML.
Синтаксис
Значения
Название кодировки, например UTF-8.
Значение по умолчанию
content¶
content устанавливает значение атрибута, заданного с помощью name или http-equiv . Атрибут content может содержать более одного значения, в этом случае они разделяются запятыми или точкой с запятой.
Некоторые значения атрибута content для <meta name=»robots»> , предназначенных для поисковых роботов, приведены в табл. 1.
Табл. 1. Значения для meta name=»robots»
Значение Описание index Разрешает роботу индексировать данную страницу. noindex Запрещает роботу индексировать текущую страницу. Она не попадает в базу поисковика и её невозможно будет найти через поисковую систему. follow Разрешает роботу переходить по ссылкам на данной странице. nofollow Запрещает роботу переходить по ссылкам на данной странице. При этом всем ссылкам не передаётся ТИЦ (тематический индекс цитирования) и PagePank. noarchive Запрещает роботу кэшировать данную страницу. Допустимые значения атрибута content для <meta name=»viewport»> , которые предназначены для управления просмотром сайта на мобильных устройствах, приведены в табл. 2.
Табл. 2. Значения для meta name=»viewport»
Значение Допустимые значения Описание width device-width или целое положительное число Устанавливает ширину области просмотра в пикселях. height device-height или целое положительное число Устанавливает высоту области просмотра в пикселях. initial-scale Число от 0.0 до 10.0 Устанавливает соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. maximum-scale Число от 0.0 до 10.0 Задаёт максимальное значение масштаба. Должно быть больше или равно minimum-scale, в противном случае игнорируется. minimum-scale Число от 0.0 до 10.0 Задаёт минимальное значение масштаба. Должно быть меньше или равно maximum-scale, в противном случае игнорируется. user-scalable yes или no Если указано no, то пользователь не сможет масштабировать веб-страницу. По умолчанию используется yes. Синтаксис
Значения
Строка символов, которую надо взять в одинарные или двойные кавычки.
Значение по умолчанию
http-equiv¶
Браузеры преобразовывают значение атрибута http-equiv , заданное с помощью content , в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.
Синтаксис
Значения
Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута http-equiv .
Content-Type Тип кодировки документа.
expires Устанавливает дату и время, после которой информация в документе будет считаться устаревшей.
pragma Способ кэширования документа.
refresh Загружает другой документ в текущее окно браузера.
Значение по умолчанию
Устанавливает идентификатор метатега для пары « имя=значение ». Одновременно использовать атрибуты name и http-equiv не допускается.
Синтаксис
Значения
Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута name .
author Имя автора документа. description Описание текущего документа. keywords Список ключевых слов, встречающихся на странице. viewport Управляет просмотром сайта на мобильных устройствах.