Lesson 7

HTML Text

0

When you write HTML code, you write text. But what is usually displayed in the browser is also text.

Although images, videos, and music have grown in popularity, websites still mostly comprise text content, such as this particular paragraph you are currently reading.

Paragraphs

Paragraphs <p> are the most used HTML element, as they act as the default block-level element and are quick to write.

Lists

Lists come in 3 variations:

  • <ul> are unordered lists

  • <ol> are ordered lists (whose items are automatically numbered)

  • <dl> are definition lists

HTML lists require a specific structure:

  • <ul> and <ol> must include and be direct parents of <li> which stands for list items.

  • consequently, <li> elements can not be used on their own, and must be direct children of either a <ul> or a <ol>.

Unordered lists

They are the most commonly used types of lists. They are meant to group together a list of individual items, in no particular order.

List items are displayed with bullet points.

Result:

My shopping list:

  • Milk

  • Bread

  • Chocolate

  • More chocolate

Ordered lists

Ordered lists are used when the order of its items is relevant.

Ordered lists are automatically numbered by the browser. You don’t need to include the numbers in your HTML.

Definition lists

Definition lists are for items that come in pairs. They must include pairs of <dt> definition terms and <dd> definition descriptions as direct children.

Result:

WebThe part of the Internet that contains websites and webpagesHTMLA markup language for creating webpagesCSSA technology to make HTML look better

Definition lists are rarely used because their use cases are very specific, and only happen when the key changes every time. Tables with 2 columns are the more popular alternative.

Blockquotes

Blockquotes are used to identify a citation.

Result:

Sir Tim Berners-Lee said:

“The original idea of the web was that it should be a collaborative space where you can communicate through sharing information.”

Headings

There are 6 levels of headings available, ranging from <h1> to <h6>, 1 being the most important one.

Headings are meant to be used along with paragraphs and lists, to draw a natural structure to your document. As headings carry more semantic weight, be careful to keep the balance between important and “normal” content.

Only using headings in a HTML document wouldn’t make sense: if everything feels important, nothing really is. You need to provide depth in your structure.

HTML Basics by Jeremy Thomas is licensed under CC BY-NC-SA 4.0

Comments

icon

Be the first to comment!