{"id":1000436,"date":"2007-03-07T13:26:37","date_gmt":"2007-03-07T18:26:37","guid":{"rendered":"http:\/\/www.elharo.com\/blog\/software-development\/web-development\/2007\/03\/07\/defining-block-level-elements\/"},"modified":"2007-03-07T13:28:14","modified_gmt":"2007-03-07T18:28:14","slug":"defining-block-level-elements","status":"publish","type":"post","link":"https:\/\/www.elharo.com\/blog\/software-development\/web-development\/2007\/03\/07\/defining-block-level-elements\/","title":{"rendered":"Defining Block Level Elements"},"content":{"rendered":"

I know what an HTML block level element is, but I’m damned if I can say it in a concise, correct, obvious way (which it so happens I need to do in Chapter 4 of Refactoring HTML<\/em>). In HTML, block level elements include p<\/code>, blockquote<\/code>, div<\/code>, table<\/code>, ul<\/code>, ol<\/code>, dl<\/code>, h1<\/code>–h6<\/code>, and a few others. Generally speaking a block element has a line break before and after it, but that’s really only true in a particualr visual representation. The notion of line breaks doesn’t make a lot of sense in a screen reader, for example.<\/p>\n

The HTML 4.0.1 specification defines block elements thusly:<\/p>\n

Certain HTML elements that may appear in BODY<\/samp><\/a> are said to be “block-level”<\/a><\/span> while others are “inline”<\/a><\/span> (also known as “text level”). The distinction is founded on
\nseveral notions:<\/p>\n

\n
Content model<\/strong><\/dt>\n
Generally, block-level elements may contain inline elements and other
\nblock-level elements. Generally, inline elements may contain only data and
\nother inline elements. Inherent in this structural distinction is the idea that
\nblock elements create “larger” structures than inline elements.<\/dd>\n
Formatting<\/strong><\/dt>\n
By default, block-level elements are formatted differently than inline
\nelements. Generally, block-level elements begin on new lines, inline elements
\ndo not. For information about white space, line breaks, and block formatting,
\nplease consult the section on text<\/a>.<\/dd>\n
Directionality<\/strong><\/dt>\n
For technical reasons involving the [UNICODE]<\/a> bidirectional
\ntext algorithm, block-level and inline elements differ in how they inherit
\ndirectionality information. For details, see the section on inheritance of text direction<\/a>.<\/dd>\n<\/dl>\n<\/blockquote>\n

That’s not a great definition though. These seem more to be consequences rather than defining characteristics of block level elements.<\/p>\n

Can anyone offer a more precise definition of block element that does not presume a particular rendering? Just what is a block anyway? <\/p>\n","protected":false},"excerpt":{"rendered":"

I know what an HTML block level element is, but I’m damned if I can say it in a concise, correct, obvious way (which it so happens I need to do in Chapter 4 of Refactoring HTML). In HTML, block level elements include p, blockquote, div, table, ul, ol, dl, h1–h6, and a few others. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[410],"class_list":["post-1000436","post","type-post","status-publish","format-standard","hentry","category-web-development","tag-flash"],"_links":{"self":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/posts\/1000436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/comments?post=1000436"}],"version-history":[{"count":0,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/posts\/1000436\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/media?parent=1000436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/categories?post=1000436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/tags?post=1000436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}