HTML Semantics – Free Tutorial to learn HTML

Last updated on 26th Jan 2022, Blog, Tutorials

(5.0) | 19733 Ratings 2214

Share:

• Introduction to Semantic HTML
• Semantics in HTML
• What are Semantic Elements?
• List of new semantic elements
• Why use semantic elements?
• Why Do You Need to Use Semantic Tags?
• The importance of Semantic HTML
• These are the most important semantic markup give us
• So what are semantic elements good for?
• HTML5 Advantages and Disadvantages
• List of the Advantages of HTML5
• List of the Disadvantages of HTML5
• Conclusion

Introduction to Semantic HTML

Semantic HTML or semantic markup is HTML that acquaints significance with the site page rather than just show. For instance, a

tag demonstrates that the encased text is a passage. This is both semantic and presentational in light of the fact that individuals realize what passages are, and programs know how to show them.




Semantics in HTML

In HTML, for example, the <'h1> element is a semantic element, which gives the text it wraps around the role (or meaning) of “a top-level heading on your page.”




<'h1>This is a top-level heading<'/h1>




By default, most browser’s user agent stylesheet will style a <'h1> with a large font size to make it look like a heading (although you could style it to look like anything you wanted). On the other hand, you could make any element look like a top level heading. Consider the following:




<'span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?<'/span>



• This will render it to look like a top-level heading, but it has no semantic value, so it will not get any extra benefits as described above. It is therefore a good idea to use the right HTML element for the right job.


• HTML should be coded to represent the data that will be populated and not based on its default presentation styling. Presentation (how it should look), is the sole responsibility of CSS.



Some of the benefits from writing semantic markup are as follows:

• Search engines will consider its contents as important keywords to influence the page’s search rankings (see SEO)
• Screen readers can use it as a signpost to help visually impaired users navigate a page
• Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes
• Suggests to the developer the type of data that will be populated
• Semantic naming mirrors proper custom element/component naming



When approaching which markup to use, ask yourself, “What element(s) best describe/represent the data that I’m going to populate?” For example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc.




What are Semantic Elements?

1. HTML was originally created as a markup language to describe documents on the early internet. As the internet grew and was adopted by more people, its needs changed.




2. Where the internet was originally intended for sharing scientific documents, now people wanted to share other things as well. Very quickly, people started wanting to make the web look nicer.




3. Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the <'table><'/table> to describe information using a table, programmers would use them to position other elements on a page.




4. As the use of visually designed layouts progressed, programmers started to use a generic “non-semantic” tag like <'div>. They would often give these elements a class or id attribute to describe their purpose. For example, instead of <'header> this was often written as <'div class="header">.




5. As HTML5 is still relatively new, this use of non-semantic elements is still very common on websites today.




List of new semantic elements

The semantic elements added in HTML5 are:

• <'article>
• <'aside>
• <'details>
• <'figcaption>
• <'figure>
• <'footer>
• <'header>
• <'main>
• <'mark>
• <'nav>
• <'section>
• <'summary>
• <'time>



Elements such as <'header>, <'nav>, <'section>, <'article>, <'aside>, and <'footer> act more or less like <'div> elements. They group other elements together into page sections. However where a <'div> tag could contain any type of information, it is easy to identify what sort of information would go in a semantic <'header> region.






Why use semantic elements?

To look at the benefits of semantic elements, here are two pieces of HTML code. This first block of code uses semantic elements:

a) First, it is much easier to read. This is probably the first thing you will notice when looking at the first block of code using semantic elements. This is a small example, but as a programmer you can be reading through hundreds or thousands of lines of code. The easier it is to read and understand that code, the easier it makes your job.




b) It has greater accessibility. You are not the only one that finds semantic elements easier to understand. Search engines and assistive technologies (like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.




c) Overall, semantic elements also lead to more consistent code. When creating a header using non-semantic elements, different programmers might write this as <'div class="header">, <'div id="header">, <'div class="head">, or simply <'div>. There are so many ways that you can create a header element, and they all depend on the personal preference of the programmer. By creating a standard semantic element, it makes it easier for everyone.




d) Since October 2014, HTML4 got upgraded to HTML5, along with some new “semantic” elements. To this day, some of us might still be confused as to why so many different elements that doesn’t seem to show any major changes.




<'section> and <'article>

“What’s the difference?”, you may ask. Both these elements are used for sectioning a content, and yes, they can definitely be used interchangeably. It’s a matter of in which situation. HTML4 offered only one type of container element, which is <'div>. While this is still used in HTML5, HTML5 provided us with <'section> and <'article> in a way to replace <'div>. The <'section> and <'article> elements are conceptually similar and interchangeable. To decide which of these you should choose, take note of the following:

• An article is intended to be independently distributable or reusable.
• A section is a thematic grouping of content.



Learn HTML Certification Training Course to Build Your Skills
Weekday / Weekend BatchesSee Batch Details

Why Do You Need to Use Semantic Tags?

The are several advantages of using semantics tags in HTML:

• The semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages.
• The pages made with semantic elements are much easier to read.
• It has greater accessibility. It offers a better user experience.



The importance of Semantic HTML

Why is it important that our HTML is semantic? Well, for example, when it comes to finding a page on the internet, search engines ‘see’ the page without styles and the only way to understand which elements are more important is through marking. That is, if we put the name of the page inside a ‘<'p>’ (paragraph) tag, it is likely to be lost in other content and not show up in the search engine results. But if we place it inside a ‘<'h1>’ (header 1) tag, the search engines know that they have to give it more importance. Therefore, search engine optimization is a very good reason to use semantic markup.




These are the most important advantages that semantic markup give us:

1. Clearer code and easier to maintain

a) But Why use certain tags? For example, a <'nav> tag to contain your navigation bar, if you can use a <'div> tag.

b) Many of these tags will not represent any change in the distribution of content or in the way in which the text is displayed, but this practice allows our code to make more sense, and to be closer to a natural language, where each element uses the adequate words.

c) In addition, when a project grows, adding more pages and more lines of code, the presence of semantic tags helps us orientate ourselves.




2. Help your site be accessible

• There is a considerable amount of users that depend on a screen reader software to navigate the internet and only surf the internet through the use of the keyboard.


• So making sure that screen readers can read each element, and that each of them can be accessed through the keyboard is ESSENTIAL. We have to code for all users.


• Semantic HTML is not only about using the new semantic tags, but about using the correct tags for each element, so that it is easy to navigate for all users.



3. Improve your SEO positioning

• Your SEO positioning can be affected, positively or negatively depending on factors such as: the way in which the content is written, a ‘responsive’ design or that the site is accessible.


• In the case of Google, they use an algorithm that analyzes the code of our website, and uses the markup and the labels used to better understand the purpose of the page.


• In this way, if we use a semantic mark we will facilitate the task to the positioning algorithm helping us to reach more users. And in turn, our website will be more accessible.


• The bottom line is that learning semantic markup will make your life easier and your code better.



So what are semantic elements good for?

As their name implies, semantic tags are only good for semantic purposes. They’re all block-level elements that will render as expected, regardless of their HTML tag. They have other important benefits that we’ll list below, but if you read about HTML5 semantic elements on the web, you’ll often find this advice:

• Don’t spend too much time setting semantic elements at the detriment of more important tasks.
• Which is fair. After all, semantic elements don’t affect your site’s performance in search engines, and your clients and website visitors probably won’t notice them.
• But once you read about how HTML5 affects accessibility (below), you might rethink your site structures and consider semantic elements an important — if not mandatory — aspect of your web design process.



Semantic elements’ benefits for designers and developers

• HTML5’s semantic elements help structure the code we create, making it more readable and easier to maintain.
• They help us think about the structure of our dynamic data, and to choose titles’ hierarchy properly.
• They help us differentiate the semantic elements of our markup from the ones we use solely for layout.
• And finally, HTML5 semantic elements push us to learn the meanings of HTML elements and better understand our audiences, particularly those who live with disabilities.



Semantic elements’ benefits for accessibility

1. For sighted users, it’s easy enough to identify the various parts of a website. Headers and footers, menus, and form elements are all immediately, visually apparent.

2. But for a machine like Google’s spiders, or a screen reader, these visual semantics aren’t so obvious.

3. By defining block-level elements as semantic elements, we tell the machines what they are, so the machines can render elements appropriately. For example, we no longer declare italic elements with an <'i> for “italics,” (which is a purely visual change, without intrinsic meaning) but with an <'em>, for “emphasize.”

4. On a screen, the browser will display text wrapped in an <'em> in italics. But on an audio device for the visually impaired, the text will be pronounced with a corresponding emphasis, just like a friend would say it.






HTML5 Advantages and Disadvantages

• HTML5 is the fifth new revision of the hypertext markup language, which is the code which is used to describe webpages. It contains three elements: the HTML code, which offers structure; Cascading Style Sheets (CSS), which provides the presentation elements; and JavaScript, which allows the website to operate.


• The goal of HTML5 is to deliver just about everything you’d ever want to do with a website without the requirement of additional plugins for the browser. It allows for the inclusion of apps, animation, movies, and music. Most browsers include support for HTML5 already, though different browsers may support different things.


• If you’re thinking about website creation, then HTML5 is a language that you’re probably going to use anyway. Here are the advantages and disadvantages you will be facing if you follow through with that decision.



Get JOB Oriented HTML Training for Beginners By MNC Experts
• Instructor-led Sessions
• Real-life Case Studies
• Assignments
Explore Curriculum

List of the Advantages of HTML5

HTML5 isn’t a proprietary code.

You are not required to pay royalties if you decide to use HTML5 for your website. It’s cross-platform, which means you can use it on virtually any device. It works the same whether you access a website through a desktop, a laptop, a smartphone, or even your television. As long as the browser you are using supports HTML5, then there is a good chance that it will work as it should.




It provides audio and video support.

Through the use of the CANVAAS element, you are able to run a lot of different components through your website that used to require an embedded application or installed software on the user side. That means HTML5 allows you to generate dynamic graphics, incorporate online games, and use interactive video. There are even offline games and video that are now possible thanks to what HTML5 provides.




The coding with HTML5 is clear and consistent.

If you grew up in the 1990s and learned coding then, you will appreciate the cleanliness of HTML5’s coding profile. It is simple, straight-forward, and very easy to read. You can quickly separate the content from the style, making it easier to compose code that is descriptive and clear. It doesn’t take long for new coders to learn the language either with this structure, which means anyone with a passion in this area can follow it.




There is more consistency with websites because of HTML5.

You’ll still find various iterations of the different HTML versions sprinkled throughout the internet. As more websites come over to HTML5, however, you’ll see from a user standpoint that there is much more consistency with the internet experience from the user perspective. Many websites are even using similar code to accomplish very different goals, which quickens the loading experience without duplicating it for users. This also makes it much easier for developers to understand one another from a structural standpoint.




There are more page layout elements available for your content.

If you’ve grown familiar with the older versions of HTML, then you know what your options are already: Div, Heading, Paragraph, and Span. With HTML5, you’ve got a lot of elements to play around with when designing your page layouts. Headers, footers, areas, and sections are all available to you. That makes it possible to develop a page with representative mark-ups that guide users through the purpose of the content they are encountering.




It offers search engine optimization benefits.

As late as 2010, it was possible to generate some solid organic results from search engines by stuffing a ton of keywords into your content. If you assigned the right design elements to distinguish yourself from the competition, you could almost guarantee a top ranking for clicks. Today’s SEO is more about value than anything else, which HTML5 complements nicely. Because you can construct semantically with this version, you’re able to maintain your coding with higher levels of reliability. That means real content, not repetitive content, pushes you higher in the rankings, creating the potential for higher conversions.




HTML5 requires less maintenance than other options.

HTML5 utilizes an open-source programming language that is almost universally known. That means you can find the support you need for troubleshooting online on your own. It also means that you’ll be going through fewer maintenance issues over time because updates to the coding can be updated in real-time. If you have an app that is live on the app store, you don’t need to resubmit your product. Just update the code and it will populate itself to those who are using your product.




The storage options with HTML5 are more reliable.

With HTML5, you have the ability to store user-side data temporarily within a SQL database. That moves you away from the need to incorporate cookies, which is a definite advantage thanks to changes in privacy laws in Europe. You’ll also find that many users prefer being able to use a website that offers an offline application cache, since they can reload previous websites they have visited – even if they happen to be offline at that time.




It eliminates the need for multiple developments.

From a business perspective, HTML5 is all about saving you time and money. Because it is able to be deployed across multiple platforms, you are no longer forced into a world where multiple code variations are required to make your business available to customers. You can develop once, using the same code, while being able to approach multiple markets. That means your lifetime costs for development can be much less compared to how previous structures were implemented.




All compatible browsers collect and use data.

When you’re using HTML5 from a mobile perspective, you still have the ability to collect useful data, collate it, and then use it to reach your metrics and goals. That means you can have multiple people using multiple devices and different browsers while knowing that your results are going to be the same. The user experience may be slightly different with each browser, though the HTML5 experience is virtually the same for anyone on any compatible device and browser.




It performs well with excellent consistency.

With HTML5, you’re eliminating the need to have plugins downloaded to play games or interact with your website. Remember when you’d need to click on that “update Flash” link on a website? That issue goes away. Although not every browser will support every possible feature available within the language of HTML5, you’ll find that users are willing to avoid small hiccups in functionality because of the ease of access that is provided with this efficient coding language.




It offers a modern user experience.

If you were to directly compare HTML5 with WebGL or platform native development, you might find that the performance is not as strong when compared to other available options. The frame rates for graphics are where they need to be. The animation is crisp and pure, eliminating the latency sometimes seen in previous versions. Video and sound are good as well. It may not be a complete replacement of all platforms. It is an excellent all-around alternative to considered.




List of the Disadvantages of HTML5

There are different video supports for HTML5. No one could really agree on what the standard video support should be within HTML5. That means there is a hodge-podge of different video supports out there today that are based on the browser you prefer to use. There are three primary video formats currently used: Ogg Theory, H.264, and VP8/WebM. The first is supported by everything except Internet Explorer. The second is supported by everything except Firefox. As for the third, it is fully supported by everything, though it may require a manual installation.



It requires modern browsers to access it.

If you have users trying to access your website through an older browser, then you’re not going to be able to reach them. There is a definite lack of compatibility with Internet Explorer which must be addressed. From a business perspective, if your website visitors are not able to access a fully functional website, that creates a problem. They’re not going to blame their older browser or IE. They’re going to blame you.




There are media licensing issues which must be considered.

Your rich media is offered in compressed, multiple formats because of the wide range of browser compatibility you might encounter. That means there are media licensing issues which you must take into consideration. If you’re using multiple formats for your media and paying for your licenses, you’ll need to pay for multiple audio and video licenses to ensure all your needs are covered. That also means you’ve got more coding work to do.




Multiple device responsiveness can be a headache.

The goal of creating a modern website is to have it look the same, no matter what device is being used or what browser is preferred by the user. Many templates allow for automatic responsiveness, which reduces the need for HTML5 coding knowledge, though it does cause many websites to look the same. If you’re developing a website, you must view your content on all device types and browsers to ensure it looks the same because there is always a chance that it won’t render as it should.




The language of HTML5 is always a work in progress.

Although some may see this as an advantage, the constant development of the actual language contained in HTML5 requires you to be on your toes. The language itself is quite stable, which means you may find yourself with unexpected changes in your coding that render your website useless until you get them fixed. In theory, anything could change at any time. In reality, this is more of a threat than a true disadvantage at the moment, though it must be taken into consideration.




Gaming struggles with JavaScript under HTML5.

JavaScript is the only scripting language of HTMl5. It is a very capable language, ideal for numerous applications. From a gaming perspective, however, there is a lack of features which are necessary for a strong gaming experience. Custom name spaces, member access, interfaces, and inheritance all struggle under JavaScript. There are plenty of work-arounds available which are suitable to get your work done. It is not, however, a first-choice language option from a purely gaming standpoint.




There are zero good IDEs available in HTML5.

Although this disadvantage may change in the future, the integrated development environments available with HTML5 are average at best. If you know what you’re doing, then just do your thing and development testing will be fine. For beginners or coders who haven’t been in the game for a while, you’ll find that there aren’t many good processes available to you for asset integration. It’s a bit of a seat-of-your-pants experience, even though it was initially released in 2014.




If you’re getting into website development or looking for ways to update your older site, then HTML5 is going to be the most efficient option available to you. Although it may not be perfect for every possible solution, you’ll find that the advantages and disadvantages of HTML5 limit the negatives, accentuate the positives, and give you a simple platform that highlights all of your strengths.



HTML Sample Resumes! Download & Edit, Get Noticed by Top Employers! Download

Conclusion

In this article, we discussed what HTML semantics tags are and what the several advantages of using it are. This guide was created to offer a thorough understanding of how semantics in HTML can improve the structure of web pages.