This article is currently in the process of being translated into Spanish (~20% done).
If you are fluent in Spanish, then please help us - just point to any untranslated element inside the article and click the translation button to get started. Or have a look at the current translation status for the Spanish language.
If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.
Please help us by translating the following metadata for the article/chapter, if they are not already translated.
If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!
Block & Inline elements
Hemos examinado algunos de los elementos HTML5 de los que se construye una página web y ahora es el momento de presentar otra propiedad más de los elementos HTML5. Hay dos tipos diferentes de elementos: elementos en línea y elementos de bloque. El hecho de que un elemento sea un elemento en línea o de bloque afecta la forma en que el navegador procesa el elemento.
Elementos de Bloques
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.
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)
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:
Solo otro día
Escrito por Christina
El 11 de Enero
This is my second blog entry, and I just wanted to check in on you
Mi Primer Entrada de Blog
Escrito por Christina
El 10 de Enero
¡Estoy tan feliz de escribir mi primer entrada de blog - 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.
What you have learned
- Block elements are like squares
- Inline elements have no breaks associated with the element
- 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