Tips For Writing Semantic Elements

Introduction

In this article, we are going to explain elements and tags, semantic elements in detail, their types, why there is a need to be used, and lastly some tips given for writing semantic elements.

What are Semantic elements?

HTML5 (Hypertext Markup Language) has introduced a set of semantic elements that help developers to define the structure of a web page. Semantic element means elements with their meaning. HTML semantics refers to the tags that provide meaning to an HTML page rather than just presentation. And semantic tags also help search engines target your web page's content accurately.

Example of semantic elements are <form></form>, <table></table>, and <image></image>.

What are Non-Semantic elements?

Non-Semantic elements don't define anything about their content, in simpler words, we can say that they tell nothing about their content.

Example of non-semantic elements are <div></div>, and <span>

What is the difference between elements and tags?

Element- An element refers to the entire entity that is defined by an HTML tag, including the opening tag, any attributes, the content of the tag, and the closing tag.

Example <h1> element contains the opening tag <h1>, any attributes like class or id, the content of the tag (such as text or other HTML elements), and the closing tag </h1>.

Tag- A tag refers to the opening and closing parts of an HTML element.

Example <h1> tag is used to define a heading on a web page, and it consists of the opening tag <h1> and the closing tag </h1>.

Understanding the basic semantic elements

The following HTML elements can be used to break your page into identified parts.

<header> It defines a header for a web page.
<nav> It defines a container for navigation links.
<section> This defines a section on a web page.
<article> This element contains the main part, containing information about the web page.
<aside> The <aside> content is often placed as a sidebar in a document.
<footer> It defines a footer for a document or a section.

Let's create the basic structure of a web page by using semantic tags,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic structure of HTML page</title>
    <!-- to import css file link is used -->
    <link rel="stylesheet" href="e.css">
</head>
<body>
    <!-- head of html page -->
    <header class="header">
        Header
        <!-- nav is used for navigation bar -->
        <nav class="nav">
            Nav
        </nav>
    </header>
    <!-- main part of html -->
    <main class="main">
        Main
        <article class="article">
            article
            <section class="section-first">section-first</section>
            <section class="section-second"> section-second</section>
            <section class="section-third"> section-third</section>
        </article>
    </main>
    <!-- footer of the page -->
    <footer class="footer"> footer
        <nav class="nav">nav</nav>
    </footer>
</body>
</html>

Now, we add styling to this HTML page.

* {
    color: rgb(0, 0, 0);
    font-weight: bolder;
    font-size: x-large;
    text-align: center;
}
.header {
    background-color: rgb(219, 171, 171);
    width: 744px;
    border: 3px solid rgb(159, 0, 0);
    padding: 19px;
    margin: 10px;
}
.nav {
    background-color: rgb(219, 171, 171);
    width: 500px;
    border: 3px solid rgb(159, 0, 0);
    padding: 19px;
}
.main {
    background-color: rgb(219, 171, 171);
    width: 744px;
    border: 3px solid rgb(159, 0, 0);
    padding: 19px;
    margin: 10px;
}
.article {
    background-color: rgb(108, 104, 104);
    width: 500px;
    border: 3px solid rgb(50, 36, 36);
    padding: 19px;
}
.section-first {
    padding: 19px;
    background-color: rgb(102, 97, 153);
    width: 400px;
    border: 3px solid rgb(10, 1, 112);
}
.section-second {
    padding: 19px;
    margin-top: 10px;
    background-color: rgb(102, 97, 153);
    width: 400px;
    border: 3px solid rgb(10, 1, 112);
}
.section-third {
    padding: 19px;
    margin-top: 10px;
    background-color: rgb(102, 97, 153);
    width: 400px;
    border: 3px solid rgb(10, 1, 112);
}
.footer {
    background-color: rgb(219, 171, 171);
    width: 744px;
    border: 3px solid rgb(159, 0, 0);
    padding: 19px;
    margin: 10px;
}

Output

Html_layout_image

Why Semantic Elements Matter for Web Design?

The are several advantages of using semantics tags in HTML.

Accessibility- When you properly label aspects of your pages as titles, headings, paragraphs, and lists, you make it easier for screen readers and other assistive technologies to parse and present the content in a form that a disabled person can understand. It offers a better user experience.
Search Engine Optimization- The semantic HTML tags help search engines and other user devices determine the importance and context of web pages.
Repurposing- Semantic HTML takes advantage of the fact that a news item will always be a news item, and an archive will always be an archive, no matter where they are positioned on the page.
Increases readability- The pages made with semantic elements are much easier to read.
Convey information- A semantic Web allows data to be shared and reused across applications, enterprises, and communities. Semantic elements convey extra information about the content like telling it's a paragraph and telling it's a heading.

Choosing the Right Semantic Element

In the below section, some tips are given with respect to writing semantic elements.

For styling, use CSS, not HTML tags

As we know web browsers apply styling to some semantic tags for example the text within a <a> tag is usually blue and underlined, it doesn’t mean HTML tags are supposed to be used to style your text. You wouldn’t use a <a> tag for a “non-link” text just to make it blue and underlined, you should not use other semantic tags for purely stylistic purposes.

Here are some more typical examples of using semantic tags incorrectly

Using <h1> to <h6> tag for the text that is not a heading with the purpose of changing its font size is incorrect. Using <blockquote> just to indent text that is not a quotation.
Using <strong> or <em> just to add bold or italics respectively to a text that doesn't need emphasis can be confusing instead of this CSS(Cascading Style Sheets) Font property can be used.
Using <br> break tag to add some space between two sections is not a solution instead of this CSS Box-Modelling property can be used.

Arrangement of elements

While making a web page we need a header for heading a text HTML provides us with six types of headers from h1 to h6. If some of them are being used together on our web page then they must be nested according to their size, and importance at that time. In simpler words, the structure of headings should create a logical hierarchy. By this, the text becomes easier to read and understand by the reader as well as search engine optimization. Let's have a look at the given below example.

Don't copy the code

Your code implementation must be real it shouldn't be copied from any layout and it should also follow the semantic structure of the page.

Media Type

HTML5 also includes three tags that identify the type of media served up between the tags. They convey the extra information with respect to their tag. Like in the first, they signal to the browser the need to queue up a specific technical resource such as a video playback engine. And second, they assign semantic meaning to the content.

<audio> Used to add audio content to a document and to allow the browser to pick the best option based on the visitor’s device and browser.
<video> It is used to add video content to an HTML document.
<image> The image element is used to allow a web browser to pick the best image from the available options.

Correlation Tags

Several HTML elements are used to signal a correlation between multiple elements and tell the browser that the items are related to each other.<ol> and <ul> are the two tags that are used for listing the <ol> tells the browser that the items on the list need to appear in a specific order. Meanwhile, unordered lists <ul> are used to signal a relationship between the items on the list and to indicate that they do not need to be understood in a specific order.

Conclusion

By using semantic tags correctly, we can improve the accessibility, readability, and search engine optimization of our web pages. It is important to remember to use CSS for styling purposes and to arrange elements in a logical hierarchy. By following these best practices, we can create web pages that are not only visually appealing but also functional and user-friendly.

FAQ's

Q 1- How can semantic elements improve accessibility for users with disabilities?

A- Users who are blind or visually impaired often use screen readers to navigate web pages. Semantic elements provide more context and structure to the content, making it easier for screen readers to identify and interpret the information.

Q 2- How can you test and ensure that your website is using semantic elements correctly?

A- There are mainly two ways to test and ensure that your website is using semantic elements correctly.

Automated testing tools- There are several online tools available that can automatically scan your website's code and identify any errors or warnings related to the use of semantic elements. Like, the WAVE Web Accessibility Evaluation Tool is a popular tool that can help identify potential accessibility issues.
Manual testing- Conducting manual testing involves reviewing your website's code and looking for any areas where semantic elements are not being used correctly. This can be a time-consuming process but can help identify specific areas where improvements can be made.

Q 3- How can you optimize your use of semantic elements for search engine optimization (SEO)?

A- Here are some ways to optimize your use of semantic elements for SEO.

Use descriptive tags- Use descriptive tags such as <header>, <footer>, <nav>, <article>, and <section> to help search engines understand the structure and content of your website. Avoid using non-semantic tags- Avoid using non-semantic tags such as <div> and <span> to structure your website. While these tags are still commonly used, they do not provide any semantic meaning to search engines.

Q 4- How do you determine which semantic elements to use for different types of content on your website?

A- Test and validate your website using tools such as the W3C Markup Validation Service and the Accessibility Insights tool to ensure that your website is using semantic elements correctly and is accessible to all users.

Q 5- How do semantic elements relate to the overall structure and organization of a web page?

A- Semantic elements are often used to define the different sections of a page, such as the header, main content, footer, and navigation. This helps to create a clear visual hierarchy and makes it easier for users to find the information they need. For example, using the <nav> element to define the navigation section of a page allows assistive technologies to quickly identify and navigate to the links within that section.