Semantic Tags in HTML | Sigma Web Development Course - Tutorial #11

Summary

This 11th installment of the Sigma Web Development course delves into the importance of Semantic Tags for SEO and website structure comprehension by search engines. The instructor clarifies that while semantic tags don't affect design, they significantly aid search engines like Google and Bing in understanding and ranking websites. The video provides examples of various semantic tags such as header, nav, main, article, and footer, demonstrating how they contribute to a clear website hierarchy, analogous to organizing files in folders. The presenter also touches on the role of semantic tags in enhancing accessibility and SEO, introduced in HTML5 for better content structuring and comprehension.

Takeaways

• 😀 The video is part of the Sigma Web Development course, focusing on Semantic Tags and their importance for SEO and website structure understanding.
• 🔍 Semantic Tags are crucial for search engines like Google and Bing to understand the content and purpose of different parts of a website, thus improving SEO.
• 🏷️ Examples of Semantic Tags include 'header', 'nav', 'main', 'article', 'figure', and 'footer', which help in structuring the website content meaningfully.
• 🛠️ Even without Semantic Tags, a website can still have good design, but they are essential for search engine optimization and accessibility.
• 📚 The use of Semantic Tags helps crawlers and anyone parsing the website to understand its structure and content, aiding in better ranking on search engines.
• 📁 The analogy of organizing files in folders is used to explain the benefit of Semantic Tags, emphasizing the importance of structured content.
• 🌐 Semantic Tags were introduced in HTML5 to improve the organization and readability of web content for browsers, crawlers, and search engines.
• 📝 The 'article' tag is used for self-contained content like blog posts or news articles, while 'section' tags are for thematic groupings of content.
• 📊 The 'figure' and 'figcaption' tags are used for images, diagrams, and charts, allowing for better description and accessibility.
• ⏰ The 'time' tag is used for representing time-related information, enhancing the semantic meaning of dates and times on a webpage.
• 🎨 Semantic Tags do not affect the styling of a webpage; CSS is used for that purpose. They are solely for improving content understanding and accessibility.

Q & A

What is the main topic of the 11th video in the Sigma Web Development course?

The main topic of the 11th video is Semantic Tags and their importance for SEO and the structure of a website.

Why are semantic tags important for SEO?

Semantic tags are important for SEO because they help search engines understand the structure and content of a website, leading to better rankings.

What is the purpose of semantic tags in HTML?

Semantic tags in HTML are used to convey meaning about the content and its purpose to browsers and search engines, aiding in better understanding and organization of the website.

Can a website have good design without using semantic tags?

Yes, a website can have good design without using semantic tags, but semantic tags are crucial for search engine optimization and accessibility.

What are some examples of semantic tags mentioned in the script?

Some examples of semantic tags mentioned are header, nav, main, article, figure, and footer.

How do semantic tags help in structuring a website similar to how folders are used on a computer?

Semantic tags help in structuring a website by defining specific sections and their purposes, similar to how folders on a computer organize and categorize files.

What is the role of the 'nav' tag in a website's structure?

The 'nav' tag is used to define the navigation bar of a website, making it clear to search engines and browsers where the navigation links are located.

What does the 'article' tag represent in HTML?

The 'article' tag represents a self-contained piece of content, such as a blog post or news article, that is intended to be distributed independently from the rest of the site.

What is the purpose of the 'aside' tag in HTML?

The 'aside' tag is used for content that is tangentially related to the main content, typically for sidebars or side notes, such as information about the author on a blog.

What is the significance of the 'figure' and 'figcaption' tags in HTML?

The 'figure' and 'figcaption' tags are used for images, diagrams, or charts, allowing for better semantic understanding of the content and its description.

When were semantic tags introduced in HTML, and why?

Semantic tags were introduced in HTML5 to improve the organization and accessibility of web content, making it easier for browsers, search engines, and other parsers to understand the structure and purpose of the content.

Are semantic tags used for styling purposes in HTML?

No, semantic tags are not used for styling purposes. Styling is done using CSS, while semantic tags are used to provide meaning and structure to the content.

Outlines

00:00

📚 Introduction to Semantic Tags for SEO

The speaker introduces the 11th video in the Sigma Web Development course, focusing on the importance of semantic tags for Search Engine Optimization (SEO). Semantic tags help search engines like Google and Bing understand the structure and content of a website, leading to better rankings. The video aims to explain what semantic tags are, why they are essential, and how they can be utilized to enhance a website's SEO. The speaker uses an analogy of organizing files in folders to explain how semantic tags help in structuring a website for better comprehension by browsers and search engine crawlers.

05:02

🏷️ Utilizing Semantic Tags for Webpage Structure

This paragraph delves deeper into the practical application of semantic tags, such as 'header', 'nav', 'main', 'article', 'aside', 'footer', 'figure', and 'figcaption'. The speaker demonstrates how these tags can be used to define different sections of a webpage, making it easier for both users and search engines to navigate and understand the content. The explanation includes the use of 'header' for the top section, 'nav' for navigation bars, 'main' for the central content, 'footer' for copyright and important links, and 'figure' and 'figcaption' for images and diagrams. The speaker emphasizes that semantic tags are not for styling but for improving accessibility and content understanding, which was the primary reason for their introduction in HTML5.

10:04

🔗 Wrapping Up and Encouraging Further Learning

In the concluding paragraph, the speaker wraps up the discussion on semantic tags and encourages viewers to continue learning by accessing the provided code repository and subscribing to the video playlist. The speaker reassures viewers that all relevant information, including styling with CSS, will be covered in upcoming videos and invites them to bookmark the playlist for easy access. The video ends with a thank you note to the viewers for watching and a promise to see them in the next video.

Keywords

💡Semantic Tags

Semantic tags are HTML elements that provide meaning to the web content and structure. They help search engines like Google and Bing better understand the layout and content of a website, which is crucial for SEO. In the video, semantic tags such as 'header', 'nav', 'main', 'article', 'footer', and others are introduced as a way to organize and describe the different sections of a webpage, akin to organizing files in folders on a computer.

💡SEO

SEO stands for Search Engine Optimization, which is the process of improving a website's visibility on search engine results pages through various strategies. The video emphasizes the importance of using semantic tags to enhance SEO because they help search engines crawl and index the website more effectively, as demonstrated by the instructor's explanation of how semantic tags can improve the overall SEO of a website.

💡HTML

HTML, or HyperText Markup Language, is the standard language used to create and design websites. The video script discusses the use of semantic HTML tags, which are a subset of HTML tags introduced in HTML5 to provide more descriptive information about the content, rather than just presentational cues. Examples from the script include using 'header' for the top section and 'footer' for the bottom section of a webpage.

💡Crawlers

Crawlers, also known as spiders or bots, are programs used by search engines to discover and index web pages. The video mentions that semantic tags help crawlers understand the structure and content of a website, which is essential for proper indexing and ranking on search engines. The script uses the term to illustrate how semantic tags aid in making the website's content more accessible to these automated tools.

💡Accessibility

Accessibility in web development refers to the inclusive practice of making websites usable by people with disabilities. The video script explains that semantic tags improve accessibility by providing a clear structure to the content, which can be beneficial for screen readers and other assistive technologies. For instance, the 'nav' tag clearly defines navigation links, making it easier for screen readers to navigate through the site.

💡Header Tag

The 'header' tag in HTML is used to define the top section of a webpage, typically containing the logo, navigation links, and other introductory content. In the video, the instructor uses the 'header' tag to demonstrate how to structure the top section of a webpage, including the creation of a navigation bar within it.

💡Nav Tag

The 'nav' tag is a semantic HTML element used to define a section of a page that contains navigation links to other pages or sections within the website. The video script shows how to use the 'nav' tag to create a horizontal navigation bar, which is an essential component of most websites for user navigation.

💡Main Tag

The 'main' tag in HTML is used to specify the main content of a document. It is intended to contain the dominant content that is unique to the document, and it should be used only once per page. The video script illustrates the use of the 'main' tag to encapsulate the primary content area of a webpage, following the 'header' and preceding the 'footer'.

💡Footer Tag

The 'footer' tag is used to define the footer section of a webpage, typically containing copyright information, contact details, and other secondary information. In the video, the instructor demonstrates how to use the 'footer' tag to denote the end of the webpage content and to include copyright and reservation notices.

💡Figure and Figcaption

The 'figure' and 'figcaption' tags are used in HTML to associate an image or diagram with its caption. The 'figure' tag is used for the content itself, while the 'figcaption' tag is used for the caption. The video script mentions these tags as a way to semantically mark up images and charts within the 'main' content area of a webpage, providing a clear description and context for visual content.

💡CSS

CSS stands for Cascading Style Sheets, a language used to style and layout web pages written in HTML. While the video script does not delve deeply into CSS, it mentions that semantic tags are not used for styling purposes but are styled using CSS. For example, the instructor briefly touches on how CSS can be used to make a navigation bar horizontal, separate from the semantic structure provided by HTML tags.

Highlights

Introduction to the Sigma Web Development course video on Semantic Tags and their importance for SEO.

Explanation of Semantic Tags and their role in helping browsers and search engines understand website content.

Semantic Tags help improve the SEO and overall structure of a website, making it easier for search engines to rank the site.

Introduction to different Semantic Tags like header, nav, main, article, figure, and footer, and their respective roles.

Example of a boilerplate template setup with a folder named 'Video 11' and the use of an index.html file.

Demonstration of how to structure a website using Semantic Tags for better organization and clarity.

Comparison between using generic div tags versus using specific Semantic Tags for elements like headers and footers.

Explanation of the benefits of using Semantic Tags for better SEO and accessibility.

Detailed walkthrough on creating a header and navigation bar using the header and nav tags.

Example of structuring main content and footer sections using the main and footer tags.

Discussion on how Semantic Tags enhance readability and parsing by browsers and search engines.

Explanation of the historical introduction of Semantic Tags in HTML5 and their purpose in organizing content.

Illustration of how to use Semantic Tags like article, section, aside, and time for different content types.

Clarification that Semantic Tags are for structure and accessibility, not for styling, which is done using CSS.

Encouragement to bookmark the playlist and start the repository for accessing all the code used in the videos.

Transcripts

What's up guys, you are in the 11th video of the Sigma Web Development course.

We have completed 10 videos.

So one like is enough for the consistency of all of us.

In today's video, we will see about Semantic Tags.

Because they are very important for SEO.

And to understand the structure of the overall website,

search engines are very happy to see this structure.

That is, overall SEO of your website is going to be very good if you use these tags.

What are these tags? Why are these tags?

How to use them

what are the benefits, we will see in this video

let's go to the computer screen

let's roll the intro

so guys, first of all, I would like to tell you what are semantic tags

here you can see that I have made a folder named Video 11

and here I have set a title by putting a boilerplate template of index and html

by putting an h1 and setting this image, I am going to preview it here.

So this is the image, to explain a little bit, I will tell you what are Semantic Tags?

Semantic Tags are for browsers and weblers who want to understand your website properly

They tell them what is the content of your website and what is the purpose of which place and which tag

If you don't use semantic tags in HTML, then your work will be done

It's not that if you don't use semantic tags, then your website won't look good

You can do good designing.

But we want to explain to Google and Bing search engines

about our website.

And if we explain them about our website,

then they will be able to understand our website.

And they will rank our website on Google, Bing,

and on the respective search engines.

And we want the crawlers can understand our website

and we want that whoever wants to understand our website

they can understand it well

that's why there are some special tags like header, nav, main, article, figure

all these special tags are made in html

which help you to structure your website

now if there is something in the header then I know that it is a header

that is, it is at the top if there is something in the header, then I know that it is a header, that is, it is at the top.

If there is something in the footer,

then I will understand that

the website has started ending from here,

this footer has started here.

This footer could have been div,

but no, if I am using semantic HTML,

then I will use the footer tag.

Along with that,

where I was making my navigation bar

in the span tag,

this time I will not make my navigation bar

in the span tag, I will make my navigation bar in the span tag, this time I will not make my navigation bar in span tag, I will make my navigation bar in nav tag.

So these kinds of differences explain our search engines very well about what our website is about.

So I show you some examples of semantic tags here and I hope you have what are semantic tags now see there are download folders of our computer

many of you download folder as if you have downloaded all the files of the world

90% of your computer's files are in the download folder of many people

but we should not do this

some people go to this extent that they start spreading files in their local disk C or windows folder

and some people keep files in system 32 also.

So if you spread your files in your computer,

Then it is not arranged in one way.

But if you arrange it in folders,

That you have this file in one folder.

If you want to keep a secret file in a folder,

You put secret files.

You can make a folder, With the name of do not open this. If you can put keep a secret file in a folder, you can put secret files. You can make a folder named do not open this.

If you can put some of your files in it, then it will be arranged in one way.

You have arranged the images in one way, you have arranged the videos in one way,

and let's say you have arranged the e-books in one way.

So whenever you go to find it, you will get it.

So it will be much better for you to understand that folder structure

instead of if you are spreading your files throughout the computer

You definitely don't want to spread your files throughout the computer

So I hope you understood why we use semantic tags

It is very good for our SEO

I haven't used the word SEO yet

But SEO is a very important part of search engine optimization

Using semantic tags.

So what happens, basically I make your website the way you make it,

you just use some special tags.

For example, let's say I am making this website,

I will comment out this image here, what are semantic tags,

I will not comment it out, I will basically make a navbar here.

So what will I do, first of all I will say that this is the header of my website, I have used a header tag, I will make a navbar First of all i will say that this is my website header

I will make a navbar in this

I will make an unordered list in this

I will make an li in this and i will write home

And after this i will write many more

And this is my header

So anyone who comes to my website will understand that this is my header

Home, about, contact whatever i to write, I can write here.

So, this is my header, this is my navbar, it is clearly visible because I have used header and nav tags.

So, I write about here and here I write contact.

So, here I wrote home, here I wrote about and here I wrote contact.

So, I hope you understood this thing.

Now, if I want a footer, let's say i want to make a footer

here my main content will come after header

so i will use main tag

and after this my footer

in footer i will write

copyright cwh

and here i will write

all rights reserved

ok, i can write like this

so here see copyright

all rights reserved, i have written like this. So here see copyright, all rights reserved,

I wrote all this here.

Did I...

Yes, so what I will do is, I will cut this.

I will put this in the main.

This is my main content.

So first my header will come,

then main content will come,

then footer will come, as you can see here.

And here also you see,

this is the header, this is my main content,

this is the footer.

So what I did in one way is,

I arranged it.

In a way, the way you arrange your files in different folders, I arranged it. In the same way, you arrange your files in different folders.

I have arranged my HTML tags here.

So we understood about the header tag that it is used to represent the top section of a web page.

Which is a header.

After that, we will put nav in the nav tag.

Ideally, the article indicates a self-containing piece of content such as blog post or news article.

If you put a particular self-contained piece of content, then put it in the article tag

Section represents a thematic grouping

Suppose one section is talking about one thing on your page

The second section will talk about something else

Aside means if anything is lying on the side, then it is used as an aside tag

So here see, typically used for sidebars or content that is tangentially

related to the main content. Like on the aside tag,

what you can do is,

if you want to put a side note, about the author,

you must have seen many blogs where the side

is also written, about the author. So you can put

such things in the aside tag. Then

after this, we have the footer tag, I told you

about this, if you want to put

copyright information, all these things, or

if you want to put some important links of the website,

then you can put that in the footer. Then after this, figure and figcaption. What is figure and figcaption?

Whenever you want to use images, diagrams, charts, you can use figure and figcaption.

In main, the main content area, like the main content area of our speech was this, we put it in the main tag.

Then there is also a time tag, used to represent time-related information.

So you can use the time tag, you can put date, time or anything in it.

So I hope you have understood this thing now.

So these are used to enhance SEO, to improve accessibility.

And if browsers want to take a decision about our page,

Let's say there is a browser, it has a new feature that it will read our content aloud

like Edge has a feature, so the browser can decide that I am only reading the main content

now think if someone wants to read this page aloud, then how will he read it aloud

code with Harry, home, courses, tutorial, you don't want to read aloud like this

you want to read the main content. HTML, Semantic Tags.

HTML5 Introduce, Arrange, Semantic Tags.

The first versions of our HTML,

They didn't have Semantic Tags.

Semantic Tags were introduced from HTML5.

And the most important reason to introduce Semantic Tags in HTML5

is to arrange things.

So that the browser or whoever is parsing the content

whoever is looking at the code of our content, whether it is a browser, crawler, google, bing,

search engines or anyone who wants to generate a preview, like you put a URL on Twitter

and want to generate a preview, if there are such things, then you will want

that your content can be understood properly, so if you want your content to be understood properly,

then you will use semantic tags.

Here this image is explaining very well that

if you write HTML without semantic tags,

then you will write like this for semantic tags.

This image you are seeing, this is a header, this is a nav, this is a side.

How to throw one thing in aside, we will do all this with CSS.

Don't be confused, this is not used for styling.

Because many people get confused that

Is it used to assign things?

No, it is not like that.

You have to style things with CSS.

But here

Your content can be understood well.

Can be described.

Which is the main content, which is the header or footer.

That's why semantic tags are made.

So semantic tags do not do any magic. why semantic tags are made Semantic tags don't do any magic

Semantic tags are made only for accessibility

And to understand your page

Now here are some examples that you can see

I have given the example of header and footer tag

What will happen inside the header

Here you see that you will ideally put your navigation bar inside the header

And then you will style it with CSS

I will show you a very quick styling

Obviously we will talk about styling later

but many people must be thinking

how this navigation bar will be horizontal

so if you want to make the navigation bar horizontal

then I will write some CSS here

and I will tell you all this

why does CSS work here

so you see I have flexed the display

so it happened like this

so a lot of things are going to happen in the coming videos

so don't worry at all at all. That we didn't do this, we didn't do that.

I will tell you everything.

And the CSS I wrote here, what does it mean?

Why did I write CSS by inspecting?

I will tell you about this too.

I will reload, it went. Why did it go?

We are going to see all this in the CSS section.

If you have not accessed this playlist yet, then do it.

Bookmark the accesses.

Click here and save it.

And I am uploading all the code

so as you move forward in the videos, you will get all the code here

do start this repository if you haven't done it yet

and also like the video

thank you so much guys for watching this video and I will see you

next time Thanks for watching!

you