Semantic Tags in HTML | Sigma Web Development Course - Tutorial #11
Summary
TLDRThis 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
📚 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.
🏷️ 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.
🔗 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.
Mindmap
Keywords
💡Semantic Tags
💡SEO
💡HTML
💡Crawlers
💡Accessibility
💡Header Tag
💡Nav Tag
💡Main Tag
💡Footer Tag
💡Figure and Figcaption
💡CSS
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
Weitere ähnliche Videos ansehen
Semantic Tags Explained | Frontend Bootcamp Hindi | Ep.04
Semantic HTML Tags | HTML5 Semantic Elements Tutorial
SEO for Developers | 2020 SEO Tutorial
Inline Vs Block Elements | Div & Span Tags Explained | Frontend Bootcamp Hindi | Ep.03
SEO and Core Web Vitals in HTML | Sigma Web Development Course - Tutorial #6
How to do On-Page SEO of Category Pages in Ecommerce Website | SEO Course | #77
5.0 / 5 (0 votes)