Итак, вы зашли так далеко, время для настоящих вещей.
HTML существует в современном мире, чтобы придавать структуру веб-страницам. В зачаточном состоянии Интернета мы также использовали его для стилизации элементов, но с появлением CSS эти дни давно прошли. Вот основы -
‹раздел›
Унылое сокращение от «дивизия», это наш хлеб с маслом. «divs», вероятно, является наиболее распространенным тегом, который будет использовать веб-разработчик, и на то есть веские причины. Низкий div прост в стилизации, нелестно выглядит из-за своей формы и размера по умолчанию и не содержит конкретных сведений о том, каким может быть его содержимое. По сути, это контейнер для содержимого веб-страницы. Ради простоты оформления можно с уверенностью сказать, что все должно быть помещено в div, если только не возникнет особых потребностей.
‹section›, ‹header›, ‹footer› и ‹article› функционально аналогичны ‹div›, но обозначают их содержимое. См. мою статью о семантике для получения дополнительной информации по этой теме.
Элементы div располагаются вертикально друг над другом в порядке поступления. Элементы с таким поведением называются элементами блочного уровня, потому что они складываются… как блоки…
Большинство HTML-элементов работают на уровне блоков.
‹span›
Тем не менее, span является антитезой inline div. При размещении внутри другого элемента его содержимое отображается в той же строке (отсюда «встроенное»), что и содержимое тега хоста.
Однако будьте осторожны, span привередлив и будет отображаться в строке с выбранным тегом только в том случае, если он на самом деле внутри другого тега. Поместите его снаружи, и он будет располагаться ниже содержимого, которое находится перед ним. С другой стороны, два тега span рядом друг с другом отображаются как встроенные. Проверьте это здесь.
‹таблица›
Таблица с осями X и Y, как электронная таблица. Это единственный реальный способ, которым HTML должен структурировать контент по горизонтали. Это некрасиво, но у этого есть свое применение. Большинство преимуществ структуры, которые вы получаете от «таблицы», могут быть улучшены с помощью соглашений о стилях CSS, поэтому вариант использования здесь более или менее такой же, как данные на листе Excel. Если это абсолютно необходимо делать исключительно в HTML, то по крайней мере ‹table› существует!
‹ul› и ‹ol›
Ненумерованный список и родственный ему упорядоченный список — это более или менее то, что можно было бы ожидать от списка. Разница между ними заключается в том, что символ используется в качестве маркера перед каждым элементом списка, неупорядоченные - это маркеры символов, такие как точка или тире, а упорядоченные - это числа, буквы или римские цифры. Оба они содержат предметы с тегом ‹li›, означающим — сюрприз! - 'Элемент списка'. Внутри каждого элемента списка находится любое содержимое, которое вы хотите в качестве элемента списка.
Это все элементы, которые структурируют веб-страницу. Кажется, это небольшой список, но благодаря невероятно эффективному взаимодействию между HTML и CSS это все, что нам нужно. Структуру, созданную с помощью HTML, можно рассматривать как начальные блоки внутри блоков, при этом назначение каждого блока ожидает своего стиля с помощью CSS.
