Block And Inline Elements
Có thể bạn quan tâm
Back to Week 4 page »
Block and Inline ElementsIn HTML 4.01, there were two basic categories of HTML elements:
- Block level elements
- Inline elements
Block Level Elements
Block level elements take up as much space as possible by default. Each block level element will start a new line on the page, stacking down the page. In addition to stacking vertically, block level elements will also take up as much horizontal space as possible.
The p element is an example of a block level element. Each new paragraph tag will appear on its own line vertically. Paragraphs with longer content will stretch all the way to the edge of the page.
Examples of block level elements:
- <p>
- <ol>, <ul>, <dl>
- All headings
- <article>, <section>, <div>
Demo
- See basic block level demo
- See basic block level demo with outlines
Inline Elements
Inline elements display in a line. They do not force the text after them to a new line.
An anchor (or link) is an example of an inline element. You can put several links in a row, and they will display in a line.
Examples of inline elements:
- <a>
- <strong>, <em>, <b>, <i>, <q>, <mark>
- <span>
Demo
- See basic inline level demo
- See basic inline level demo with outlines
See it all together
- See demo with block and inline elements outlined
Why is this important?
How an element behaves when styled with CSS will change based on the display mode of an element (block vs. inline). Some CSS properties react differently for each display type. We'll learn more about this behavior when we start to lay out pages in CSS.
For now, remember this:
- Inline elements cannot contain block level elements
For example, you cannot wrap an <em> around two paragraphs:
<em> ← Incorrect <p>An emphasized paragraph.</p> <p>Another emphasized paragraph.</p> </em> ← Incorrect The correct way to do this would be to put the inline element inside each block element: <p><em>An emphasized paragraph.</em></p> <p><em>Another emphasized paragraph.</em></p>One Exception (New in HTML5)
HTML5 creates one welcome exception to this rule. You can now wrap links around block level elements. An example makes this clear.
It's common to mark up the name of the site with a logo and tag line, something like this:
<h1>Recipe Book</h1> <p>Eat first, talk later.</p>Typically, each of these would also link to the home page. Previously, you would mark up each block-level element with a link
<h1><a href="index.html">Recipe Book</a></h1> <p><a href="index.html">Eat first, talk later.</a></p>Now you can simply wrap both in a link. Cleaner and less redundant.
<a href="index.html"> <h1>Recipe Book</h1> <p>Eat first, talk later.</p> </a>Back to Week 4 page »
Từ khóa » Html Block Elements Display
-
Every HTML Element Has A Default Display Value, Depending On What Type Of Element It Is. There Are Two Display Values: Block And Inline. ... HTML Tags.
-
Block-level Elements - HTML: HyperText Markup Language | MDN
-
HTML - Blocks - Tutorialspoint
-
HTML Block Level, Inline Elements - HTML Tutorials - W3resource
-
CSS Inline Vs Inline-Block Vs Block
-
Basic HTML: Block-level, Inline, And Organizational Elements
-
HTML Blocks - Dofactory
-
Inline And Block Elements In HTML - Scaler Topics
-
HTML Block And Inline Level Elements Difference - Tech Altum Tutorial
-
HTML Block And Inline Elements
-
HTML Block And Inline Elements - GeeksforGeeks
-
HTML Block And Inline - Free Tutorial To Learn HTML And CSS
-
HTML Block And Inline Elements - DataFlair
-
How Does Block Display In HTML With Examples? - EduCBA