HTML 5 ELEMENT - FULL EXPLANATION

HTML 5 Element

The HTML file is made up of elements. These elements are responsible for creating a web page and defining the content in that webpage.


HTML 5 ELEMENT -  FULL EXPLANATION

  • HTML elements are the most basic building blocks of any web document. The elements are identified by the browser which provides the contents of the element to the users in a predefined manner.
  • HTML documents are created by HTML elements.
  • HTML elements begin with an open tag and end with a close tag and content is written between them:
HTML elements are the most basic building blocks of any web document. The elements are identified by the browser which provides the contents of the element to the users in a predefined manner.

  • All tags are predefined and control the structural properties of the webpage.
  • However, some HTML elements have presentational or cosmetic uses. HTML elements are increasingly used for presentation and design purposes.
  • Cascading style sheets (CSS) are used for the purpose of presentation and design.

NESTED HTML ELEMENTS


  • HTML elements can be nested (elements can include elements).
  • All HTML documents contain nested HTML elements.

<!DOCTYPE html>

    <html>

             <body>

             <h1>My First Heading</h1>

             <p>My first paragraph.</p>

             </body>

   </html>{codeBox}


EMPTY HTML ELEMENTS


  • HTML elements with no content are called empty elements.
  • Without the close tag, <br> is an empty element (the <br> tag defines a line break).
  • Empty elements can be "closed" in the open tag like this: <br />.
  • HTML 5 does not require closing empty elements. But if you want strict validation, or you need to make your document readable by the XML parser, then you should turn off all HTML elements.

REMOVED ELEMENTS FROM HTML 5


There are several elements that have been removed from HTML 5:



Removed Elements

Use Instead Elements

<acronym>

<abbr>

<applet>

<object>

<basefont>

CSS

<big>

CSS

<center>

CSS

<dir>

<ul>

<font>

CSS

<frame>


<frameset>


<noframes>


<isindex>


<strike>

CSS, <s> or <del>

<tt>

CSS



NEW ADDED ELEMENTS IN HTML 5:


<article>:


In HTML 5 the <article> tag is used to denote an article.{codeBox}


<aside>:


In HTML 5, the <aside> tag is used to describe the main object of a web page in a small way like a highlighter. The <aside> tag mainly contains author information, links, related content, etc.{codeBox}


<figcaption>:


In HTML 5, the <Figcaption> tag is used to set the caption of a figure element in a document.{codeBox}


<figure>:


In HTML 5, the <figure> tag is used to add self-contained content such as illustrations, diagrams, photos, and codes list to a document. It is related to the main flow but it can be used in any situation of a document.{codeBox}


<header>:


This includes the header as well as other content, such as navigation links, table of contents, etc.


In <Footer> HTML 5 , the <footer> tag is used to define the footer of the HTML document. This section contains footer information (author information, copyright information, carriers, etc.). The footer tag is used within the body tag. The <footer> tag is new in HTML 5. The footer element requires the start tag as well as the end tag.{codeBox}


<main>:


This deletes the main content of a document or web app.{codeBox}


<mark>:


In HTML 5 the <mark> tag is used to define marked text. It is used to highlight the text part in a paragraph.{codeBox}


<nav>:


The <nav> tag is used to declare navigational sections in HTML 5 documents.{codeBox}


<section> :


It demarcates the thematic set of content.


The <details>: <details> tag is used for content/information that is initially hidden, but can be displayed if the user wants to see it. This tag is used to create interactive widgets that the user can open or close. The content of the details tag appears when the set attributes are opened.{codeBox}


<Summary>:


In HTML 5 the <Summary> tag is used to define the Summary of the <details> element. The <summary> element is used with the <details> element and provides the Summary visible to the user. When the user clicks on Summary, the content inside the <details> element appears which was previously hidden. The <Summary> tag was added to HTML 5. The <summary> tag requires both starting and ending tags.{codeBox}


<time>:


The <time> tag is used to display readable date / time. It can also be used to encode dates and times in a machine-readable form. The main advantage for users is that they can offer to add birthday reminders and scheduled events to their calendar and search engines can generate smart search results.


The full name of the <bdi>: <bdi> tag is Bi-Directional Isolation. It separates one text from another text which can be formatted in different directions. This tag is used when a user generates text from unknown directions.{codeBox}


<wbr>:


In HTML 5 the full name of <wbr> is word break and is used to define a position inside text known as a line break in the browser. It is mostly used when the word used is too long and there is a possibility that the browser may break lines in the wrong place to fit the text.{codeBox}


<datalist>:


The <datalist> tag is used to provide the autocomplete feature in HTML 5 files. It can be used with input tags so that users can easily fill in the form by selecting the data.{codeBox}

 

<keygen>:


In HTML 5 the <keygen> tag is used to specify the key-pair generator field in the form. The purpose of the <keygen> element is to provide a secure way to authenticate users. When the form is submitted, tabs generate two keys, the private key, and the public key. The private key is stored locally, and the public key is sent to the server. The public key is used to create a client certificate for the authenticated user for the future.{codeBox}


<output>:


In HTML 5 the <output> tag is used to denote the result of calculations performed by client-side scripts such as JavaScript.{codeBox}


<Progress>:


It is used to represent the progress of a task. It has also defined how much work is done to download something and how much is left. It is not used to represent Disk space or relevant queries.{codeBox}


<svg>: 


Scalable Vector Graphics {codeBox}


<canvas>:


In HTML 5 the <canvas> tag is used to create graphics on a web page using JavaScript. It can be used to add paths, boxes, texts, gradients, and images. By default, it does not include borders and text.{codeBox}

 

<audio>:


It defines music or audio content.{codeBox}

 

<embed>:


It defines containers for external applications (usually a video player).{codeBox}

 

<source>:


It defines the source of <video> and <audio>.{codeBox}


<track>:


It defines tracks for <video> and <audio>.{codeBox}


<video>:


This defines the video content.{codeBox}



NEW MEDIA ELEMENTS



Tag

Description

<audio>

This defines the audio content.

<embed>

It defines the container for External (non-HTML) applications.

<source>

Defines multiple media resources for media elements (<video> and <audio>)

<track>

Defines text track for media elements (<video> and <audio>)

<video>

It defines video and movie.



AKASH TIMES

I AM AN ENGINEER BY PROFESSION BUT BLOGGER IS MY OLD DAYS DREAM TO CREATE MY OWN SITE FOR THOSE WHO ARE CURIOUS ABOUT MY BIRTHPLACE THEN I AM COMING FROM (INDIA). THE CURRENT CITY LIVES IN NAVI MUMBAI, INDIA

Post a Comment

IF YOU HAVE ANY PROBLEM PLEASE FELL FREE TO CONTACT US BY - AKASH TIMES

PREVIOUS POST NEXT POST