HTML Tag Text Basics | HTML5 Element Text Tutorial

Summary

In 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

00:00

🌐 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.

05:00

📝 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.

10:02

🔧 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 (&).

15:03

🏷️ 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.

20:04

🔍 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.

Keywords

💡HTML

HTML, or HyperText Markup Language, is the standard markup language used to create web pages. It provides the structure and content of a web page, and is the backbone of the internet. In the video, the creator is teaching beginners how to use HTML to build a basic web page, starting with text content like headings and paragraphs.

💡Web Page Structure

Web page structure refers to the organization and layout of content on a web page, typically using HTML elements to define headings, paragraphs, and other sections. The video emphasizes the importance of a clear hierarchy, starting with a main heading (h1) and subheadings (h2, h3, etc.), which helps both users and search engines understand the page's content.

💡Heading Hierarchy

Heading hierarchy is the ordering of headings (h1, h2, h3, etc.) in a document to represent the structure and importance of different sections. It helps in creating a logical and navigable content layout. In the video, the creator explains that each page should have one main h1 heading, with subtopics represented by h2, and further subtopics under those using h3 and so on.

💡Visual Studio Code

Visual Studio Code is a free, open-source code editor developed by Microsoft. It is highly customizable and supports a wide range of programming languages, making it a popular choice for web development. In the video, the creator uses Visual Studio Code as the editing tool to write and edit HTML code.

💡Live Server Extension

The Live Server extension is an add-on for code editors like Visual Studio Code that allows developers to view their web projects in real-time as they make changes. It simplifies the development process by automatically refreshing the browser view whenever you save your code.

💡Paragraphs

Paragraphs are blocks of text that are used to organize and present information on a web page. They typically consist of multiple sentences that relate to a single topic. In HTML, paragraphs are created using the <p> tag. The video explains how to create paragraphs under headings to add details to the web page's content.

💡Horizontal Rule

A horizontal rule is an HTML element (<hr>) that represents a thematic break or separation between content on a web page. It visually creates a horizontal line across the page, often used to separate different sections or articles. The video shows how to add a horizontal rule to enhance the visual separation of content.

💡Whitespace Collapsing

Whitespace collapsing is a behavior in HTML where multiple spaces, tabs, or line breaks are treated as a single space. This means that adding multiple spaces between elements does not create additional visible space on the web page. The video clarifies that while you can add spaces for readability in the code, they will not translate to the displayed page.

💡Line Breaks

Line breaks in HTML are used to insert a break within a paragraph, causing text to appear on a new line. This is done using the <br> tag. It helps in controlling the layout of text within a paragraph without creating a new block-level element.

💡Block-Level Elements

Block-level elements in HTML are those that create a block of content, starting on a new line and occupying the full width available. They create a visible space around the content and can contain other block or inline elements. Examples include headings, paragraphs, and div elements. The video explains the concept of block-level elements and how they structure the page's layout.

💡Inline Elements

Inline elements in HTML are those that do not create a new line by themselves and only occupy the space necessary to display their content. They can be nested within block-level elements but do not add additional space around the content. Examples include <a> for links, <em> for emphasis, and <strong> for strong importance. The video illustrates the use of inline elements like <em> and <strong> within paragraphs to emphasize text.

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