https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

Mozilla Block Level Elements

HTML: Marks the different parts of a document; no control over how it is displayed in a browser
CSS: Determines how the document will be displayed in a browser
Render: The process of a browser applying CSS to the HTML elements; how the document looks in the browser
The browser needs a style sheet specifying the appearance of each page element

tags: each element in an HTML page is marked by one or more tags

Semantic HTML Element

Semantic elements are elements with a meaning.
PDF of Semantic elements

A semantic element clearly describes its meaning to both the browser and the developer.
  • Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
  • Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.

Comments: <!-- this is a comment -->

Block Level: starts on a new line; takes up full width; think paragraph

Inline Level or Text-Level: starts within a block; takes up only the amount needed; Example: underlining a book title
Text-level elements should always be nested within grouping elements such as paragraphs or headings.

Two sided tag: contains opening tag, element content, followed by closing tag. Page 8. Example: <p>this is a paragraph</p>

One sided tag: element that does not enclose content, or an empty element. Page 8. Example: <br />

Elements: Represent distinct items in the Web page; example: paragraph, page heading, page footer, etc.

Element Attribute: Specifies use of an element; provides information to the browser about the properties of an element. Example: <p id="opening">Welcome</p>
Each attribute has one of more values; in the example above, the attribute is "id", the value is "opening"
Each element can have an ID attribute, but its value must be unique throughout the web page

Head Element

Two sided tag
<head>
Content goes here
</head>

Body Element

Two sided tag
<body>
Content goes here
</body>

HTML element

Two sided tag
<html>
Content goes here
</html>

Properly nested minimal HTML document

<html>
<!-- this is comment for a minimal html document -->
<head>
<title>This is a title</title>
</head>
<body>
</body>
</html>

Previous Structural Elements

div
used to indentify different page divisions
To desiginate a "header" section with non-HTML5 documents, use:
<div id="idName">
 content
</div >

HTML5 Structural Elements, page 18


Marking Structural Elements in HTML5, page 19

Grouping Elements, page 26

Elements that contain content viewed as a distinct block within the Web page. Each grouping element starts their content on a new line.

Grouping Element
Description
address
Contact information
blockquote
An extended quotation
dd
Definition from description list
div
Generic grouping element
dl
Description list
dt
Definition term from definition list
figure
Figure or illustration
figcaption
Caption of a figure
hgroup
Indiates with is main heading and which are sub-headings
hn
Heading, h1 through h6
li
List item; from ordered or unordered list
ol
Ordered list, follows defined sequential order
p
Paragraph
pre
Preformatted text
ul
Unordered list

hgroup Grouping Headings, page 30
Allows the designer to indicate which headings are associated with other headers
<hgroup>
<h1>The J-Prop Shop<h1>
<h2>Quality Props<h2>
</hgroup>

Ordered lists, page 35

Used for lists that follow a sequential order; smallest to greatest, oldest to youngest. Each item is marked with the li, list item, tag:
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>

Unordered lists, page 36

Used for lists that have no specific order
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>

Description lists, page 36

Contains a list of terms, each with a description
<dl>
<dt>term 1</dt>
<dd>description 1<dd>
</dl>

HTML5 Text-level Elements, page 45

Content is marked within a grouping element. Text-level elements flow alongisde of, or inline with the rest of the characters in the group element

Text-Level Element
Description
Example
a
A hypertext link
<a href="file.html" alt="Example linked file">Text displayed for user</a>
abbr
An abbreviation
b
Text offset; usually displayed in boldface font
<p>content<>bolded content</b>
cite
A citation
code
Program Code
<p><code> text from a computer</code></p>
del
Deleted code; usually displayed with strikethrough
dfn
A definition term
em
Emphasized content
i
Text representing an alternate voice or mood
ins
Inserted text
kbd
Keyboard text
mark
Highlighted or marked text
q
Quoted text
samp
Sample computer code
small
Text displayed in smaller font
span
A span of generic text
strong
Strongly emphasized content
sub
Subscripted text
sup
Superscripted text
time
A date and time value
var
Programming values

Generic Elements, div and span, page 48

div is a generic element with no assigned meaning (block level)
example: <div>content<div>
span is a generic marking element (inline or text-level)
example: <div><span>content</span><div>

Line Break, page 51

<br />
Use br to mark a line break

Horizontal Rule, page 51

<hr />
hr marks a major topic change in a section.

Inline Image, page 52

Inserting an inline image; use the img element

<img src="example.jpg" alt="Example Picture" width="200" height="200" />

Character sets, page 54

Most commonly used character set on the Web is UTF-8; compressed version of Unicode, and likely the default set used by your browser.

Sections and Articles

Picture example showing relationship between sections and articles. For example, each story could be enclosed in an article.
Structuring HTML5

Return to WebDesign Main Section