Расположение html элементов на веб страницах

Дата публикации:

В статье разберемся с расположением различных элементов html на веб странице. Вы уже знаете что такое Заголовки, параграфы и ссылки. Если разместить эти элементы на веб странице в разнобой. Можно увидеть некоторые различия между ними. Одни выстраиваются друг за другом, например ссылки в параграфе, а другие элементы, такие как заголовки и параграфы начинаются с новой строки, не обращая внимания на соседние элементы.

Почему так происходит?

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

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

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

Ссылки же в html (тег a) являются строчными элементами и сколько не распологай их на веб странице, они будут выстраиваться в одну строчку.

Блочные элементы в html

Очень важно знать и помнить что блочные элементы могут содержать строчные теги и другие блочные элементы. В абзаце могут содержаться заголовки(h1-h6), ссылки (a) и другие элементы, не нарушая при этом валидность документа.

Список блочных элементов:

address,article,aside,blockquote,dd,div,dl,dt,figure,footer,form,h1-h6,header,hr,li,nav,ol,p,pre,ruby,section,table,tr,ul.

Строчные элементы html

Строчные элементы в свою очередь, не могут размещать в себе блочных элементов. И это логически правильно, нельзя же запихнуть в ссылку целый абзац!Если все таки это сделать, то код не пройдет валидацию, и могут возникнуть некоторые проблемы с версткой.

Список строчных элементов:

a,abbr,audio,b,bdo,button,canvas,cite,code,del,dfn,em,i,iframe,img,input,ins,kbd,mark,meter,q,rp,rt,s,samp,small,select,span,strong,sup,sub,td,textarea,th,var,video.

Новый коментарий
Реклама