block or not block?
-
There is a very basic distinction between html tags: some are block-level elements, some are inline elements.
the example shows the paragraph-tag (<p>) and the emphasize-tag (<em>). <p> is a block-level element and will always be rendered as one retangular area in the browser. <em> is an inline-tag, it might be broken up into several lines
View File
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
line-height:1.4;
font-family:Cambria,Georgia,serif;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.8);
}
p { background-color:#CCCCCC; }
em { background-color:#890101; color:white; }
</style>
<title>HTML Basics: block-level elements vs. inline elements</title>
</head>
<body>
<h1>block-level elements vs. inline elements</h1>
<div>resize the browser window to observe how the block-level elements
is always displayed as <strong>one</strong> rectangular area, while
the inline element em is sometimes split up into several lines.</div>
<p>I am a block-level element - p for paragraph.I am a block-level
element - p for paragraph. I am a block-level element - p for paragraph.
I am a block-level element - p for paragraph.<em>An inline element
right in the middle. Mittendrin ein nicht-blockbindender em-Tag</em>.
I am a block-level element - p for paragraph. I am a block-level
element - p for paragraph.</p>
<p>I am a block-level element - p for paragraph.Ich bin ein
blockbildender Tag, nämlich ein Paragraph P. Ich bin ein blockbildender
Tag, nämlich ein Paragraph P.Ich <em>Mittendrin ein nicht-blockbindender
em-Tag. An inline element right in the middle. </em>. bin ein
blockbildender Tag, nämlich ein Paragraph P. I am a block-level
element - p for paragraph. I am a block-level element - p for paragraph.</p>
<p>Ich bin ein blockbildender Tag,<em>An inline element right in the
middle. Mittendrin ein nicht-blockbindender em-Tag</em> nämlich ein
Paragraph P. Ich bin ein blockbildender Tag, nämlich ein Paragraph P.
Ich bin ein blockbildender Tag, nämlich ein Paragraph P. Ich bin
ein blockbildender Tag, nämlich ein Paragraph P. I am a block-level
element - p for paragraph. I am a block-level element - p for paragraph.</p>
</body>
</html>