HTML Tag Text Basics | HTML5 Element Text Tutorial
Summary
TLDRIn this beginner's HTML tutorial, Dave guides viewers through creating text content on a webpage using headings and paragraphs, emphasizing the importance of header hierarchy for semantic meaning and accessibility. He introduces block and inline elements, demonstrates how to use HTML entities and the 'abbr' element for abbreviations, and highlights the use of comments in code. Dave also shows how to validate HTML code for accuracy and encourages continuous learning and improvement in web development.
Takeaways
- π HTML is similar to essays or newspapers, structured with headings and paragraphs.
- π Headings have a hierarchy, starting with one H1 and followed by subtopics using H2, H3, etc.
- π Use Shift+Alt+Down Arrow in Visual Studio Code to duplicate lines of code.
- π The H1 tag should be used only once per page to represent the main topic.
- π Paragraphs provide details about subtopics and can be styled with CSS later.
- π« HTML does not honor multiple spaces added with a space bar due to white space collapsing.
- π₯ Use line breaks (<br>) to insert a break within a paragraph without starting a new one.
- π Horizontal rules (<hr>) visually separate content without a closing tag.
- π§ Inline elements like <em> and <strong> do not create a new line and can be formatted with CSS.
- π HTML entities are used to represent special characters that have reserved meanings in HTML.
- π The <abbr> tag with the title attribute provides tooltips for abbreviations, enhancing readability.
Q & A
What is the main topic of this HTML tutorial?
-The main topic of this HTML tutorial is creating text content on a web page, including headings and paragraphs, and understanding the hierarchy of headings.
Which web development tools does Dave use in this tutorial?
-Dave uses the Chrome web browser, Visual Studio Code editor, and the Live Server extension for Visual Studio Code in this tutorial.
How does the hierarchy of headings work in HTML?
-The hierarchy of headings in HTML starts with an H1 tag, which should be used only once per page to represent the main topic. Subtopics are represented by H2 tags, and further subtopics under those can be represented by H3 tags and so on.
What is the purpose of using headings in web content?
-Headings provide semantic meaning to the content, indicating the main topic, subtopics, and their hierarchy. They also help assistive technologies like screen readers to navigate and understand the structure of the web page.
How can you visually represent the hierarchy of headings on a web page?
-Visually, headings are represented with decreasing font size, where H1 is the largest and subsequent headings (H2, H3, etc.) get smaller in size.
What is a horizontal rule element in HTML, and how does it visually affect the page?
-A horizontal rule element in HTML is used to create a line across the page, visually separating content. It does not have a closing tag and is typically used to break up sections of a web page.
What is white space collapsing in HTML, and how does it affect adding extra spaces on a web page?
-White space collapsing is a behavior in HTML where multiple spaces, tabs, or line breaks are treated as a single space. This means that adding extra spaces using the space bar will not be represented identically on the web page.
How do line breaks work in HTML paragraphs?
-Line breaks in HTML paragraphs can be created using the `<br>` (line break) element. Unlike typing extra spaces, `<br>` will create a visible break in the line when rendered on a web page.
What is the difference between block-level and inline elements in HTML?
-Block-level elements, like paragraphs and headings, start on a new line and create space around themselves. Inline elements, like `em` and `strong`, do not create a new line and can appear within other elements without breaking the flow.
What are HTML entities, and how are they used in web content?
-HTML entities are codes used to represent characters that have special meanings in HTML, such as `<`, `>`, or extra spaces. They allow these characters to be displayed as their literal characters rather than being interpreted by the browser.
How does the `abbr` element work in HTML, and what is its purpose?
-The `abbr` element is used for abbreviations or acronyms. It should be used with the `title` attribute, which provides the full text of the abbreviation as a tooltip, enhancing the understanding of the abbreviation for users.
What is the purpose of an HTML comment, and how can it be viewed by others?
-An HTML comment is used to leave notes or reminders within the code that are not visible on the web page itself. However, these comments can be viewed by anyone inspecting the page's source code, so sensitive information should not be included in comments.
Outlines
π Introduction to HTML Structure and Hierarchy
This paragraph introduces the basics of creating text content on a web page, emphasizing the importance of headings and paragraphs. It explains the hierarchy of headings, starting with a single H1 for the main topic, followed by subtopics using H2, and furtherη»ε using H3. The tutorial demonstrates how to use the Visual Studio Code editor and the Live Server extension to view the web page. It also highlights the semantic meaning of headers and how they help in organizing page content and improving accessibility for screen readers and assistive technologies.
π Understanding White Space and Line Breaks
This section discusses the concept of white space collapsing in HTML, where extra spaces added using the space bar are not honored and do not appear on the web page. It introduces the line break element, which can be used within a paragraph to create visual separation between ideas. The paragraph also covers the use of horizontal rules to visually divide content on a web page and the process of copying and pasting content using keyboard shortcuts. Additionally, it touches on the difference between block-level and inline elements, providing examples of each.
π§ Working with Inline Elements and HTML Entities
This paragraph focuses on inline elements, such as the 'em' element for emphasis and the 'strong' element for strong importance. It explains how these elements are used within paragraphs and affect the text's appearance and semantic meaning. The section also introduces HTML entities, which are used to represent special characters that have specific meanings in HTML, like the less than (<) and greater than (>) symbols. The tutorial demonstrates how to use entities for creating visual space and displaying symbols like the copyright (Β©) and the ampersand (&).
π·οΈ Utilizing Abbreviations, Addresses, and Comments
This segment covers the use of the 'abbr' element for abbreviations and the 'address' element for marking up contact information. It explains how to provide additional information through the 'title' attribute for accessibility purposes. The paragraph also discusses the use of HTML comments as a way to leave notes within the code, highlighting that these comments are visible in the source code but not on the web page itself. The importance of keeping content accessible and meaningful for all users, including those using assistive technologies, is emphasized.
π Validating HTML and Ensuring Quality
The final paragraph discusses the importance of validating HTML code to ensure its correctness and to identify any potential errors or warnings. It guides the user through the process of using the W3C Markup Validation Service to check the HTML file and provides instructions on how to interpret the validation results. The paragraph concludes with an encouragement to strive for progress in learning HTML and to seek continuous improvement.
Mindmap
Keywords
π‘HTML
π‘Web Page Structure
π‘Heading Hierarchy
π‘Visual Studio Code
π‘Live Server Extension
π‘Paragraphs
π‘Horizontal Rule
π‘Whitespace Collapsing
π‘Line Breaks
π‘Block-Level Elements
π‘Inline Elements
Highlights
Introduction to the beginner's HTML tutorial series using Chrome web browser, Visual Studio Code editor, and Live Server extension.
Explanation of creating text content on a webpage, comparing it to essays or newspapers with headings and paragraphs.
Demonstration of using headings (H1, H2, H3) to establish a hierarchy and subtopics within the webpage content.
Discussion on the importance of having only one H1 tag per page for semantic meaning and structure.
Illustration of how to copy and paste HTML elements using keyboard shortcuts for efficiency.
Explanation of the difference between block-level elements (like paragraphs and headings) and inline elements (like the 'em' element for emphasis).
Introduction to HTML entities for special characters and symbols, and their use in web content.
Use of the 'abbr' element for abbreviations and the 'title' attribute for providing additional information.
Inclusion of an address element to denote a specific location, adding semantic meaning to the content.
Explanation of HTML comments, their purpose, and visibility in the source code.
Importance of validating HTML code using W3C's markup validation service to ensure there are no errors or warnings.
The tutorial's approach to teaching HTML emphasizes learning through practical examples and hands-on coding.
Use of Visual Studio Code and its features, such as automatic tag closing and formatting, to aid in web development.
The concept of white space collapsing in HTML and how it affects the representation of spaces on a webpage.
Demonstration of line breaks within a paragraph element to control the visual formatting of text on a webpage.
The role of CSS in future lessons for styling web pages and the separation of content from presentation.
The tutorial's encouragement of incremental learning and the philosophy of 'progress over perfection'.
Transcripts
[Music]
hello and welcome hi i'm dave
this tutorial is part of a beginner's
html series i'll be using the chrome web
browser the visual studio code editor
and the live server extension for visual
studio code to view the web page there
are links to these tools starter code
files and all resources in the
description below let's look at the
basics of creating text content on a web
page
now web pages are a lot like essays or
even a newspaper where they have
headings and usually paragraphs of text
or at least a sentence or two of text
describing something afterwards so we
see our paragraph element here
and our h1 heading here much of the text
content on a web page will be made up of
headings and paragraphs now headings
have a hierarchy and that means
we'll start out with only one h1 on the
page and each page should only have one
h1 but after that we can have subtopics
so here i'm going to press shift alt and
the down arrow again i'm using windows
it may be different for you on mac or
linux but i just copied a line down so
now i have two h1s but i'm going to
change this
by typing h2 over that h1 and notice how
the ending tag immediately changed here
in visual studio code as well so that's
helpful now this is a sub topic for the
page so imagine this being the title of
your essay or
the big headline in a newspaper and then
we have subtopics so for h2 i'm going to
type something different let's go with
i'm ready to learn
html
and now we can have a paragraph about
that and so we do at least we have a
sentence this is my first web page
now i'm going to highlight this
subheading h2 and the paragraph and once
again i'm going to press shift alt and
the down arrow
and it copies both lines down for me and
i'll add an extra blank line here and
i'm going to change this second h2
into an h3 now we i'll use lowercase
there we go
now we could have more than one h2 on
the page but i wanted to show how you
could have a subtopic
under our subtopic so we have the title
for our essay
and then we have an area of discussion
that we've added in h2 as the heading
for and now under this area of
discussion we could have further
subtopics and this is how we now have an
h3 so now instead of my first web page
or i'm ready to learn html let's change
this to
my daily schedule so this will
discuss our schedule for learning html
and then we could just say something
about i'm going to tell you how or
let me
tell
you how i and i'll just put some dots
there for now just we'll expand on that
later if we want to but really what i'm
showing is this hierarchy and it's also
important not just visually let me go
ahead and save this by pressing ctrl s
or remember you can go to the file menu
and choose save
visually we see
that it's naturally formatted larger on
the page with the h1 than it is the h2
and then the h3 is even smaller than the
h2 but we can change all of that with
css in the future css will really style
how our web page looks
but what is important is we can quickly
visually tell the headers apart right
now
and when a screen reader or other
assistive technology looks at our code
then it can navigate the code through
the headers of what is important here
the header hierarchy and that's why it's
so important to organize your page the
headers actually give semantic meaning
saying
this is the main topic this is a
subtopic under the main topic and this
is a subtopic under
the higher
subtopic in the hierarchy so headers do
have semantic importance and that means
giving meaning to our content and of
course then our paragraphs can just have
whatever details we want to add about
those subtopics as well now even though
we've created a little separation in our
code when we look at our page we just
see line space line space and we don't
have a good visual separation i'm going
to add an element that doesn't really
provide any semantic meaning but
visually it helps us on the page and
that is a horizontal rule element and
it's just added like this there is no
closing tag for the horizontal rule and
then i'm going to add another one after
our final subtopic discussion here so we
can add something else underneath that
and so now let's save and look what the
horizontal rule adds to the page
now we have lines going across the page
and those are called horizontal rules so
we have our main heading and now we have
our subtopic and i left the h3 in here
because it's a subtopic
of this topic
so now we can go ahead and i'm going to
highlight the h2 and the h3 ctrl c to
copy
come down further on the page and paste
and i'll save just so we can see what
happens now we have two different
subtopic sections and we still have our
top hello world so you could picture
this more like an essay page and of
course these could be
paragraphs that have more text or you
could picture this more like a newspaper
and then we would have an article here
and an article here
in our heading at the top this is also a
good time to discuss white space so if i
just press the space bar
and add all these extra spaces to the
page
if i say visual studio code is already
going to probably reformat this but what
is important to know when i save you'll
see yes it changed and it just went back
and only left one space
is
web pages or html
do not honor all those spaces you might
add with a space bar it's called white
space collapsing and so we can space
many lines
but it won't really be represented on
the page that is not how we add extra
space in html so again recognize white
space collapsing that it will not last
now something we can do is what's called
a line break and that can be inserted
inside a paragraph element so now i'll
put let me tell you how and then i'm
going to return remember we don't have
to have the opening and closing tags on
the same line for an element we can nest
other elements inside of an element so
i'm going to put a break and that stands
for line break
and then i'll put three dots and i'll
say let me tell you how
i learn more about web dev
and a period that looks good and now we
can put another break and i'll just put
three more dots
and say i plan
out my schedule
and one more line break
the three dots of course are not
required it's just what i'm adding here
and then i'll say i use
resources from
mdn which previously we discussed and
when i showed the definition of html we
were looking at the mozilla developer
network and that's what mdn is
so now if we save this file you can see
we've got line breaks
and we're showing each of these details
on separate lines okay let's scroll down
and change some of our second topic now
so instead of i'm ready to learn html
let's change our second subtopic to
i am let me capitalize that i am also
planning a
vacation
and now we can put some details about
that vacation in the paragraph
underneath this subtopic
and i'll say
i've been working hard
and really
need a
getaway period
and let's see if we want to add anything
underneath that yep let's add one more
sentence and what i'm going to do once
again is shift alt and the down arrow
and visual studio code will copy that
line down so
now we can just change the sentence here
and i'll say
i live in kansas
so i want to
visit
a beach
kansas is nowhere near the ocean so that
sounds pretty good so let's save that
and now we can see our subtopic here
changed and we have a couple of
sentences
about planning the vacation now let's
change the my daily schedule subtopic at
the h3 to
places
i'd like to
visit
and i guess i could capitalize that l on
like there we go places i'd like to
visit
and now i'll highlight that paragraph
and say
i've heard
good things
about the
caribbean
sounds like they have warm water and
fun islands to visit okay so now we've
got some extra details here
and we can have more than one sub topic
here so let's go ahead and do that again
shift alt and the down arrow to copy
that
and places
i want to avoid could be our next one so
places i want to avoid
and here we can put
anywhere cold
no
way with an exclamation mark okay so now
we've got some extra detail here in our
second area and this will allow me to go
ahead and show you the difference
between block level elements and inline
elements what we've been working with
here are block level elements notice
with every paragraph and every heading
they start on a new line that is a block
level element it creates space around it
which of course can be formatted in the
future with css
but it does not allow you to put another
paragraph inside of a header or a
paragraph without creating that new line
that space so there will be
a return essentially in your content
when you're using a block level element
but when you use an inline element that
doesn't happen so let's look at a couple
of these first of all
we can say
i've been working really hard and
i've been working hard and really need a
getaway let's emphasize that really need
a getaway and one in line element that
we can do that with is em and that
stands for emphasis that provides some
semantic meaning once again so now a
screen reader or other assistive
technology or are just our browser
overall knows we're emphasizing this
really need a get away so let's save and
notice
really need a getaway is italicized now
we're not using it for the italicized
text again the formatting will come
later with css but that is just the
natural behavior of using the emphasis
element as we wrap our text but it
provides that meaning now what if we
really want to emphasize that text it
has a strong meaning to us like are no
way here we don't want to go anywhere
cold well there is a
strong element we can use for that
and here let me grab the ending tag and
put it at the end of our no way
and now i'll save and notice it got just
a little bit bigger and bolder here as
far as the natural formatting of the
strong element but again this is an
inline element it's inside the paragraph
it did not create a
break in the line it did not create any
extra space around it so these are
inline level elements
and the other elements such as the
header and the paragraph we've been
working with are block level elements
another type of content we can add to
our page are html entities so they are
things that are not really the normal
text we would type out what for example
if we wanted to
show a less than or a greater than
symbol on our page right now html
interprets those as we're starting or
ending a tag so we can't just easily put
one of those on the page likewise there
are some other symbols or remember when
i talked about white space collapsing if
we need a little bit of extra space
there's an html entity for that so i
want to indent these three lines with a
little bit of space
and i can use the html entity i still
need the closing there here we go
and ampersand is usually what starts out
an html entity and now i'll type
nbsp and a semicolon
notice visual studio code recognizes
that right away
and if i save
i have spaced this line over just a
little bit
now i can add more than one of those if
i want so i'm going to copy that and i'm
going to add two more
and now save and our line is over even a
little further
so i will go ahead and select all three
of these
and i'm going to paste them right after
the line break on each line
and save and now we have indented with
some extra space
all three of these lines with these html
entities that create space but as i
mentioned there are other html entities
as well so let's scroll down here to the
bottom of our page
and after this last topic
let's add another hr
and now we'll type
and
lt
and a semicolon and that stands for less
than so if we save now look we have a
less than symbol underneath the final
horizontal rule here at the bottom of
the page
i'm going to go ahead and copy that
and paste
two more
and then i'm going to add
ampersand
copy with a semicolon and that will be
the copyright symbol then i'll just put
my name you can put yours and then i'm
going to add ampersand gt for greater
than in a semicolon and once again i'll
copy that
and paste
two more now if we save
you can see we've got our three less
than symbols we've got a copyright
symbol
then
your name or my name and then
three greater than symbols and we're
using html entities to create those i'll
provide a link to a list of html entity
codes in the resources for this tutorial
you may have noticed we've got a couple
of abbreviations on our page we have the
abbreviation for kansas which is ks and
we also have the acronym or abbreviation
for the mozilla developer network here
on our page so let's go ahead and add
another inline level element
and that can help us with our
abbreviations
and that is abb
r but it doesn't really do it by itself
i'm going to go ahead and select mdn cut
it and paste it here in the middle of
the element
and this won't really provide anything
we also need to add the attribute title
here i can put the full
text mozilla
developer network
and save and now when we look at our
page it has some dots underneath mdn if
we mouse over
we get a tool tip that says mozilla
developer network now it's important to
realize this tool tip will not really be
available to screen reader and assistive
technology so
we don't want anything super important
for the understanding of the meaning of
the page to be in there so if we are
using abbreviation it's a nice thing to
have but it is really not accessible to
all assistive technologies so
it's it you can't have anything in there
that the page really depends on because
some of the people accessing the page
may not be able to read or see the
information that you provide here inside
the title attribute of the abbreviation
element let's go ahead and add that
abbreviation element for kansas as well
so abbr and then title
and i'll spell the state name kansas
and then i can go ahead and double click
on kansas control x to cut and i'm going
to paste it with ctrl v right inside the
element
save and now
dots are under the ks here on the page
and if i mouse over we get a tool tip
that says kansas let's put another
paragraph under places i'd like to visit
and i'll put
i can just type p and press tab as well
there we go and now i'll type
i've heard
good things
about
going here with a colon
and now i'm going to add
an address element
and we can put a location
inside of this address element and it
tells the browser that this is an
address or a specific location so i'm
just going to paste this in because you
don't need to see me type all of this
and i might easily have a typo here this
is margaritaville island in cancun it
sounds like a great place for a vacation
notice we've got a line break element
after each line except the last line and
if we save this and look at the page you
can see how the browser handles this
it is
just three lines of text it is all
italicized by default
and the browser knows that this is an
address and once again so would
assistive technology so an address
element
does provide
some semantic meaning as well to the
content within it now before we finish
this lesson about content there's one
other thing we can add to our code now
we won't see it on the page but it is
important to us
and this is an html comment
and so now you can see visual studio
code colored this differently at least
with the theme that i'm using and we can
leave a note for ourselves inside of our
code now notice this will not be on the
page but i will show you how the public
can see it so you don't want to put
anything in here that you don't expect
the public to be able to read
i'll put a to-do which is a common use
and i'll just put add
more places so it's a reminder to me to
add more places to the list of places i
want to avoid we save that and it
doesn't show on the page it's just a
reminder in the code or a note to
yourself inside of the code but i will
show you how the public can see this if
we right click
and choose inspect
that works or you can also press ctrl u
either way will show your source code
now notice we've got a comment in here
that says add more places it's not
visible on the web page itself but it is
visible in the source code again you can
press ctrl u
to view this
now notice live server also injected a
comment here and it injected some
javascript so when we look at the
overall source code of what is live
we're seeing more than we even had but
this is a comment once again that is not
seen on the page and live server is
using a script element that we do not
see on the page either and that can
contain javascript for example so
just to let you know if you leave a note
for yourself
it can be viewed by others and finally
now that we've added all of this html
content to our page we once again should
go to the validator markup validation
service from w3c to check our file to
see if it is valid html or if we have
any mistakes choose validate by file
upload
and then click choose file
i'm going to have to probably go to a
different folder from the one that i
checked last so i'll go to html course
lesson three which is the file we are
working with choose my index.html and
open that here with the validator now it
has the index.html file uploaded and we
can click check
and we'll see if we have valid html so
this is valid it's green document
checking completed no errors or warnings
to show if you have errors or warnings
it should point out exactly where that
error is and you can fix that in your
html remember to keep striving for
progress over perfection and a little
progress every day will go a very long
way please give this video a like if
it's helped you and thank you for
watching and subscribing you're helping
my channel grow have a great day and
let's write more code together very soon
Browse More Related Video
5.0 / 5 (0 votes)