Know About Semantic Element

Vishwajeet Kumar Singh — Mon, 04 Dec 2023 10:41:46 GMT

What is Sematic Element?

An Element which clearly describe it's content by it's tag name is known as Semantic Element.

For example :-

, etc

It will be more clear when code will be provided.

Why do we need to use Semantic Element or Tag?

Improved readability and maintainability.
Enhanced accessibility.
Better Search Engine Optimization.

Some Semantic Tags are :

Now I am providing Code using above Semantic Elements.

Hope so this will be helpful for you.

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Let's Starttitle>
head>
<body>

    <header>
        <h1>This is a Headerh1>
    header>

    <nav>
        <ul>
            <li><a href="#">Nav Link 1a>li>
            <li><a href="#">Nav Link 2a>li>
            <li><a href="#">Nav Link 3a>li>
        ul>
    nav>

    <main>
        <article>
            <h2>Article Titleh2>
            <p>This is the content of the article.p>
        article>

        <section>
            <h2>Section Titleh2>
            <p>This is the content of the section.p>
        section>
    main>

    <aside>
        <h2>Aside Contenth2>
        <p>This is additional content placed in the aside.p>
    aside>

    <footer>
        <p>This is the footer of the page.p>
    footer>

    <details>
        <summary>Detailssummary>
        <p>This is more information that can be toggled.p>
    details>

    <figure>
        <img src="pic1.jpg" width="200px" height="200px" alt="Example Image">
        <figcaption>Caption for the imagefigcaption>
    figure>

    <mark>This is highlighted text using the mark element.mark>

    <time datetime="2023-12-04">December 4, 2023time>

body>
html>

Know about Comment, Tags & Element in HTML.

Vishwajeet Kumar Singh — Sun, 03 Dec 2023 17:02:05 GMT

In this article I will discuss about Comment, Tags & Element in html.

Comment

Here the word "Comment" itself saying everything i.e when we want to explain our code for furture understanding but don't want to display on our web page, then we use comment. For this we have to press " ctrl+/ " (where we want to comment).

In above pic "This is Paragraph" is comment. And in below pic we can see that the comment is not showing on our web page.

Element

The collection of Opening and closing tag with content between both tags is known as element.

Thanks for your time.

Setting up the first file in HTML with VS code editor.

Vishwajeet Kumar Singh — Sat, 02 Dec 2023 16:38:13 GMT

In this blog I will discuss how to set up file in HTML with the help of VS code editor and render it on our browser. Here I am considering that we all know basics about VS code and HTML.

I will discuss step by step :-

Step- 1

Create empty folder, it can be anywhere in our system. Here I am creating it on my Destop.

Step- 2

Now we have to open VS code and have select "open folder" and open the folder that we have created in step- 1.

Here my folder name is "First Project".

After selecting folder, click on "Select Folder".

Step- 3

Now our folder is on VS code Editor, we can see it on left side of image provided below with folder name "First Project".

Now we have to move our mouse on folder name, and we will find image like provided below.

Now Click on File icon and provide name of file with extension (.html).

Here I Provided file name "firstProject.html" with extension html.

Step- 4

Till now we learn how to create html file in VS code. Now we will render that html file on our browser.

By selecting our created file on VS code, we have select "shift + ! " to get boilerplate. Image provided below.

Select " ! " .

Step- 5

It Look like

Now we can change title and provide content in body.

Step- 6

Now click on "Go Live" i.e on Bottom-right side.

Now we created html file and render it on our browser.

#Full Stack Web Development

Know About Semantic Element

What is Sematic Element?