Реклама

HTML5 это последний и самый большой Что такое HTML5, и как он меняет способ просмотра? [MakeUseOf Объясняет]За последние несколько лет вы, возможно, слышали термин HTML5 время от времени. Независимо от того, знаете ли вы что-нибудь о веб-разработке или нет, концепция может быть несколько туманной и запутанной. Очевидно, что ... Прочитайте больше версия наиболее широко используемого языка разметки в сети. По сравнению с последней версией языка произошли большие изменения, и если вы не используете их, вы упускаете некоторые действительно интересные функции.

У нас нет места, чтобы охватить каждый новый элемент в пятой версии HTML, но эти девять являются одними из самых важных. Для получения дополнительной информации о новых элементах и ​​API в HTML5, обязательно проверить W3Schools.

Введение в семантические элементы

Как и большая часть интернета, HTML5 переключился на семантику. Теперь, вместо того, чтобы просто использовать теги для форматирования, они также используются, чтобы сообщать браузерам

и поисковые системы Топ-7 семантических поисковых систем как альтернатива Google Прочитайте больше смысл того, что они окружают.

Например,

просто говорит браузеру, что он содержит абзац.

который мы обсудим на мгновение, сообщает браузеру, что он содержит основное содержание страницы.

Семантическая сеть все еще развивается, и мы только начали царапать поверхность того, что она может сделать. HTML5 помогает принести семантическая разметка Что такое семантическая разметка и как она изменит интернет навсегда [объясненная технология] Прочитайте больше гораздо большей части Интернета, и это может быть полезно только для будущей семантической обработки.

1.

тег определяет «независимый, автономный контент». Самый простой пример, конечно, статья. Для этой конкретной статьи мы открываем тег перед введением и закрываем его после заключения.

 Весь текст в вашем автономном разделе. 

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

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

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

2.

Тесно связаны с

является

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

будет внутри

… верно?

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

Зачем вам нужен ЦАП
Все звучит лучше.
Как настроить ЦАП
Вот что вам нужно сделать.. .

Вы можете даже иметь разделы внутри разделов, если они соответствуют вашей странице. Помните, что раздел - это просто «тематическая группировка контента», и вы найдете множество мест для его использования.

3.

Этот элемент «должен использоваться в качестве контейнера для вводного контента». Короче говоря, это та часть вашей страницы, которая помогает людям понять, что они собираются читать.

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

Все, что вам нужно знать о ЦАП
Вот полезное введение в ЦАП ...
 Остальная часть вашей статьи идет здесь.

Разделы заголовка обычно содержат как минимум один тег заголовка - H1, H2 и т. Д. В этом нет необходимости, но в целом, если вы используете тег заголовка, есть хорошая ставка, что вы включаете содержимое заголовка.

4.

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

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

5.

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

Это действительно простой тег - это все, что нужно сделать. Используйте его, чтобы определить раздел навигации, и больше не используйте его на своей странице.

6.

Одним из самых интересных новых элементов в HTML5 является сторонний. W3 дает ему несколько бесполезное определение «некоторого контента помимо контента, в который он помещен».

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

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

Например, если бы мы включили в эту статью боковую панель с информацией об истории HTML5, это было бы в стороне.

Но

 Основная статья выходит здесь.  Статья продолжается здесь.

Поскольку этот тег имеет многократное использование, он может сбивать с толку. Если вы помните, что это «вторичный контент» и что он не всегда должен быть боковой панелью, у вас будет лучшее представление о том, как его использовать.

7.

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

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

Нажмите здесь, чтобы увидеть информацию.

Вот более подробная информация, которая вам не нужна прямо сейчас.

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

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

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

Есть другие классные вещи, которые вы можете сделать с HTML 8 интересных HTML-эффектов, которые каждый может добавить на свой сайтВам не нужно знать CSS или PHP, чтобы создать модный сайт. Используйте эти интересные трюки HTML для создания потрясающих эффектов. Прочитайте больше Кроме того, даже если вы не знаете много CSS или JSON.

8-9.

и

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

обходит тег изображения и сообщает браузеру, что это отдельное изображение, диаграмма, листинг кода или другая фигура.

Если рисунок удаляется со страницы, это не повлияет на поток контента.

Это дает вам встроенный способ добавить подпись к вашим изображениям. Больше не нужно проходить через CMS.

Воспользуйтесь преимуществами HTML5

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

Но если вы сможете справиться с этими девятью, вы сможете хорошо использовать HTML5. И если вы новичок в HTML, обязательно ознакомьтесь эти примеры кода 17 простых примеров кода HTML, которые вы можете выучить за 10 минутХотите создать простую веб-страницу? Изучите эти примеры HTML и попробуйте их в текстовом редакторе, чтобы увидеть, как они выглядят в вашем браузере. Прочитайте больше !

Вы начали использовать HTML5? Какие новые элементы вы считаете наиболее полезными? Поделитесь своими мыслями в комментариях ниже!