HTML Tutorial: Introduction of the Non-Semantic Tags

HTML Tutorial: Introduction of the Non-Semantic Tags

byRAYS CODING -
0
In this HTML tutorial, we will discuss the HTML non-semantic tags. In this article, we will discuss how to use semantic tags in HTML.

HTML TUTORIAL

Non-Semantic tags

HTML non-semantic tags are completely different from semantic tags, non-semantic tags do not provide additional information about the content of the web page like HTML semantic tags.

Advantages of Non-semantic Tags

Flexibility:- You can use non-semantic tags in groups without any limitation and can also do styling.

Simple Structure:- These tags are very easy to use, although they do not have any specific meaning, so you can use them wherever you want.

Custom Styling:- CSS can be easily applied on non-semantic tags as per the need and JavaScript can also be applied.

HTML-TUTORIAL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Non-Semantic Example</title>
    <style>
        body{ background: #ce04e9; }
        .header_container { background-color: lightblue; padding: 10px; }
        .content_conainer { background-color: lightgray; padding: 10px; }
        .footer_conainer { background-color: lightgreen; padding: 10px; }
    </style>
</head>
<body>
    <div class="header_container">
        <h1>My Website</h1>
    </div>
    <div class="content_conainer">
        <p>Welcome to my website. This is a simple example of using non-semantic tags.</p>
    </div>
    <div class="footer_conainer">
        <p>© 2024 My RAYS CODING</p>
    </div>
</body>
</html>


Disadvantages of Non-semantic Tags

Lack of Meaning:- The content of non-semantic tags does not have any clear meaning, due to which it is very difficult for search engines to understand the content of the website, and what type of web content is, like which is a paragraph tag, which is a heading tag.

Harder Maintenance:- It is very difficult to maintain the code due to the presence of many non-semantic tags

SEO Impact: Search engines give priority to content whose meaning is clear. Using too many non-semantic tags also affects a website's SEO ranking.

Some Non-Semantic Tags

<div> Tag:- The div tag is a block-level tag used to group other tags and elements together. The div tag is used to create sections or divisions on a web page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Non-Semantic Example</title>
    <style>
        body{ background: #ce04e9; }
        .header_container { background-color: lightblue; padding: 10px; }
    </style>
</head>
<body>
    <div class="header_container">
        <h1>My Website</h1>
    </div>
</body>
</html>

<span> Tag:- Span tag is an inline tag inside that we can use to group text and elements. Its main use is to apply CSS or JavaScript without breaking the content..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Non-Semantic Example</title>
</head>
<body>
    <p>This is a <span class="highlight">highlighted</span> word in a sentence.</p>
</body>
</html>

<b> Tag:- It is used to bold the text without writing additional CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Non-Semantic Example</title>
</head>
<body>
    <p>This is <b>bold</b> text.</p>
</body>
</html>

<i> Tag:- <I> Tag is used to convert the text to italics. it is used to italicize a particular content with the help of a tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Non-Semantic Example</title>
</head>
<body>
    <p>This is <i>italicized</i> text.</p>
</body>
</html>

<font> Tag:- Font tag ka upyog text ke "font face", "size", "color" aadi ko badlane ke liye kiya jaata hai. waise iska use ab kam kiya jaata hia.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Non-Semantic Example</title>
</head>
<body>
    <p><font face="Arial" size="3" color="red">This is styled text.</font></p>
</body>
</html>

Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement