HTML5 & CSS3

Text Content Elements

Server hosted by: Luka Utevski - lukapravivlogovi@gmail.com

logo

© 2024/2025 Qinshift Academy

Lesson overview

  • Structural and semantic markup
  • HTML headings and paragraphs
  • Ordered and unordered list
  • Quotations
  • Other text elements
  • Escape/Special characters

Introduction

  • Despite the popularity of multimedia rich websites, text remains as one of the main parts of the Web
  • Documents are mostly based on text, and so is the Web
  • In this lesson, we will explore and learn HTML text formatting and text layout tags
  • Most importantly, you will learn how to use text formatting standards

Markup

  • Structural markup: the elements we use to set up the structure of a page; ex. elements like section, header, footer, headings, etc...
  • Semantic markup: the elements we use to provide any extra information with semantic value; ex. where emphasis is placed in a sentence, that something you have written is a quotation (and who said it), the meaning of acronyms, etc...

Structural markup

Headings

HTML has six "levels" of headings, with <h1> being the highest section level and <h6> being the lowest.

  • <h1> - used for main headings
  • <h2> - used for subheadings
  • <h3>
  • <h4>
  • <h5>
  • <h6>

Headings


<h1>This is a Main Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>

Headings

You should only use one <h1> per page. Using more than one will not result in an error, but using only one is seen as a best practice. It makes logical sense — <h1> is the most important heading, and tells you what the purpose of the overall page is.

Having a single top-level title is also arguably better for screenreader users, and SEO.

Paragraphs

To create a paragraph, surround the words/sentences that make up the paragraph with an opening <p> tag and closing </p> tag.

By default, a browser will show each paragraph on a new line with some space between it and any subsequent paragraphs.

Paragraphs


<p>A paragraph consists of one or more sentences that form
a self-contained unit of discourse. The start of a paragraph
is indicated by a new line.</p>

<p>Text is easier to understand when it is split up into units of text.
For example, a book may have chapters. Chapters can have subheadings.
Under each heading there will be one or more paragraphs.</p>

Lists

There are lots of occasions when we need to use lists. HTML provides us with 3 different types:

  • Ordered lists
  • Unordered lists
  • Description lists - Before HTML5 they were called Definition Lists

Lists

  • Ordered lists: are lists where each item in the list is numbered. For example, the list might be a set of steps for a recipe that must be performed in order, or a legal contract where each point needs to be identified by a section number.
  • Unordered lists: are lists that begin with a bullet point (rather than characters that indicate order).
  • Description lists: are made up of a set of terms along with the descriptions for each of those terms. (a list of key-value pairs)

Ordered lists

  • The ordered list is created with the <ol> element.
  • Each item in the list is placed between an opening <li> tag and a closing </li> tag. (The li stands for list item.)
  • Browsers indent lists by default

Ordered list


<ol>
	<li>List Item 01</li>
	<li>List Item 02</li>
	<li>List Item 03</li>
	<li>List Item 04</li>
	<li>List Item 05</li>
</ol>

Unordered lists

  • The unordered list is created with the <ul> element.
  • Each item in the list is placed between an opening <li> tag and a closing </li> tag. (The li stands for list item.)
  • Browsers indent lists by default

Unordered list


<ul>
	<li>List Item 01</li>
	<li>List Item 02</li>
	<li>List Item 03</li>
	<li>List Item 04</li>
	<li>List Item 05</li>
</ul>

Description lists

  • The description list is created with the <dl> element and usually consists of a series of terms and their descriptions.
  • Inside the <dl> element you will usually see pairs of <dt> and <dd> elements.
  • <dt> is used to contain the term being described.
  • <dd> is used to contain the description.

Description list


<dl>
	<dt>Sashimi</dt>
	<dd>Sliced raw fish that is served with condiments such as 
	shredded daikon radish or ginger root, wasabi and soy sauce</dd>
	<dt>Scale</dt>
	<dd>A device used to accurately measure 
	the weight of ingredients</dd>
</dl>

Nested lists

  • You can put a second list inside a <li> element to create a sublist or nested list.


<ul>
  <li>List Item 01</li>
  <li>List Item 02</li>
  <li>
	<ul>
	  <li>Sublist Item 01</li>
	  <li>Sublist Item 02</li>
	</ul>
  </li>
</ul>

Inline text formatting elements

  • <b>Bold</b> - Bold
  • <i>Italic</i> - Italic
  • <u>Underline</u> - Underline
  • <sup>superscript</sup> Content - superscriptContent
  • <sub>subscript</sub> Content - subscriptContent

*You can use their CSS alternatives for styling the text

Line Breaks & Horizontal Rules

<br />

  • As you have already seen, the browser will automatically show each new paragraph or heading on a new line. But if you wanted to add a line break inside the middle of a paragraph you can use the line break tag <br />

<hr />

  • To create a break between themes — such as a change of topic in a book or a new scene in a play — you can add a horizontal rule between sections using the <hr />

Self-closing tags

<br /> and <hr /> are what is called a self-closing tags

In HTML5 writing self-closing tags without the forward slash "/" is valid

<br /> and <br> are the same thing for the browsers in HTML5

There are more self-closing tags that we'll learn later on

White Space

In order to make code easier to read, web developers often add extra spaces or start some elements on new lines.

When the browser comes across two or more spaces next to each other, it only displays one space.

Similarly if it comes across a line break, it treats that as a single space too. This is known as white space collapsing.

White space (2)


<p>The moon is drifting away from Earth.</p>
<p>The moon            is drifting away from Earth.</p>
<p>The moon is drifting away from

Earth.</p>

The moon is drifting away from Earth.

The moon is drifting away from Earth.

The moon is drifting away from Earth.

Semantic markup

Strong & Emphasis

<strong>Strong</strong>

  • The use of the <strong> element indicates that its content has strong importance.
  • By default, browsers will show the contents of a <strong> element in bold.

<em>Emphasis</em>

  • The <em> element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

Quotations

There are two elements commonly used for quotations:

<blockquote>Blockquote</blockquote>

  • The <blockquote> element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation

<q>Quote</q>

  • The <q> element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks.

Quotations (2)

The <blockquote> tag has an optional attribute ‘cite’ that can be used for sources by entering the URL in the attribute.


<blockquote cite="http://en.wikipedia.org/wiki/Winnie-the-Pooh">
	<p>Did you ever stop to think, and forget to start again?</p>
</blockquote>

Abbreviations & Acronyms

<abbr>

If you use an abbreviation or an acronym, then the <abbr> element can be used.

A title attribute on the opening tag is used to specify the full term.


<p><abbr title="Professor">Prof</abbr> Stephen Hawking is 
a theoretical physicist and cosmologist.</p>

<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> 
do some crazy stuff.</p>

Side-Comments or Small Print

<small>

The <small> element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller


<p><small>All rights reserved. SEDC 2020</small></p>

Changes to Content

These elements let you provide indications that specific parts of the text have been altered.

  • <ins>Inserted text</ins> - Inserted text
  • <del>Deleted text</del> - Deleted text

Escape Characters

There are some characters that are used in and reserved by HTML code. (For example, the left and right angled brackets)

Therefore, if you want these characters to appear on your page you need to use what are termed "escape" characters (also known as escape codes or entity references)

https://dev.w3.org/html5/html-author/charref

http://www.htmlandcssbook.com/extras/html-escape-codes/

Homework #1

Title: Working with multi-level nested HTML lists

Description: Create list having up to 5-level of nested child lists. Try different text formating tags on the list items.

Example 3-level list: https://i.stack.imgur.com/bjuI6.png

Thank you!

Questions?