HTML 5 most useful tags and attributes with example

Shyam Sir 3/26/2023

HTML5 is the latest version of the Hypertext Markup Language (HTML) and has introduced several new tags and attributes. Here are some of the most commonly used HTML5 tags and attributes with examples:

< header> - Used to define a header section of a webpage.


Example: 
<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<nav> - Used to define a navigation section of a webpage.

Example - 
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<section> - Used to define a section of a webpage.

Example - 
<section>
  <h2>About Us</h2>
  <p>We are a company that specializes in web development.</p>
</section>

<article> - Used to define an article section of a webpage.

Example 
  <article>
  <h2>How to Make Pancakes</h2>
  <p>Here is a recipe for making delicious pancakes.</p>
</article>

< footer> - Used to define a footer section of a webpage.

Example 
  <footer>
  <p>Copyright © 2023 My Website</p>
</footer>

Attributes:

Now we need to know to some very use full and common attributes.

"id" - Used to uniquely identify an element

For example- 
<div id="myDiv">
  <p>This is my div.</p>
</div>

You can use ID for write css and select element in js
or jQuery with #myDiv like this.

class - Used to define a class for an element.

Example: 
<p class="myClass">This is my paragraph.</p>
You can use ID for write css and select element in js
or jQuery with .myClass like this.

src - Used to specify the source of an image.

Example: 
<img src="myImage.jpg" alt="My Image">

href - Used to specify the destination of a link.

Example: 
<a href="https://www.example.com">Visit Example.com</a>

data-* - Used to store custom data private to the page or application.

Example: 
<div data-id="12345">This is my custom data.</div>

// Get the element by its ID
const myElement = document.getElementById('myDiv');

// Get the value of the data-id attribute
const dataIdValue = myElement.getAttribute('data-id');
console.log(dataIdValue); 
// Outputs the value of the data-id attribute

jQuery 
// Get the element by its ID
const myElement = $('#myDiv');

// Get the value of the data-id attribute
const dataIdValue = myElement.data('id');
console.log(dataIdValue); // Outputs the value of the data-id attribute
Tag -
html tags and attributes,html tags with examples,all html tags and attributes with example,html tags and attributes list with example,html tags and attributes list with examples,useful html tags and attributes with example,all html tags and attributes with examples,html all tags with example,html attributes,html tags,input tag attributes with examples,html tags and attributes in tamil,basic html tags and attributes,html tags with example. Hash tag - #HTML5 #webdevelopment #tags #attributes #header #nav #section #article #footer #id #class #src #href #data #javascript #jquery

Post a Comment

0 Comments