HTML is a language which structures the layout of the page. This layout is made up from different elements. If you are a little familiar with HTML, elements like p, body, img, table, and many others are very recognizable.
In HTML there are two types of elements: replaced and nonreplaced. Replaced elements are the ones which do not have their content within the markup. The data that they present does not come from within the document, but rather from the outside. Element img is one of the best representatives. It has an attribute src that references outside to fetch an image to display on rendering. As a matter of fact, img doesn’t have any content. You can identify replaced elements when you see an element that doesn’t have a closing tag. In a similar manner, input element is also a replaced element, as its presentation is varied depending on its type attribute.
<!-- Replaced Elements -->
<img src="image.gif" >
<input type="text" name="first_name" >
Nonreplaced elements as you might have already guessed are the ones that have their content fetched from the outisde, and presented by a browser. It presents the content inside a box that it creates itself. Majority of HTML elements are nonreplaced: they require opening and closing tag, and to show up, they need to have content to display.
<!-- Nonreplaced Elements -->
<p>Paragraph</p>
<span>Span</span>
Elements also have different display roles. There are two basic types of display: block and inline. There are actually more available, however these ones are the most frequently encountered. Block-level elements create a box that fills its parent’s element’s space or content area and cannot have other elements by its sides. When browser renders the layout of the block element, it adds breaks before and after the element. That’s why elements like h1, h3, p, and div, automatically push whichever content is right after them to the next line. List items also happen to be block-level elements. In addition to creation of breaks, they also add a counter number or a dot next to each list item (depending on whether the list is ordered or unordered).
Inline-level elements create an element box within a line with other content, like text. They do not break the flow of the content. Span, a, em are examples of inline-level elements. One important difference to note between block and inline elements is that in HTML block elements cannot descend from inline elements. Only inline elements can descend from block-level ones. However, with the use of CSS, we can overwrite those restrictions. CSS property display can help us with that.
<body>
<p>This is a paragraph with <em>an inline element</em> within it.</p>
</body>
/* Overriding HTML default rules */
p {display: inline;}
em {display: block;}
Understanding such small detail like replaced vs nonreplaced and block vs inline can help in understanding HTML and CSS layout behaviors and rules.
Abstrakt Kode 