Содержание
HTML5 — самый последний и лучший
версия наиболее широко используемого языка разметки в сети. По сравнению с последней версией языка произошли значительные изменения, и если вы не используете их, вы упускаете некоторые действительно интересные функции.
У нас нет места, чтобы охватить каждый новый элемент в пятой версии HTML, но эти девять являются одними из самых важных. Для получения дополнительной информации о новых элементах и API в HTML5 обязательно посетите W3Schools.
Введение в семантические элементы
Как и большая часть интернета, HTML5 переключился на семантику. Теперь, вместо того, чтобы просто использовать теги для форматирования, они также используются, чтобы сообщать браузерам и поисковым системам
смысл того, что они окружают.
Например,
просто говорит браузеру, что он содержит абзац. который мы обсудим на мгновение, сообщает браузеру, что он содержит основное содержимое страницы.
Семантическая сеть все еще развивается, и мы только начали царапать поверхность того, что она может сделать. HTML5 помогает внести семантическую разметку
к гораздо большей части Интернета, и это может быть полезно только для будущей семантической обработки.
1.
Тег определяет «независимый, автономный контент». Самым простым примером, конечно, является статья. Для этой конкретной статьи мы открываем тег перед введением и закрываем его после заключения.
All of the text in your self-contained section.
Но есть и другие способы его использования. Например, многие блоги о кулинарии содержат личные истории о том, как появился рецепт или почему это важно для автора. Затем следует рецепт. Вы можете сделать аргумент, что каждый из этих элементов может стоять отдельно.
На форуме каждый пост или ветку можно считать автономным, и каждый из них может быть помечен собственным тегом. По большей части, он будет использоваться в основном контенте страницы. Но имейте в виду, что вы также можете использовать его более творчески.
2.
Тесно связано с является. Это определяет «тематическую группировку контента, обычно с заголовком». Так что будет внутри… верно?
Не обязательно. W3 указывает, что это зависит от структуры вашего сайта. Вы можете иметь автономный контент в разных разделах вашей страницы (например, подумайте о главной странице новостного сайта). Вы можете иметь разделы в этой статье.
Why You Need a DAC
Everything sounds better.
How to Set up a DAC
Here's what you need to do . . .
Вы можете даже иметь разделы внутри разделов, если они соответствуют вашей странице. Помните, что раздел — это просто «тематическая группировка контента», и вы найдете множество мест для его использования.
3.
Этот элемент «должен использоваться в качестве контейнера для вводного содержимого». Одним словом, именно часть вашей страницы помогает людям понять, что они собираются прочитать.
Но не обманывайте себя — вы можете использовать этот контейнер более одного раза. Например, вы можете использовать его для определения заголовка страницы и вводного абзаца вашего блога. Но вы также можете использовать его для обозначения вводного контента для каждого раздела.
Everything You Need to Know about DACs
Here's a useful introduction to DACs...
The rest of your article goes here.Разделы заголовка обычно содержат хотя бы один тег заголовка — H1, H2 и т. Д. В этом нет необходимости, но в целом, если вы используете тег заголовка, есть хорошая ставка, что вы включаете содержимое заголовка.
4.
В W3 говорится, что теги нижнего колонтитула обычно содержат «автора документа, информацию об авторских правах, ссылки на условия использования, контактную информацию и т. Д.». Вы можете думать об этом как о «домашнем хозяйстве».
Copyright: MakeUseOf, 2017.
Contact Us
В документации также указывается, что на вашей странице может быть несколько разделов нижнего колонтитула. Тем не менее, это хорошая идея — хранить всю эту информацию в одном месте.
5.
Этот тег содержит навигационные ссылки для данной страницы. Обратите внимание, что этот тег получает только раздел навигации, а не все ссылки на вашей странице. Это для панелей навигации и аналогичных инструментов.
Home
About
Это действительно простой тег — это все, что нужно сделать. Используйте его, чтобы определить раздел навигации, и больше не используйте его на своей странице.
6.
Одним из самых интересных новых элементов в HTML5 является сторонний. W3 дает ему несколько бесполезное определение «некоторого контента помимо контента, в который он помещен».
Короче говоря, сторонним является все, что связано (но отдельно) с окружающей информацией. Это может быть боковая панель, которая добавляет детали к вашему контенту. Когда он используется в наборе тегов, он предоставляет дополнительную информацию, которая не нужна для понимания основного контента.
Например, если бы мы включили в эту статью боковую панель с информацией об истории HTML5, это было бы в стороне.
Но этот тег также может быть использован вне содержимого статьи. В этом случае он обычно используется для информации, связанной с сайтом. Мы могли бы включить боковую панель, например, так:
The main article goes here.
MakeUseOf is focused on bridging the connection between users,
computers, devices and the internet through education.
The article continues here.Поскольку этот тег используется несколько раз, он может сбивать с толку. Если вы помните, что это «вторичный контент» и что он не всегда должен быть боковой панелью, у вас будет лучшее представление о том, как его использовать.
7.
Многие веб-сайты имеют информацию, которая должна отображаться, но не на видном месте. Может быть, это информация об авторских правах на фотографию. Или мелкий шрифт на конкурсе. Этот вид информации является именно тем, для чего предназначен тег детализации.
Когда вы используете тег подробностей, вы создаете скрытый текст, который можно легко отобразить. Вот пример:
Нажмите здесь, чтобы увидеть информацию.
Вот более подробная информация, которая вам не нужна прямо сейчас.
Просто нажмите на стрелку, чтобы получить подробную информацию. Просто. Создать его так же просто. Вот код, использованный для приведенного выше примера:
Click here to see information.
Here's more detailed information you don't need right away.
Тег определяет предложение, которое будет отображаться, а остальное содержимое скрыто. Обратите внимание, что в разделе сведений можно использовать другие теги: заголовки, разделы и т. Д.
Есть и другие интересные вещи, которые вы можете сделать с помощью HTML.
Кроме того, даже если вы не знаете много CSS или JSON.
8-9. а также
Не волнуйтесь, тег, который вы использовали в течение многих лет, не исчезнет. обходит тег изображения и сообщает браузеру, что это отдельное изображение, диаграмма, листинг кода или другая фигура.
Если рисунок удаляется со страницы, это не повлияет на поток контента.
идет внутри тега рисунка и указывает заголовок для изображения. Это может выглядеть примерно так:
This is our logo!
Это дает вам встроенный способ добавить подпись к вашим изображениям. Больше не нужно проходить через CMS.
Воспользуйтесь преимуществами HTML5
Новые элементы в HTML5 добавляют много силы, особенно для семантических целей. Существуют дополнительные элементы для форматирования, скалярных измерений, хода выполнения задач и многого другого. Вы можете увидеть все новые элементы в W3Schools.
Но если вы сможете справиться с этими девятью, вы сможете хорошо использовать HTML5. И если вы новичок в HTML, обязательно ознакомьтесь с этими примерами кода
!
Вы начали использовать HTML5? Какие новые элементы вы считаете наиболее полезными? Поделитесь своими мыслями в комментариях ниже!
