Select Lesson
Linking Files Quiz
5 min
Review Quiz
5 min
Line break and paragraph tags —br
, p
5 min
Thematic break (Horizontal rule) —hr
5 min
Creating lists in HTML —ol
, ul
, li
1 min
Unordered lists —ul
, li
2 min
Ordered lists —ol
, li
2 min
Metadata —meta
, name=
, content=
5 min
Meta name=
value —description
5 min
Meta name=
value —viewport
5 min
Meta attribute —charset=
5 min
Lesson 8. Formatted lists and paragraphs
15 min
Lists Quiz
5 min
Linking Files Quiz
5 min
Review Quiz
5 min
Line break and paragraph tags —br
, p
5 min
Thematic break (Horizontal rule) —hr
5 min
Creating lists in HTML —ol
, ul
, li
1 min
Unordered lists —ul
, li
2 min
Ordered lists —ol
, li
2 min
Metadata —meta
, name=
, content=
5 min
Meta name=
value —description
5 min
Meta name=
value —viewport
5 min
Meta attribute —charset=
5 min
Lesson 8. Formatted lists and paragraphs
15 min
Lists Quiz
5 min
60 min
Lists and meta tags
List tags make bullet points or numbers to organize information. Meta tags give the page additional information.
Code Avengers Quiz
Linking Files Quiz
Code Avengers Quiz
Review Quiz
Concepts
Line break and paragraph tags —br
, p
Paragraph, <p>
, and line break, <br>
, tags are probably the tags you will use the most frequently.
Paragraph elements, <p> </p>
, have a start tag and an optional end tag.
It is optional because often the thing after a paragraph is either another paragraph or the start of a new section, so the browser can assume the end of the paragraph.
Read W3's reference for more specifics on the optional /p tag →
A paragraph used to display a distinct section of a piece of writing, usually dealing with a single theme. The default style will add a space to separate from the line above. When you begin to talk about something slightly new you will usually strat a new paragraph.
Line break elements, br
, are self closing (empty) tags. They stop all your text from being on one line and are used to make your text more easily read.
Concepts
Thematic break (Horizontal rule) —hr
One of the big shifts from the previous version of HTML to HTML5 was the decision that all tags should have a
semantic
purpose.
You will learn more about that later when you look at structural tags →
This matters here because the tag to add a horizontal line element, hr
, is now called a "thematic break" and instead just adding it in because a line could look cool it should be used for a paragraph-level thematic break in text.
When to use a thematic breaks
Use a hr>
to visually separate different topics inside a section of text, to separate a list of poems or between scenes in a novel.
You could actually use it anywhere you can use a <p>
, thematically speaking.
The default style of hr
is pretty boring:
But we can change it by adding CSS (We will cover CSS later)
Here is what the code looks like to add your own image to hr
, for those who know some CSS.
Concepts
Creating lists in HTML —ol
, ul
, li
Lists are used to group related pieces of information together and help to clearly associate elements with each other and make things easier to read.
In modern web development lists are frequently used for navigating around the website with menus, as well as bullet points in general content.
Two of the list types:
- Unordered list – used to group a set of related items, in no particular order.
- Ordered list – used to group a set of related items, in a specific order.
Concepts
Unordered lists —ul
, li
Unordered lists, or bulleted lists, are used when a set of items can be placed in any order. An example is a shopping list:
- milk
- bread
- butter
- coffee beans
These items are all part of one list, however, you could put the items in any order and the list would still make sense.
Unordered lists use one set of <ul></ul>
tags, wrapped around many sets of<li></li>
:
Example:
<ul>
<li>bread<!--optional</li>-->
<li>coffee beans<!--optional</li>-->
<li>milk<!--optional</li>-->
<li>butter<!--optional</li>-->
</ul>
Concepts
Ordered lists —ol
, li
Ordered lists, or numbered lists, are used to display a list of items that need to be placed in a specific order. An example would be cooking instructions, which must be completed in order for the recipe to work:
- Gather ingredients
- Mix ingredients together
- Place ingredients in a baking dish
- Bake in oven for an hour
- Remove from oven
- Allow to stand for ten minutes
- Serve
If the list items were moved around into a different order, the information would no longer make sense.
Ordered lists use one set of <ol></ol>
tags, wrapped around many sets of <li></li>
:
NOTE: </li>
is an optional tag and so it should be left off.
Example:
<ol>
<li>Gather ingredients<!--optional</li>-->
<li>Mix ingredients together<!--optional</li>-->
<li>Place ingredients in a baking dish<!--optional</li>-->
<li>Bake in oven for an hour<!--optional</li>-->
<li>Remove from oven<!--optional</li>-->
<li>Allow to stand for ten minutes<!--optional</li>-->
<li>Serve<!--optional</li>-->
</ol>
Concepts
Metadata —meta
, name=
, content=
Metadata, <meta>
, tags provide invisible/hidden information about the web page, which can be used by search engines to help categorize the page correctly or browser to show the page correctly. They are put in the head section of the HTML code after the title tag.
The meta
tag is a self closing.
Heads up:
Meta means being self aware or self referencing, being aware of ones' self from an outside perspective or having a higher level of thinking. movie characters that talk about being in a movie, or show thinking outside of the movie, are meta. For example: "This is Tom Hanks saying if you see me in person, please, leave me be."-Quote from the credits of the Simpson's Movie (2007).
Here, the cartoon celebrity is talking to the real audience about the real celebrity, referencing the the world outside of the film.
Other examples include: When a meeting, time spent discussing the meeting itself rather than the topic. Writing a book on how to write books. This resource telling teachers how to use these lesson plans is meta.
Meta as a prefix can be thought of as one level of abstraction higher: metadata is data about the main data.
If we're talking about websites, the data is the webpage itself, and metadata is extra information about the web data, such as what the page is about, who is the author, what screen size is the web-page being viewed on, what special characters does the page use?etc
Almost all of meta tags have a name attribute and content attribute.
The name attribute: gives the type of information (think of it as adding a category like Color, Name, Job before the content. It labels the information after it), the content attribute: contains the information.
Example:
name ="Job" Content="Programmer."
(Note: This is not a real name value.)
name ="Color" Content = "The colors used are Red, Black and White."}
(Note: This is not a real name value.)
name = "description" content=" This webpage give notes on concepts taught with CodeAvengers HTML CSS course 1."
(Note: Is a real name value)
It is there for the search engines.
Concepts
Meta name=
value —description
This attribute provides a concise explanation of a Web page's content and is often shown in search results when people find your site with a search engine. (See picture above)
A meta tag which has the name set to description will have content set to a short explanation of what the page contains.
<meta name="description" content="This pages is about...">
Concepts
Meta name=
value —viewport
This attribute helps to make your page look better on all the different shapes and sizes of mobile phones.
<meta name="viewport" content="width=device-width">
Concepts
Meta attribute —charset=
Charset sets the character
encoding
for the web.
(Basically it is linking your page to a symbol/number/letter chart.)
Check out a character reference set here →.
In Word or Google Docs you can actually access a chart by going insert-> symbols or special character.
On our webpage it will make the user's browser show symbols it otherwise might not know like ♠ (♠
)
Notice: apostrophe can look like ' ′ or ’ depending on the chart.
The code is: <meta charset="utf-8">
.
HTML/CSS 1 Lesson
Lesson 8. Formatted lists and paragraphs
Code Avengers Quiz
Lists Quiz
Resources
Guide
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F