HTML Semantics – Free Tutorial to learn HTML

Introduction of Semantic tags in HTML

HTML Semantic tags introduce meaning to the web page rather than a just presentation.A semantic tag clearly explains its meaning to both browser and a developer.Semantic tags have more advantages over non-semantic tags like semantic tags are of more help to screen readers and they help in code optimization.

Semantic tags:

HTML Semantic tags denote what the content actually is rather than just how they are displayed by a browser.

Semantic elements:

• A semantic element clearly explains its meaning to both the browser and also the developer.
• Eg:<"header">, <"footer">, and <"form"> – Can tell the type of content by the tag name.

Non-semantic elements:

• Unlike semantic elements they don’t have any meaning.
• They can be used with various attributes to mark up the semantics common to a group.
• Following is the list of few non-semantic elements: div, span.
• A Semantic tag clearly explains its meaning to both browser and the developer.
• For example, a developer knows the content inside <"navbar"> are of the navigation bar and the browser knows how to view it.

Various HTML Semantic Tags are:

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

Why Use Semantic Tags:

• By using Semantic tags in the code, provide additional information about that document by explaining the layout and sections of the webpage.
• Semantic elements are of more help to people by using screen readers.
• The additional data provided by semantic tags help screen readers understand the content better and help them to find the different sections within a page efficiently.
• HTML Semantic tags help the browser to find the purpose of the page and its content.
• Semantic tags also help in search engine optimization as they help browsers interpret the content more simply by making the content more adaptive.
• Semantic tags help developers write consistent code.
• Without semantic tags, have to explain ids, classes and use CSS to explain header, footer, and navigation sections.

HTML5 <"section"> Element:

• The <"section"> element explains a section in a document.
• According to the W3C’s HTML5 documentation: “A section is a thematic grouping of the content, typically with a heading.”
• A Web site’s home page could be split into the sections for introduction, content, and contact information.

Example:

HTML5 <"article"> Element:

• The <"article"> element denotes independent,a self-contained content.
• An article should make sense on its own, and it should be possible to read it independently from the rest of a web site.

Examples of where an <"article"> element can used:

• Forum post
• Blog post
• Newspaper article

Example:

Nesting Semantic Elements:

• In the HTML5 standard, the <"article"> element explains a complete, self-contained block of the related elements.
• The <"section"> element is explained as a block of related elements.
• Explanations to decide how to nest elements? No, cannot!
• On the Internet, I found HTML pages with the <"section"> elements containing <"article"> elements, and <"article"> elements containing the <"sections"> elements.
• find pages with <"section"> elements containing <"section"> elements, and <"article"> elements containing <"article"> elements.
• HTML5 <"header"> Element

The <"header"> element denotes a header for a document or section:

The <"header"> element should be used as a container for an introductory content.Can have several <"header"> elements in a one document.

HTML5 <"footer"> Element: The <"footer"> element denotes a footer for a document or section.A <"footer"> element should include information about its containing element.A footer typically contains the author of a document, copyright information, links to terms of use, and contact information, etc.Have several <"footer"> elements in one document.

HTML5 <"nav"> Element: The <"nav"> element explains a set of navigation links.The <"nav"> element is intended for more blocks of navigation links.However, not all links in a document should be inside a <"nav"> element!

HTML5 <"aside"> Element: The <"aside"> element explains some content aside from the content it is placed in ..The aside content should be related to the surrounding content.

HTML5 <"figure"> and <"figcaption"> Elements: In books and newspapers, it is common to have captions with images.The purpose of a caption is to add a visual explanation to the image.With HTML5, images and captions can be grouped into together in <"figure"> elements:

Semantic Elements in HTML5:

Index	Semantic Tag	Description
1.	<"article">	Explain an article
2.	<"aside">	Explain content aside from the page content
3.	<"details">	Explain additional details that the user can view or hide
4.	<"figcaption">	Explain a caption for a <"figure"> element<"/figure">
5.	<"figure">	Denote self-contained content, like illustrations, diagrams, photos, code listings, etc.
6.	<"footer">	Explain a footer for a document or section
7.	<"header">	Denote a header for a document or section
8.	<"main">	Denote the main content of a document
9.	<"mark">	Explain marked/highlighted text
10.	<"nav">	Explain navigation links
11.	<"section">	Explain a section in a document
12.	<"summary">	Explain a visible heading for a <"details"> element<"/details">
13.	<"time">	Explain a date/time

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

1. Clearer code and simpler to maintain: But… Why use certain tags? For example, a <"nav"> tag to contain a navigation bar, if you can use a <"div"> tag.Many of these tags will not represent any change in the distribution of content or in the way in which the text is viewed, but this practice allows our code to make a more sense, and to be closer to the natural language, where every element used the adequate words.In addition, when a project grows, adding more pages and more lines of the code, the presence of semantic tags helps to orient ourselves.

2. Help your site be accessible: There is a considerable amount of users that depend on the screen reader software to navigate the internet and only surf the internet through the use of the keyboard.So making sure that the screen readers can read every element, and that each of them can be accessed through the keyboard is an ESSENTIAL.Have to code for all the users.Semantic HTML is not only about using the new semantic tags, but about using the correct tags for every element, so that it is simple to navigate for all users.

3. Improve the SEO positioning: SEO positioning can be affected, positively or negatively depending on the factors such as: the way in which a content is written, a ‘responsive’ design or that the site is accessible.If we use a semantic mark it will facilitate the task of positioning an algorithm helping us to reach more users.And in turn, the website will be more accessible.The bottom line is that learning semantic markup will make life simpler and the code better.

Advantages:

• Multimedia support
• Short and easy syntax
• Increased security features
• Include a semantic tags
• Cross-platform support

Disadvantages:

• Client-side rendering
• Local storage is little secure
• Various video supports for different browsers
• Media licensing cost
• Doesn’t support the old browsers
• Tough to handle responsiveness on a range of devices

So what are semantic elements good for?

• Semantic tags are exclusively used for semantic purposes, as their name suggests.
• Regardless of their HTML tags, they are all block-level items that will render as intended.
• Avoid wasting too much time setting semantic components at the expense of the most crucial activities.
• After all, the semantic elements don’t affect a site’s performance in search engines, and the clients and website visitors probably won’t notice them.
• But once I read about how HTML5 affects accessibility (below), I might rethink the site structures and consider semantic elements an important — if not mandatory — aspect of a web design process.

Semantic elements’ benefits for the designers and developers:

• HTML5’s semantic elements can help to structure the code, making it more readable and simpler to maintain.
• They help us think about the structure of dynamic data, and to choose titles’ hierarchy properly.
• They help us to differentiate the semantic elements of a markup from the ones used solely for layout.

Semantic elements’ benefits for accessibility:

• For sighted users, it’s simpler enough to identify the different parts of a website.
• Headers and footers, menus, and form elements are all immediately, visually apparent.
• But for a machine like Google’s spiders, or the screen reader, these visual semantics are not so obvious.
• By explaining block-level elements as semantic elements, tell the machines what they are, so the machines can render an element appropriately.
• For example, 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.”
• On a screen, the browser will display a text wrapped in an <"em"> in italics.
• But on an audio device for the visually impaired, the text will be pronounced with the corresponding emphasis, just like a friend should say it.

Conclusion:

HTML semantic tags are and what the few advantages of using it are.This made it offer a thorough understanding of how semantics in HTML can increase the structure of web pages. Whether looking to break into the exciting industry of the web development or a novice looking to advance a career, this is the best time to take the next step toward reaching the goals. The postgraduate program, designed in collaboration with the Caltech CTME, can help to fast-track software development .Experience a unique and expertly-curated learning path for an end-to-end software development learning – with hands-on experience in full-Stack programming to become job-ready.