Главная » Языки программирования

Html sections with div

Содержание
  1. How to use div tag in HTML to divide the page
  2. Step 1: Add the div tags
  3. Step 2: Add the class name to div tags
  4. Step 3: Add the contents
  5. Example code
  6. Example output
  7. Important notice
  8. How to Use Div Tag in HTML to Divide the page?
  9. How do we Use Div Tag to Divide HTML Page in Horizontal Sections?
  10. How do we use Div Tag to Divide HTML Page in Vertical Sections?
  11. Conclusion
  12. div, section, article — где использовать каждый тег
  13. Назначение элементов
  14. div, section или article
  15. Комбинирование тегов
  16. Как правильно использовать теги div, section и article.
  17. Div
  18. Section
  19. Последние новости
  20. Article
  21. Комментарии ( 5 ):

How to use div tag in HTML to divide the page

Learn how to divide the page in HTML using the div tag in 3 easy steps.

Step 1: Add the div tags

Let’s say you want to divide the page into three sections. You can do this by adding three empty div tags.

Step 2: Add the class name to div tags

The next step is to add the class name to the div tags and give them a unique name. The class name attribute separates the other div tags, and when you apply CSS styling to one of the sections, it won’t affect the sections.

Here, I named them one, two, and three, but you are free to call whatever you want.

div class="one">div> div class="two">div> div class="three">div>

Step 3: Add the contents

At this point, you’re all set! The page is divide into three sections, and you can add any contents like texts, images, etc., inside the div tags. Here, I added a simple text to give you an idea.

div class="one"> h1>This is section oneh1> div> div class="two"> h1>This is section twoh1> div> div class="three"> h1>This is section threeh1> div>

Example code

Here’s an example code of how you can divide the page with the div tag. The margin, div, and h1 properties are included only for demonstration purposes.

style> body < margin: 0; > div < padding: 65px; > h1 < text-align: center; > .one < background-color: red; > .two < background-color: yellow; > .three < background-color: green; > style> div class="one"> h1>This is section oneh1> div> div class="two"> h1>This is section twoh1> div> div class="three"> h1>This is section threeh1> div>

Example output

And here’s how it will turn out on the browser:

Читайте также:  Html span class background

div tag to divide the page

Important notice

We recommend using the section tag to divide the page. The section tag improves the readability of the HTML code since adding too many div tags can make it hard to read the code.

In addition to that, you are helping to improve the website’s accessibility so that people with disabilities can use your website. And finally, you are also helping the search engines to understand the content of your web page.

If you want to refresh your knowledge of the div tag and learn what else it can do, check out this article about what “div” does in HTML.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript

Источник

How to Use Div Tag in HTML to Divide the page?

In HTML,

tag is the most important tag and is utilized in most of the documents. The
tag is considered as the container for other HTML tags. Therefore, it can be used to apply multiple HTML tags on a desired part of the document.

The tag can also be used to divide an HTML page into multiple sections. This write-up aims to guide you how div tags can be used to divide the page. The following outcomes are expected:

How do we Use Div Tag to Divide HTML Page in Horizontal Sections?

In HTML, a tag act as a section for the data in the HTML page. To divide a page into sections, you need to write the required HTML tags inside the tag. Let’s see the practical example below to understand the division of HTML pages by tag.

In this code, we have used three tags. These tags are associated with the three CSS classes. The CSS code used in the above HTML code is provided below:

div
{
text- align : center;
font- size : 30px;
color : white;
padding: 10px;
display: flex;
align-items: center;
justify- content : center;
height : 150px;
width : 98 %;
}
.one
{
background- color :limegreen;
}
.two
{
background- color :orange;
}
.three
{
background- color : hotpink;
}

In the CSS part, we have targeted all three tags to format the content of all the divs. To give different colors to each div, three classes “one”, “two”, and “three” are created.

Output

The output shows that a web page is divided into three sections using HTML tag.

How do we use Div Tag to Divide HTML Page in Vertical Sections?

In HTML, we can use tag to divide a web page into vertical sections. Let’s see the practical example below to understand the vertical division of an HTML page by using tag.

In this code, we have created three sections using tag. For better presentation, we have applied the following CSS on the div tags:

div
{
text-align : center ;
font-size : 30px ;
color : white ;
padding : 10px ;
display : flex ;
align-items : center ;
justify-content : center ;
height : 500px ;
width : 30% ;
}
.one
{
background-color : limegreen ;
float : left ;
}
.two
{
background-color : orange ;
float : left ;
}
.three
{
background-color : hotpink ;
float : left ;
}

In the CSS part we target all the divs and used different properties to give the height, width, padding and background font size to the div content. It is observed that the vertical sections are created with the help of float property of CSS and its value is set to left.

Output

The output shows that a web page is divided into three sections using HTML tag.

Conclusion

In HTML, we can divide a whole webpage into sections by using tag along with the CSS. By default, a tag divides a webpage into horizontal sections. However, you can use the float property of CSS to make the vertical sections of the webpage. By following this guide, you can apply tag to divide the HTML page.

Источник

div, section, article — где использовать каждый тег

С приходом спецификации HTML5 мы обзавелись набором новых тегов типа div, section, article итд. Не смотря что с выхода HTML5 прошёл уже почти десяток лет, ученики не перестают меня спрашивать, для чего необходим тот или инной тег. Простым ответом на этот вопрос будет — для построения семантических макетов. Но давайте разберёмся в деталях.

Итак, теги и были придуманы для более осмысленного семантического разделения вашего контента, как альтернатива единственному

Назначение элементов

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

 
 
Наши возможности
 
.
 
 
Наши преимущества
 
.

Элемент section подразумевает более конкретное применение. Секция объединяет контент семантически связанный между собой, например блок новостей, преимуществ или услуг на вашем лендинге. Поскольку секция имеет логику формирования контента на странице, обязательно необходимо проставить заголовок прямо в начале секции.

Тег article предполагает ещё более конкретное применение по сравнению в секцией. Article используется в контексте сильной семантической связи контента, в нём так же как и в секции обязательно указывать заголовок. При этом контент как не трудно догадатся из названия относится к содержимому статьи / страницы, должен быть независим от прочего оформления сайта и не терять смысла, если его показать в отрыве от всего сайта, так как именно подобным образом его используют экранные ассистенты и режим «для чтения» в браузерах.

 
Заголовок статьи
 . 
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона.

div, section или article

Итак когда какой элемент правильно использовать?

  • Если конент никак между собой не связан — используйте ;
  • Если контент имеет семантическую логику, и вложенные элементы которые можно объеденить в рамках единного смыслового блока — используйте ;
  • Если контент имеет сильную семантическую взаимосвязь и может быть выделен из контекста сайта без ущерба смысловой нагрузки — используйте

Комбинирование тегов

Теги могут представлять собой комбинации, например если на нашем лендинге или главной странице, есть блок новостей, логично будет обернуть его в section, а тизеры статей в article

Кроме того, элемент article может содержать секции для объединения в себе связанной информации, а ещё можно вложить article самого в себя, когда мы хотим процитировать большую выдержку из других статей, или вложить рекомендуеммые / связанные статьи со ссылками. Не забывайте, что для цитирования кототких текстов грамотнее будет использовать тег blockquote.

Верстайте контент грамотно и Google полюбит ваши сайты =)

Источник

Как правильно использовать теги div, section и article.

Как правильно использовать теги div, section и article.

Всем привет! В этой статье мы рассмотрим, как правильно использовать теги div, section и article в HTML5.

Помимо всем известного и очень часто используемого тега div, в HTML5 появились новые, семантические теги, которые позволяют более четко разделить контент на вашем сайте и тем самым помочь поисковым роботам в их нелегкой работе. Однако, к сожалению, многие верстальщики еще не научились их использовать правильно, особенно те, которые обозначены в начале статьи. Надеюсь, что после прочтения данной статьи вопросы по этому поводу, если и не пропадут совсем, то их станет, как минимум, меньше. Итак, приступим.

Div

Если вы откроете сайт W3C, то можете найти там рекомендацию, смысл которой заключается в том, что использовать данный тег нужно для семантически несвязанного между собой контента. Очень часто div используют для того, чтобы сгруппировать какой-нибудь контент, который затем нужно спозиционировать или как-то оформить с помощью css.

Section

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

Последние новости

.

Article

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

Конечно, все зависит от конкретной ситуации, но чаще всего вы можете разметить свою страницу правильно, используя следующее правило: если контент семантически связан между собой и может быть изолирован со страницы без потери смысла, то используйте article. Если не может быть изолирован со страницы без потери смысла, используйте section. В остальных случаях – div.

Итак, на этом все. Надеюсь, что данная тема вам ясна и теперь вы будете размечать ваши интернет-странички грамотно. Спасибо за внимание и удачи!

Создано 02.11.2015 13:58:49

  • Михаил Русаков

    • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

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

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 5 ):

    Ни чего не понятно. Михаил, покажи полный пример. Одна или две строчки мне не о чём не говорят. Тут как минимум 2 примера нужно с article и section.

    Здесь все более чем понятно. Перечитайте статью снова. На ваш вопрос есть ответ в разделе Article, в самом начале. Нужен пример? Держите! Отдельная статья на сайте(новость или еще что-нибудь) будет в теге article, но все статьи(новости и т.д.) ВМЕСТЕ будут обрамлены тегом section

    Александр, aricle в переводе на русский, значит статья — это понятно, все статьи должны быть в теге article. А по мне вот правильный пример двух тегов:

    Целая статья.

    Часть статьи.

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

    Тема не такая уж и простая,сложно сразу все правильно сделать.Кстати, вот тут есть вы сможете найти решение.если что-то не так сделали http://sitepark.ua/osnovnye-oshibki-pri-sozdanii-saytov

    Крутая статья, спасибо за полезный материал!

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

    Источник

    Оцените статью
    © 2024 Программирование