Scribd
Upload
2 views9 pages

html_block_inline_elements

The document explains the differences between block, inline, and invisible elements in HTML5, detailing their characteristics and uses. Block elements create large blocks of content and start new lines, inline elements define text without starting new lines, and invisible elements provide metadata without displaying content. It also discusses how to change an element's display type using CSS for layout purposes.

Uploaded by

Max Elite
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views9 pages

html_block_inline_elements

The document explains the differences between block, inline, and invisible elements in HTML5, detailing their characteristics and uses. Block elements create large blocks of content and start new lines, inline elements define text without starting new lines, and invisible elements provide metadata without displaying content. It also discusses how to change an element's display type using CSS for layout purposes.

Uploaded by

Max Elite
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

HTML5

Block, Inline and Invisible elements


Hvad er et BLOCK element?
“A block-level element is an element that creates large
blocks of content like paragraphs or page divisions. They
start new lines of text when you use them, and can contain
other blocks as well as inline elements and text or data.”

Se næste side: oversigt til HTML 5 block elementer!


Selector HTML Use Selector HTML Use

article* Article Content header* Section or Page Header

Groups Header
aside* Aside Content hgroup*
Information

blockquote Long Quotation hr Horizontal Rule

body Page Body li List Item


br Line Break map Image Map

button Push Button object Object Embedding

canvas* Draw Area ol Ordered List


caption Table Caption output* Form Output
col Table Column p Paragraph

colgroup Group of Table Columns pre Preformatted Text

Displays progress of
dd Definition Description progress*
time consuming task

div Division section* Section in Web page

dl Definition List table Table

dt Definition Term tbody Table Body

embed External Content textarea Form Text Input Area

fieldset Fieldset Label tfoot Table Footer

figcaption* Figure Caption th Table Header

figure* Groups Media Content and Caption thead Table Header

footer* Section or page footer tr Table Row

form Input Form ul Unordered List

h1–6 Heading Levels 1–6 video* Video player


Hvad er et INLINE element?
“An inline element is an element that define text or data in
the document like STRONG makes the enclosed text
strongly emphasized and Q says the enclosed text is a
quotation. They don't start new lines when you use them,
and they generally only contain other inline tags and text or
data. Or they include nothing at all, like the BR tag.”

Se næste side: oversigt til HTML 5 INLINE elementer!


Selector HTML Use
Selector HTML Use

a Anchored Link Label for


label Form
Element
abbr Abbreviation Title in
legend
Fieldset
address A Physical Address Resource
link
Reference
area Area in Image Map
mark* Marked Rext
audio* Sound Content Measuremen
meter*
t Range
bm Bold text Navigation
nav*
Links
cite Short Citation Group of
optgroup Form
code Code Text Options
An Option in
del Deleted Text option a Drop-down
List
details* Details of an Element q Short Quote

dfn Defined Term small Small Print

Selectable
command* Command Button select
List
Media
source*
datalist* Drop-down List resource
Localized
span Style
em Emphasis Formatting
Strong
i Italic strong
Emphasis

iframe Inline sub-window sub Subscript

Details
img Image Embedding summary*
Header
input Input Field
sup Superscript
ins Inserted Text

kbd Keyboard Text tbody Table Body

td Table Data
var Variable
time* Date/Time
Hvad er et INVISIBLE element?
“There is also a third type of element in HTML - those that
aren't displayed at all. These tags are the ones that provide
information about the page but don't necessarily show up in
the visible portion of the page. For example: STYLE to
define styles and stylesheets, META to define meta data,
and HEAD to hold those elements.”
Inline Formatting is Different
from Block Formatting

 One of the most common mistakes a newcomer to Web


design makes is trying to set a width on an inline element.
This is because inline elements don't have widths. That is,
they do have widths, but the width is set by the container
box. Some other properties that inline elements ignore
include:
width and height
max-width and max-height
min-width and min-height

 Note: IE incorrectly applies some of these properties even


to inline boxes. But you shouldn't rely on that to remain, as
it's not standards compliant.
 So if you need to define the width or height that an element
should take up, you need to apply that to the block-level
element containing your inline text.
Changing the Type of an
Inline Element to Block and
Vice Versa
 With CSS you can change the type of an element from
inline to block or the reverse with just one CSS
property:
 display: block;
 display:inline;
 display:none;

 The CSS property display lets you change an inline


property to block or a block to inline or either of them to
not display at all.
When to Change the Display
Property
In general, I like to leave the display property alone, but
there are some cases where turning a block-level element
into an inline and vice versa can be useful.
 Horizontal list menus - Lists are block-level elements,
but if you want your menu to display horizontally, you
need to convert the list to an inline element, so that
newlines aren't added between each list item.
 Headers in the text - Sometimes you might want a
header to remain in the text, but have the HTML header
values. Changing the h1-h6 values to inline will let the
following text flow next to it.
 Removing the element - And of course, if you want to
remove the element completely from the document flow,
you can set the display to none.

You might also like