HTML Elements Review 2
Now you've learned about many more HTML elements! This page is a summary
of all the elements you've seen so far. You can use this page as a reference if
you forget how to use one of these elements in your code.
Block Elements
Block elements are used for large sections of text, such as paragraphs, headlines, or lists; and also
for some other features such as video players and tables.
A block element creates a (usually invisible) box in the browser display. By default, this box takes
up the full width of the display. The beginning of a block always starts on a new line in the display.
Most block elements have a particular way they are displayed by default: paragraphs have margins
around them; lists have bullet-points or numbered items; headlines are printed in large text. There
is also a generic block element, div, which has no special defaults.
● <p> — Paragraph.
Text in a paragraph is separated visually from other paragraphs by a small margin.
● <ul> a
nd <
ol> — Unordered and ordered lists.
By default, <ul> l ists are displayed with bullet points, and <ol> l ists with numbered items.
● <li> — List items inside a <
ul> o
r <
ol> l ist.
The <
li> e
lement has to be nested inside a <
ul> or <
ol> l ist; it can't occur on its own.
● Section headers, from <
h1> ( largest) to <
h6> ( smallest).
Used for headlines, section titles, and the like.
● <div> —
A logical division of a page or document.
Other block elements such as paragraphs, lists, and headers can be nested inside a <
div>.
You will see the <div> element much more in the next lesson. Because they don't have any
default display settings, divs are heavily used with custom styling with CSS.
version 1.0
Inline Elements
Inline elements do not create a full-width box on the display. They modify the display of text, or
insert other things into the text — such as line breaks, images, or hyperlinks.
● <em> a
nd <strong> — Emphasis.
By default, text inside <
em> is displayed as i talic, and text in <
strong> is displayed as
boldface.
● <p> — Paragraph.
Text in a paragraph is separated visually from other paragraphs by a small margin.
● <br> — Line break. (empty)
A line break does not create a new paragraph; it only marks the end of a line.
● <sub> and <sup> — Superscript and subscript.
Useful for math and chemistry: I have x3+2x2 molecules of H2O.
● <mark> — Highlighting.
Not very often used, but it's kind of cool.
Some of the inline elements you've seen require attributes, extra information besides the name of
the element itself. Attributes are written inside the opening tag of the element.
● <img> — Images.
Needs a src attribute with a URL, and an a
lt attribute with descriptive text.
● <a> — Hyperlinks.
Needs an h
ref attribute with a URL.
Images
The syntax for the img tag is like this:
<img src="Image URL here" alt="A description of the image">
The URL of an image may be an a bsolute URL, such as h
ttp://placebear.com/800/600, or it
may be a relative URL such as i
mages/wolves.jpg.
version 1.0
The alt text is used if the image can't be loaded, or if the user can't see images — such as if the
user is using a s creen reader.
Links
Hyperlinks allow the user to navigate from one page to another. They are created using the a
element. The destination of the link is written in an attribute called href; the link text appears as
the contents of the a
element. Here's an example:
<a href="https://en.wikipedia.org/wiki/Hypertext">
Wikipedia's "Hypertext" article
</a>
This code produces a link like this: Wikipedia's "Hypertext" article.
A link within a single web site can be written using a relative URL. Links to other sites must be
written as absolute URLs.
version 1.0
