HTML Semantic Elements Article, Aside, Details, Summary, Figcaption Tags Part-1 By #BKTutorial

 

Semantic Elements

What are Semantic Elements?

It is element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span>

Examples of semantic elements: <form>, <table>, and <article>

Semantic Elements in HTML

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

1)      <article>

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.

Examples:  Blog post | Newspaper article | Forum post

2) <aside>

 The <aside> tag defines some content aside from the content it is placed in.

 The aside content should be indirectly related to the surrounding content.

3) <details> & <summary>

The <details> tag specifies additional details that the user can open and close on demand.

The <details> tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within.

The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.

4) <figcaption>

The <figcaption> tag defines a caption for a <figure> element.

     The <figcaption> element can be placed as the first or last child of the <figure> element.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>HTML Semantic Elements</title>

</head>

<body>

<h2> Article Tag </h2>

<article>

<h4>BKTutorial</h4> 

<p>We Inspire New Ideas !!

In this Channel we are uploaded HTML | HTML 5 | CSS | CSS3 | JavaScript | Java | J Query | Python Turtle Graphics |Adobe XD | VFX (Green Screen Effects) | Filmora Effects Videos | Sony Vegas Pro Effect etc. Regarding Video Tutorials in Easy steps / Easy way. </p>

<h4>Channel</h4> 

<p>

In this Channel we are uploaded HTML | HTML 5 | CSS | CSS3 | JavaScript | Java | J Query | Python Turtle Graphics |Adobe XD | VFX (Green Screen Effects) | Filmora Effects Videos | Sony Vegas Pro Effect etc. Regarding Video Tutorials in Easy steps / Easy way. </p>

</article> 

<h2>Aside</h2>

<p>In this Channel we are uploaded HTML | HTML 5 | CSS | CSS3 | JavaScript | Java | J Query | Python Turtle Graphics |Adobe XD | VFX (Green Screen Effects) | Filmora Effects Videos | Sony Vegas Pro Effect etc.</p>

<aside>

<h4>BKTutorial</h4> <p>In this Channel we are uploaded HTML | HTML 5 | CSS | CSS3 | JavaScript | Java | J Query | Python Turtle Graphics |Adobe XD | VFX (Green Screen Effects) | Filmora Effects Videos | Sony Vegas Pro Effect etc.</p>

</aside>

<h2> Details & Summary </h2>

<details> 

 <summary>BKTutorial</summary>

 <p>In this Channel we are uploaded HTML | HTML 5 | CSS | CSS3 | JavaScript | Java | J Query | Python Turtle Graphics |Adobe XD | VFX (Green Screen Effects) | Filmora Effects Videos | Sony Vegas Pro Effect etc.</p>

 </details> 

<h2> FigCaption</h2>

<img src="bkt.jpg" height="300px" width="500px">

<figcaption>BKTutorial We Inspire new ideas!!</figcaption>

</body>

</html>