Preview
Video Player
00:00
00:00
HTML Headings and Paragraphs
8:07Uncover the power of fundamental HTML elements like headings and paragraphs. Witness the visual impact of heading tags from h1 to h6 and discover the importance of paragraph tags.
You've discovered that HTML
provides structure and
0:00
significance on the content
through tags known as mockup.
0:03
When you write mockup,
0:08
you're essentially instructing the browser
on how to present your content.
0:09
Remember the appearance of the page
before we incorporated any mockup.
0:14
It was just a single
continuous line of text.
0:18
Clearly, that didn't offer
a pleasant reading experience.
0:22
Structuring content with HTML
organizes your content and
0:26
makes the users reading experience
easier and more enjoyable.
0:30
Books, magazines, and
0:35
newspapers organize text using titles,
headings, and paragraphs.
0:37
HTML offers similar element
structuring content.
0:43
The most common elements used to structure
content are headings and paragraphs.
0:46
The h1 tag represents a heading element
with the 1 indicating it's a level 1
0:53
heading, the main or
most important heading on the page.
0:58
However, h1 is just one among
several heading elements available.
1:02
HTML provides six heading elements,
h1 through h6.
1:08
Each indicates a distinct section of
content and represents a different
1:13
level of importance on the page, with h1
being the highest level and h6 the lowest.
1:18
Paragraphs in HTML
are created using the p tag.
1:25
Any text enclosed within p tags will
appear on the webpage as a paragraph.
1:29
It's crucial to note that the p tag is
designed for individual paragraphs and
1:35
isn't meant to contain
multiple paragraphs.
1:40
Therefore, if you have multiple
paragraphs of text, use a new p tag for
1:44
each paragraph.
1:49
The website we're about to create is
our recipe book and we want the text,
1:51
My Recipe Book,
to serve as a main heading.
1:56
To achieve this, we'll wrap the text
with an opening and closing h1 tags.
1:59
I'll cut the closing h1 tag using
the keyboard shortcut Command+ X and
2:06
then paste it at the end of
the text with Command+ V.
2:12
Typically, the initial heading
on a web page is an h1.
2:16
It's like the main headline in
a newspaper or magazine article.
2:21
When you save the HTML file and
refresh the browser,
2:25
you'll notice My Recipe Book
displayed in large bold letters with
2:29
the text outside the h1 element
appearing below the heading.
2:33
Now that we've set the main heading,
let's refer to our mockup and
2:39
incorporate all the necessary heading and
paragraph tags.
2:43
As we learned earlier in the video,
heading tags come in different levels,
2:47
each representing a distinct section
of content with varying levels of
2:52
importance on the page.
2:56
We assigned the text, My Recipe Book,
2:58
a level one heading as it
describes our entire website.
3:01
Moving on to the next section,
the recipe titles, Spaghetti Carbonara,
3:06
since this recipe is just one
among many in our recipe book.
3:11
We'll use an h2 tag to indicate
a slightly lower level of importance
3:15
compared to the main heading.
3:20
Let's return to our index.html file and
wrap the text,
3:23
Spaghetti Carbonara,
within an opening and closing h2 tag.
3:27
Save the file and refresh the browser.
3:34
The h1 tag signifies the highest level
heading on the page causing it to
3:38
stand out from other texts due
to the browser's default styles.
3:42
On the other hand,
3:47
an h2 tag being slightly less crucial
is displayed with a smaller font size.
3:48
You might have noticed in our mockup that
the recipe title, spaghetti carbonara,
3:54
has a larger font size compared to my
recipe book text, which uses an h1 tag.
3:59
Remember that heading levels are meant to
indicate the importance of the heading.
4:06
So your choice of heading levels
should not be based on appearance but
4:10
on importance.
4:14
The reason the h1 tag appears larger
than our h2 tag is simply due to
4:16
the browser's default styling.
4:20
If I use this Chrome extension
to disable the browser's CSS,
4:23
you'll notice that both headings
have the same exact style.
4:27
This serves as a friendly reminder that
HTML controls the structure of your web
4:32
page while CSS is responsible for
styling it.
4:37
Let's continue with adding
the remaining headings and paragraphs.
4:41
Below the image,
there's a paragraph about this recipe.
4:46
So let's incorporate that into our page.
4:49
After our h2 tag,
insert an opening and closing p tag.
4:53
Between these p tags is where we'll
place the text we want to display as
4:58
a paragraph.
5:03
In our recipe.txt file, let's copy
the paragraph text by highlighting it and
5:04
using the shortcut Command+ C or
Ctrl+ C for Window users.
5:10
In index.html, I'll paste the text
between the opening and closing p tags.
5:15
Let's save the file and
refresh the browser.
5:22
Excellent, our paragraph has been
successfully added to the page.
5:26
Moving on, we have the ingredients and
step sections.
5:30
Each of these will receive an h3 heading
level, one level below our recipe title.
5:35
Finally, at the bottom left,
we have our last two paragraphs.
5:42
One giving credit to the website
the recipe is from, and
5:46
another to let people know
who made this website.
5:49
In our index.html file,
let's add our h3 tags.
5:52
Type our opening h3 tag, and
inside, type ingredients.
5:58
After the closing h3 tag,
press Enter a couple of times,
6:04
and then add another h3 tag for
our steps text.
6:08
Finally, let's conclude with
the last two paragraphs.
6:14
Press Enter a couple of times and
add a p tag with the text,
6:17
recipe from jamieoliver.com.
6:22
Now, the last paragraph
requires a bit more work.
6:25
To get this heart and copyright icon,
we'll need to use HTML character entities.
6:29
HTML entities are frequently used to
showcase reserved characters, which would
6:36
otherwise be interpreted as HTML code such
as the left and right angle brackets.
6:42
Additionally, HTML character entities
can replace other characters that
6:47
are challenging to input
using a standard keyboard.
6:52
In the teacher's notes,
6:56
I've included a link to this MDN page
that displays common HTML entities.
6:58
The page shows to display the copyright
symbol, we must type ampersand ©.
7:03
Although the heart icon isn't listed here,
I'll show you how to include that as well.
7:10
Back to our file, press enter
a couple of times and add a p tag.
7:16
Inside the p tag, we'll write,
made with, to get the heart icon,
7:21
type &heart;, and
then type by and your name.
7:28
To get the copyright symbol,
7:33
we'll type the same text the MDN
docs told us, which is ©.
7:36
Save the file and refresh the browser.
7:42
Great, we now have our two h3 tags
along with the paragraph text.
7:47
In a later part of this stage,
7:53
we'll transform jamieoliver.com
into a clickable link.
7:54
However, up next,
we'll begin creating lists with HTML,
7:59
allowing us to outline our ingredients and
steps.
8:03