This article is currently in the process of being translated into Hungarian (~11% done).
Blokk és Soron belüli elemek
We have looked at some of the HTML5 elements a webpage is constructed of and now it is time to introduce yet another property of the HTML5 elements. There are two different types of elements – inline elements and block elements. Whether an element is an inline or block elements affects how the browser render the element.
Blokk elemek
A block element is rendered, as the name indicates, as an actual block. The block-element is as wide as it can possibly be, a rectangular that does not break across lines, and the width and height of the element can be regulated. Block-elements may contain inline elements and other block-elements.
Sorban lévő elemek
The inline elements are treated as a part of the flow of the document and the size should normally not be changed manually. Only inline elements may be contained with inline-elements. And to make even more confusing, inline elements are the only elements that may be contained within a paragraph-element, even though the <p>-element is a block-element.
The <p></p> element is a block-element, whereas the <b>-element is an inline-element. (b stands for bold and changes the appearance of the text)
Példák
The most commonly used block-level element is the <div>. (Div is an abbreviation of Division). The <div> element is a block-element used to separate the different types of content on your webpage. Imagine you have two blog entries, consisting of the actual entry, a title, your name, and a publication date, it might look like this:
Egy újabb nap
Christina által írva
Január 11.-én
Ez a második blog bejegyzésem, és csak ráakartam nézni rád.
Az első blog bejegyzésem
Christina által írva
Január.10-én
Olyan boldog vagyok hogy megírtam az első blog bejegyzésem - yay!
As you can see, there is two blog-entries and we divide them using a block element - in this case is chose a <div>. Inside the block element is another block element, the paragraph (<p>). Using just only the most necessary markup, the HTML for your webpage would look like this:
<!DOCTYPE html>
<html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<div>
<p>Just Another Day<br />
Written by Christina<br />
On January 11th
</p>
<p>This is my second blog entry, and I just wanted to check in on you
</p>
</div>
<div>
<p>My First Blog Entry<br />
Written by Christina<br />
On January 10th
</p>
<p>
I’m so happy to write my first blog entry – yay!
</p>
<div>
</body>
</html>The <div>-elements are used to diversify the two blog entries. Inside each of the <div>-elements is two paragraphs consisting of title & author and the actual entry.
The <div> element is widely used as a container that can apply formatting anywhere you want on your webpage. The limitation is that the <div> elements do not tell you anything about the actual content. So the browser knows that it has found a separate section, but not what kind of section. In HTML5 a lot of new elements have been introduced and some of them are here to replace the use of the <div> - see the articles about the new semantic elements to dig in to semantic markup.
I have previously talked about nesting elements and the fact that the <p> elements is inside the <div> elements is an example of nested elements.
Amit tanultál eddig
- A blokk elemek olyan mint a négyzetek
- Sorban lévő elemeknek nincsen tördelése összekötve az elemmel
- You can nest block elements inside other block elements
- But you cannot nest block elements inside inline elements
- The paragraph is the only block element that must only contain inline elements
- The <div> elements is currently used as a container, but new HTML5 elements is here to change that
