Chapter 17: HTML Content Tags and Styles
A Complete Frontend Developer Textbook for Beginners (2023 Edition)
This is the textbook version of Lesson 17 of 100 from the Udemy video course: A Complete Frontend Developer Course for Beginners
← Chapter 16: HTML Text Nodes in JavaScript
Overview
This lesson covers the following HTML tags, CSS properties, and JavaScript commands for the first time:
HTML
- span
- q
- blockquote
- b
- strong
- s
- mark
- u
- sup
- sub
- figure
- figcaption
- cite
- dl
- dt
- dd
- i
- em
- small
- address
- time
- hr
- br
- id (attribute)
- href (attribute)
CSS
- text-indent
- text-align
- text-align-last
- text-shadow
- text-emphasis
- text-decoration
- text-transform
- text-overflow
- text-orientation
- writing-mode
- white-space
- overflow-wrap
- float
- cursor
- :hover
JS
None.
This lesson begins with this Codepen. Code along with me to increase retention!
Lecture
In this lesson, we start by exploring the most common content tags and related CSS properties. Then, we explore the not-so-common content tags.
HTML Window:<html>
<head></head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>My goal is to simply expose you to some of the possibilities. For the complete list of all available tags and how to appropriately use them, check out this MDN article.
Let’s begin!
Common Content Tags and CSS Properties
The paragraph tag (p) is perfect for containing many related sentences together:
<html>
<head></head>
<body>
<header></header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</main>
<footer></footer>
</body>
</html>However, if we want to contain just a word or two, it may be better to use the span tag instead:
<html>
<head></head>
<body>
<header></header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<span>Hello World</span>
</main>
<footer></footer>
</body>
</html>What’s the difference between p and span?
p {
}span {
}Firstly, the p tag takes up the entire block as you can see:
p {
background-color: yellow;
}Whereas the span tag does not as you can see:
span {
background-color: pink;
}As we have learned in previous lessons, this is controlled by the display property.
For the p tag, the default is block:
p {
background-color: yellow;
display: block;
}Whereas for the span tag, the default is inline:
span {
background-color: pink;
display: inline;
}If we want, we can easily reverse the way they are displayed:
p {
background-color: yellow;
display: inline;
}span {
background-color: pink;
display: block;
}Ideally, we should use the right tag for the right purpose because search engines and screen readers expect certain tags to infer certain meanings.
p {
background-color: yellow;
display: block;
}span {
background-color: pink;
display: inline;
}As these two examples demonstrate, there are two types of content tags:
- block-level tags
- inline tags
As a block of text, it is possible to set a text-indent to 20px for example:
p {
background-color: yellow;
display: block;
text-indent: 20px;
}In the next lesson, we will learn a better unit to use for texts than
px!
As an inline text, text-indent of 20px does not work as you can see:
span {
background-color: pink;
display: inline;
text-indent: 20px;
}As such, inline tags such as
spanare generally used within block-level tags!
As a block of text, it is also possible to set a text-align to center for example:
p {
background-color: yellow;
display: block;
text-indent: 20px;
text-align: center;
}This affects every line.
Or, a text-align-last to right for example:
p {
background-color: yellow;
display: block;
text-indent: 20px;
line-height: 30px;
text-align: center;
text-align-last: right;
}This affects only the last line.
Another common set of block-level content tags are the heading tags, and there are 6 possible levels as we have learned in Lesson 6:
<html>
<head></head>
<body>
<header>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<span>Hello World</span>
</main>
<footer></footer>
</body>
</html>On any textNode:
h1 {}
We can give it a text-shadow. For example:
redfor the color2pxfor the offset in the x-direction3pxfor the offset in the y-direction- and
5pxfor the amount of blurring
h1 {
text-shadow: red 2px 3px 5px;
}On any textNode:
h2 {}
We can also give it a text-emphasis. For example:
bluefor the color- and
double-circlefor the style
h2 {
text-emphasis: blue double-circle;
}As you can see, text-emphasis lets us add accent marks.
On any textNode:
h3 {}
We can also change the writing-mode. For example, to vertical-rl:
h3 {
writing-mode: vertical-rl;
}Additionally, we can also change the text-orientation to upright for example:
h3 {
writing-mode: vertical-rl;
text-orientation: upright;
}If our content tag is too short, for example, a width of 30px:
h4 {
width: 30px;
}The overflowed text will automatically go to the next line. We can stop this with:
h4 {
width: 30px;
white-space: nowrap;
}As we have learned in previous lessons, we can also hide the overflowed text using:
h4 {
width: 30px;
white-space: nowrap;
overflow: hidden;
}In such cases when the overflow is hidden, we also have the option to add ellipsis using:
h4 {
width: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Moreover, if our content tag is too short, for example, a width of 30px:
h5 {
width: 30px;
}We also have the option to break up the word to make it fit using:
h5 {
width: 30px;
overflow-wrap: break-word;
}On any textNode, we can also use text-transform. For example, uppercase to capitalize every letter:
h6 {
text-transform: uppercase;
}Finally, let’s look at another very common content tag, the anchor inline tag:
<html>
<head></head>
<body>
<header>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<span>Hello World</span>
</main>
<footer>
<a></a>
</footer>
</body>
</html>With this tag, we can turn any text into a link:
<html>
<head></head>
<body>
<header>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<span>Hello World</span>
</main>
<footer>
<a>Link</a>
</footer>
</body>
</html>For example, let’s link it to MDN by setting the href to the address:
<html>
<head></head>
<body>
<header>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<span>Hello World</span>
</main>
<footer>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">Link</a>
</footer>
</body>
</html>As you can see, the plain text changed to a link. If we want, we can change these default styles.
For example, instead of the color purple, we can make it:
a {
color: green;
}The color property can be used to set any textNode’s color, and even other properties indirectly. The next lesson will cover this interesting property in detail!
We can underline it differently as well using text-decoration. For example:
line-throughfor the lineredfor the color- and
wavyfor the style
a {
color: green;
text-decoration: line-through red wavy;
}We can also change how the mouse pointer looks as it hovers over the link with another pseudo-class called :hover:
a:hover {
}We can then change the cursor to zoom-in for example:
a:hover {
cursor: zoom-in;
}Pseudo-classes are quite amazing so we will study them in great detail in Unit 3.
Lastly, instead of linking to another page, it is possible to link to any tag within the same page.
On the tag that we want to link to:
<html>
<head></head>
<body>
<header>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<span>Hello World</span>
</main>
<footer>
<a>Link</a>
</footer>
</body>
</html>First, we give it a unique ID:
<html>
<head></head>
<body>
<header>
<h1 id="">Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<span>Hello World</span>
</main>
<footer>
<a>Link</a>
</footer>
</body>
</html>For example: h1
<html>
<head></head>
<body>
<header>
<h1 id="h1">Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<span>Lorem ipsum</span>
</main>
<footer>
<a>Link</a>
</footer>
</body>
</html>Then, in the href, we simply write: #h1
<html>
<head></head>
<body>
<header>
<h1 id="h1">Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<span>Hello World</span>
</main>
<footer>
<a href="#h1">Link</a>
</footer>
</body>
</html>If we click the link, it will jump to that specific part of the page.
Formally,
#h1is called a fragment identifier. There are other cool things we can do with IDs which we will study in great detail in Unit 3.
The finished Codepen:
In the next lecture, we will cover the not-so-common content tags and more subsectioning tags in addition to section and nav that we learned in Lesson 6.
Not-So-Common Content Tags and Subsectioning Tags
Now let’s look at some not-so-common tags using Flat as a reference.
If we want to quote this text as an inline quotation:
Write music online, together.We can use the inline quote tag like this:
<html>
<head></head>
<body>
<header>
<q>Write music online, together.</q>
</header>
<main></main>
<footer></footer>
</body>
</html>We can also provide a reference with:
<html>
<head></head>
<body>
<header>
<q cite="https://flat.io">Write music online, together.</q>
</header>
<main></main>
<footer></footer>
</body>
</html>To emphasize the text’s importance, we can surround it with a strong inline tag:
<html>
<head></head>
<body>
<header>
<q cite="https://flat.io">
<strong>Write music online, together.</strong>
</q>
</header>
<main></main>
<footer></footer>
</body>
</html>If we want to quote this text as a block of quotation:
Flat is a collaborative music notation platform for beginner composers and professionals alike.We can use the blockquote tag like this:
<html>
<head></head>
<body>
<header>
<q cite="https://flat.io">
<strong>Write music online, together.</strong>
</q>
<blockquote>Flat is a collaborative music notation platform for beginner composers and professionals alike.</blockquote>
</header>
<main></main>
<footer></footer>
</body>
</html>Similarly, we can also provide a reference with:
<html>
<head></head>
<body>
<header>
<q cite="https://flat.io">
<strong>Write music online, together.</strong>
</q>
<blockquote cite="https://flat.io">Flat is a collaborative music notation platform for beginner composers and professionals alike.</blockquote>
</header>
<main></main>
<footer></footer>
</body>
</html>If we want to draw attention to the word Flat, we can surround it with the bold inline tag:
<html>
<head></head>
<body>
<header>
<q cite="https://flat.io">
<strong>Write music online, together.</strong>
</q>
<blockquote cite="https://flat.io">
<b>Flat</b>
is a collaborative music notation platform for beginner composers and professionals alike.
</blockquote>
</header>
<main></main>
<footer></footer>
</body>
</html>Ideally, to semantically draw attention, the
strongtag should be used instead of thebtag. To simply change the formatting to bold, the best practice is to do so via CSS using thefont-weightproperty (discussed in the next lesson).
If we want to cross out the word collaborative, we can surround it with the strikethrough inline tag:
<html>
<head></head>
<body>
<header>
<q cite="https://flat.io">
<strong>Write music online, together.</strong>
</q>
<blockquote cite="https://flat.io">
<b>Flat</b>
is a
<s>collaborative</s>
music notation platform for beginner composers and professionals alike.
</blockquote>
</header>
<main></main>
<footer></footer>
</body>
</html>If we want to highlight for beginner composers and professionals alike., we can surround it with the mark inline tag:
<html>
<head></head>
<body>
<header>
<q cite="https://flat.io">
<strong>Write music online, together.</strong>
</q>
<blockquote cite="https://flat.io">
<b>Flat</b>
is a
<s>collaborative</s>
music notation platform for
<mark>
beginner composers and professionals alike.
</mark>
</blockquote>
</header>
<main></main>
<footer></footer>
</body>
</html>If we want to underline alike, we can surround it with the underline inline tag:
<html>
<head></head>
<body>
<header>
<q cite="https://flat.io">
<strong>Write music online, together.</strong>
</q>
<blockquote cite="https://flat.io">
<b>Flat</b>
is a
<s>collaborative</s>
music notation platform for
<mark>
beginner composers and professionals
<u>alike.</u>
</mark>
</blockquote>
</header>
<main></main>
<footer></footer>
</body>
</html>And if we want to add a superscript for citation, we can use the superscript inline tag like this:
<html>
<head></head>
<body>
<header>
<q cite="https://flat.io">
<strong>Write music online, together.</strong>
</q>
<blockquote cite="https://flat.io">
<b>Flat</b>
is a
<s>collaborative</s>
music notation platform for
<mark>
beginner composers and professionals
<u>alike.</u>
</mark>
<sup>[1]</sup>
</blockquote>
<figure>
<img src="https://prod-site.flat-cdn.com/img/f42b25c.webp" height="170" />
<figcaption>
[1]
<cite>Flat.io</cite>
</figcaption>
</figure>
</header>
<main></main>
<footer></footer>
</body>
</html>As we have learned in Lesson 6, if we want to add an image:
We can use the img inline tag like this:
<html>
<head></head>
<body>
<header>
<q cite="https://flat.io">
<strong>Write music online, together.</strong>
</q>
<blockquote cite="https://flat.io">
<b>Flat</b>
is a
<s>collaborative</s>
music notation platform for
<mark>
beginner composers and professionals
<u>alike.</u>
</mark>
<sup>[1]</sup>
</blockquote>
<img src="https://prod-site.flat-cdn.com/img/f42b25c.webp" />
</header>
<main></main>
<footer></footer>
</body>
</html>For the src attribute, we specify the link to the image. To change the height of the image in pixels, for example, we can write:
<html>
<head></head>
<body>
<header>
<q cite="https://flat.io">
<strong>Write music online, together.</strong>
</q>
<blockquote cite="https://flat.io">
<b>Flat</b>
is a
<s>collaborative</s>
music notation platform for
<mark>
beginner composers and professionals
<u>alike.</u>
</mark>
<sup>[1]</sup>
</blockquote>
<img src="https://prod-site.flat-cdn.com/img/f42b25c.webp" height="170" />
</header>
<main></main>
<footer></footer>
</body>
</html>Remember, the
imgtag has no children. Therefore, it is self-closing.
To add a caption for this image, we can use the figure caption block-level tag like this:
<html>
<head></head>
<body>
<header>
<q cite="https://flat.io">
<strong>Write music online, together.</strong>
</q>
<blockquote cite="https://flat.io">
<b>Flat</b>
is a
<s>collaborative</s>
music notation platform for
<mark>
beginner composers and professionals
<u>alike.</u>
</mark>
<sup>[1]</sup>
</blockquote>
<img src="https://prod-site.flat-cdn.com/img/f42b25c.webp" height="170" />
<figcaption>
[1]
<cite>Flat.io</cite>
</figcaption>
</header>
<main></main>
<footer></footer>
</body>
</html>For example, the [1] textNode refers to the first citation, and a cite inline tag to reference
To show that the image and caption belong together, we can group them using the figure block-level tag:
<html>
<head></head>
<body>
<header>
<q cite="https://flat.io">
<strong>Write music online, together.</strong>
</q>
<blockquote cite="https://flat.io">
<b>Flat</b>
is a
<s>collaborative</s>
music notation platform for
<mark>
beginner composers and professionals
<u>alike.</u>
</mark>
<sup>[1]</sup>
</blockquote>
<figure>
<img src="https://prod-site.flat-cdn.com/img/f42b25c.webp" height="170" />
<figcaption>
[1]
<cite>Flat.io</cite>
</figcaption>
</figure>
</header>
<main></main>
<footer></footer>
</body>
</html>Like
nav, thefiguretag is also a subsectioning tag!
Again, we should use the appropriate tags around the appropriate texts as much as possible so that search engines and screen readers can understand our intent. Again, when tags are used in this way, they are known as semantic tags.
Let’s now explore some more tags inside the main section:
<html>
<head></head>
<body>
<header></header>
<main> </main>
<footer></footer>
</body>
</html>If we want to create a dictionary of terms and definitions, we can use the description list block-level tag:
<html>
<head></head>
<body>
<header></header>
<main>
<dl></dl>
</main>
<footer></footer>
</body>
</html>Then inside this tag, we can use the description term block-level tag for the term:
<html>
<head></head>
<body>
<header></header>
<main>
<dl>
<dt></dt>
</dl>
</main>
<footer></footer>
</body>
</html>And the description detail block-level tag for the definition:
<html>
<head></head>
<body>
<header></header>
<main>
<dl>
<dt></dt>
<dd></dd>
</dl>
</main>
<footer></footer>
</body>
</html>Since a
dltag groups together adttag and addtag, it is also another subsectioning tag!
For example, a musical note indicates a pitch and rhythmic value when written on a staff.
<html>
<head></head>
<body>
<header></header>
<main>
<dl>
<dt>Note</dt>
<dd>Indicates a pitch and rhythmic value when written on a staff.</dd>
</dl>
</main>
<footer></footer>
</body>
</html>What is a staff?
A staff consists of five horizontal lines that are evenly spaced.
<html>
<head></head>
<body>
<header></header>
<main>
<dl>
<dt>Note</dt>
<dd>Indicates a pitch and rhythmic value when written on a staff.</dd>
<dt>Staff</dt>
<dd>Consists of five horizontal lines that are evenly spaced.</dd>
</dl>
</main>
<footer></footer>
</body>
</html>To create a footnote, we can use the subscript inline tag. For example:
<html>
<head></head>
<body>
<header></header>
<main>
<dl>
<dt>Note</dt>
<dd>Indicates a pitch and rhythmic value when written on a staff.</dd>
<dt>
Staff
<sub>[a]</sub>
</dt>
<dd>Consists of five horizontal lines that are evenly spaced.</dd>
</dl>
</main>
<footer></footer>
</body>
</html>Then at the bottom, we can use horizontal line block-level tags to create a footnote section like this:
<html>
<head></head>
<body>
<header></header>
<main>
<dl>
<dt>Note</dt>
<dd>Indicates a pitch and rhythmic value when written on a staff.</dd>
<dt>
Staff
<sub>[a]</sub>
</dt>
<dd>Consists of five horizontal lines that are evenly spaced.</dd>
</dl>
<hr />
<hr />
</main>
<footer></footer>
</body>
</html>Like
img,hrhas no children and therefore is also self-closing.
For the footnote, we can use the small inline tag to write our footnote description:
<html>
<head></head>
<body>
<header></header>
<main>
<dl>
<dt>Note</dt>
<dd>Indicates a pitch and rhythmic value when written on a staff.</dd>
<dt>
Staff
<sub>[a]</sub>
</dt>
<dd>Consists of five horizontal lines that are evenly spaced.</dd>
</dl>
<hr />
<small>[a] The plural form of staff is staves.</small>
<hr />
</main>
<footer></footer>
</body>
</html>As you can see, the small inline tag is perfect for writing small print.
If we want to italicize staff, we can surround it with the italicize inline tag:
<html>
<head></head>
<body>
<header></header>
<main>
<dl>
<dt>Note</dt>
<dd>Indicates a pitch and rhythmic value when written on a staff.</dd>
<dt>
Staff
<sub>[a]</sub>
</dt>
<dd>Consists of five horizontal lines that are evenly spaced.</dd>
</dl>
<hr />
<small>
[a] The plural form of
<i>staff</i>
is staves.
</small>
<hr />
</main>
<footer></footer>
</body>
</html>And if we want to emphasize staves, we can surround it with the emphasize inline tag:
<html>
<head></head>
<body>
<header></header>
<main>
<dl>
<dt>Note</dt>
<dd>Indicates a pitch and rhythmic value when written on a staff.</dd>
<dt>
Staff
<sub>[a]</sub>
</dt>
<dd>Consists of five horizontal lines that are evenly spaced.</dd>
</dl>
<hr />
<small>
[a] The plural form of
<i>staff</i>
is
<em>staves.</em>
</small>
<hr />
</main>
<footer></footer>
</body>
</html>Likewise, to semantically emphasize a text, the
emtag should be used instead of theitag. To simply change the formatting to italic, the best practice is to do so via CSS using thefont-styleproperty (discussed in the next lesson).
Inside the footer, let’s learn a few more semantic tags:
<html>
<head></head>
<body>
<header></header>
<main></main>
<footer>
</footer>
</body>
</html>If we want to specify an address, we can use the address block-level tag. For example:
<html>
<head></head>
<body>
<header></header>
<main></main>
<footer>
<address>
hello@flat.io
</address>
</footer>
</body>
</html>Located in London, England:
<html>
<head></head>
<body>
<header></header>
<main></main>
<footer>
<address>
hello@flat.io
London, England
</address>
</footer>
</body>
</html>To make the location appear on the next line, we can use a break tag:
<html>
<head></head>
<body>
<header></header>
<main></main>
<footer>
<address>
hello@flat.io
<br />
London, England
</address>
</footer>
</body>
</html>Like
hr,brhas no children and therefore is also self-closing.
If we like, we can turn the email address into a link:
<html>
<head></head>
<body>
<header></header>
<main></main>
<footer>
<address>
<a>[email protected]</a>
<br />
London, England
</address>
</footer>
</body>
</html>And if we make the href equal to:
<html>
<head></head>
<body>
<header></header>
<main></main>
<footer>
<address>
<a href="mailto:[email protected]">[email protected]</a>
<br />
London, England
</address>
</footer>
</body>
</html>When a user clicks the link, it will open the user’s default email program.
Used in this way, this
addresstag is another example of a subsectioning tag!
To add a copyright notice, we can also take advantage of the small inline tag. For example:
<html>
<head></head>
<body>
<header></header>
<main></main>
<footer>
<address>
<a href="mailto:[email protected]">[email protected]</a>
<br />
London, England
</address>
<small>
© 2021
<br />
Last edited on
<time>9/7/21</time>
</small>
</footer>
</body>
</html>© is another special character written as a HTML character code. HTML character codes always start with & and end with ;
We can write the date inside a time inline tag.
If we want to make the address appear on the right side:
address {
}We can use:
address {
float: right;
}Notice how this makes the small tag and the address tag appear on the same line. In other words, the float property has changed the address into an inline tag too!
Although the
smalltag is used like a subsectioning tag here, it is not one. As you have witnessed over and over, content tags generally contain other inline tags.
The finished Codepen:
To recap, whenever possible, we should use semantic tags around as much of our content as appropriate so that screen readers and search engines understand the meaning of our content.
Summary
Let’s summarize what we have learned using MDN.
Semantic Tags
In this lesson, we explored both common and not-so-common semantic tags. Let’s begin with the most common:
The p tags for writing blocks of paragraph texts:
The span tags for writing inline texts:
h1 through h6 block-level tags for writing section headings:
And the a inline tags for adding links to texts:
We also showed how to use the a inline tags to link to different parts of the same document using the id attributes:
Some not-so-common semantic tags are:
The blockquote tags for creating blocks of quotations:
The q tags for creating inline quotations:
The strong inline tags for showing semantic importance:
The b inline tags for drawing attention:
The s inline tags to strike through texts:
The mark inline tags to highlight texts:
The u inline tags to underline texts:
The sup inline tags to write superscripts:
The sub inline tags to write subscripts:
The img inline tags to add images:
The figcaption block-level tags to add captions to our images:
The cite inline tags to add citations:
The figure subsectioning tags to group and relate the img tags and figcaption tags together:
The dl subsectioning tags to create description lists:
Consisting of dt block-level tags for the terms:
And dd block-level tags for the details:
The hr block-level tags to create horizontal lines:
The small inline tags to write small prints:
The em inline tags to semantically emphasize texts:
The i inline tags to italicize texts:
The address subsectioning tags to enclose the contact informations:
The br tags to create line breaks:
And finally the time inline tags to specify the date and/or time:
To summarize, the best practice is to use semantic tags around all the plain texts we write so that screen readers and search engines can understand the meaning of our content.
CSS Properties
For all our textNodes, CSS lets us control a variety of styles.
With text-indent, we can set the amount of indentation:
With text-align, we can set the horizontal alignment of the text:
With text-align-last, we can set the horizontal alignment of just the last line of the text:
With text-shadow, we can add shadows to texts:
With text-emphasis, we can create accent marks:
With writing-mode, we can set how lines of texts are laid out:
When the writing-mode is set to vertical (vertical-rl or vertical-lr), we can also control the orientation of the text characters:
With white-space, we can set how white spaces are handled:
With text-overflow, we can set how the overflowed text is displayed:
With overflow-wrap, we can even break up words to fit the parent:
With text-transform, we can specify how to capitalize the text:
With text-decoration, we can underline texts and set its appearance:
With float, we can place an element to the left or right, and force other inline elements to wrap around it:
With cursor, with can set the type of mouse cursor to show when hovering over an element:
Finally, with the pseudo-class :hover, we can create a special CSS selector that matches when the mouse hovers over an element:
Again, we will explore many more pseudo-classes in Unit 3!
Concept Quiz
Take my Programming Concept Quiz to check your understanding! For every correct choice, you will earn SW Coins which you can redeem for coupons towards the purchase of any of my Udemy courses!
Sample Quiz Questions for Lesson 17:
Question 1:
Which tag takes up the entire block?
pspan
Question 2:
text-indent only works on blocks of texts?
- True
- False
Question 3:
Which CSS property controls the horizontal alignment of just the last line of texts:
- text-align
- text-align-last
Question 4:
Which section heading is the smallest?
h1h2h3h4h5h6
Question 5:
Which CSS property lets us create accent marks?
- text-shadow
- text-emphasis
Question 6:
To change the text-orientation, the writing-mode must be:
- horizontal
- vertical
Question 7:
If the parent element is too short, which CSS property lets us break up the words to fit the parent?
- white-space
- overflow-wrap
Question 8:
To use text-overflow, the overflow must first be set to:
visiblehidden
Question 9:
Which value of text-transform will capitalize every letter:
uppercaselowercasecapitalize
Question 10:
Which CSS property lets us underline texts?
- text-decoration
- float
Question 11:
Which pseudo-class selects an element when the mouse cursor hovers over it?
:hover- cursor
Question 12:
Which attribute lets us link to a different part of the same document?
- href
- id
Question 13:
Which tag lets us add inline quotations?
blockquoteq
Question 14:
Which tag gives semantic importance?
bstrong
Question 15:
Which tag is used to strikethrough texts?
marksu
Question 16:
Which tag is used to underline texts?
marksu
Question 17:
Which tag is used to highlight texts?
marksu
Question 18:
Which tag is used to write subscripts?
supsub
Question 19:
The figure tag can be used to group the following tags EXCEPT:
imgfigcaptionmaincite
Question 20:
The dl tag is NOT used to group:
dthrdd
Question 21:
Which tag creates horizontal lines?
brhr
Question 22:
Which tag is used to write small prints?
emsmall
Question 23:
Which tag is used to semantically emphasize texts?
emi
Question 24:
Which tag is used to write contact informations?
addresstime
Question 25:
Which tag is used to write the date or time?
addresstime
Question 26:
Which tag is NOT a subsectioning tag:
figuredldtaddress
Question 27:
We should avoid using semantic tags as much as possible.
- True
- False
Question 28:
Search engines and screen readers depend on semantic tags.
- True
- False
→ Programming Concept Quiz for Chapter 17
Coding Exercises
Check out my Interactive Coding Exercises to put to practice what you have learned! There, you will also find interactive hints to help you understand each line of code. Likewise, for every correct solution, you will earn SW Coins which you can redeem for coupons towards the purchase of any of my Udemy courses!
→ Interactive Coding Exercises for Chapter 17
Syntax Flashcards
Review what you have learned by playing my Syntax Flashcard Game! These flashcards are designed to help you commit to memory all the new code syntaxes you learned in this lesson. Likewise, for every correct answer, you will earn SW Coins which you can redeem for coupons towards the purchase of any of my Udemy courses!
→ Syntax Flashcard Game for Chapter 17
Next Steps
Congrats on completing Unit 2: Lesson 12 of 13! 🎉
Unit 1: 100% Completed
Unit 2: 92% Completed
Unit 3: 0% Completed
Unit 4: 0% Completed
Unit 5: 0% Completed
Bonus Unit 6: 0% Completed
Bonus Unit 7: 0% CompletedOverall Progress: 17% Completed→ Join Remote Frontend Cohort Program
Next Lesson
In this lesson, we finally learned how to add real content to our page layout. In the next lesson, we will learn how to manipulate the overall font and color of all our text contents! Get ready to see the awesome culmination of all your hard work until now in the final lesson of this Unit! 😎
→ Chapter 18: CSS Web Fonts and Colors
When you use my referral link above 👆 to become a Medium member, all proceeds will be donated towards the construction of the Silicon Wat Campus for children in Ukraine and Cambodia ❤️