HTML5 Tags

Standard

Asalamu Alaikum Friends!

Today i am going to talk about HTML5 tags, YES! not all but few which really interests me lot or those tags which if done in simple CSS2 will really take out lots of sweat.

As per the w3schools.com, they give the brief introduction of HTML5 like this:

and if we dig deep we see the browser compatibility like this:

HTML5 Browser Compatibility

It is really awesome, but yeh! compatibility is the issue which some times really frustrates, but don’t worry almost all the browers are updating and soon you will see a great support of HTML5 across the browsers and one more thing IE10 is coming soon and as per the news Microsoft says it will surprise all. Now let us wait for the original release and till then you can test drive it.

OK, I think it is enough intro let me show you the tags which really interests me.

<details></details> & <summary>,/summary> tags. [currently support in Chrome only]

Let me write a small snippet of it and show you how it Looks:

summary
{
    background-color: #3084BD;
    border: 1px solid #2A94CD;
    box-shadow: 2px 2px 10px #03448A inset;
    color: #fff;
    font-family: Segoe UI Light;
    font-size: 15px;
    padding: 7px;
    cursor: pointer;
}

details
{
    width: 90%;
    margin: 10px auto;
    background-color: #f7f7f7;
    border: 1px solid #eaeaea;
    padding: 2px;
    font-size: 12px;
}

and some support css code (Please note it is not part of the above tags, it is just for over all look and feel)


*
{
    padding: 0px;
    margin: 0px;
}

body
{
    width:90%;
    margin:auto;
    font-family: Segoe UI;
    color: #323232;
}

p
{
    padding: 10px;
}

h1
{
    color: #a3a3a3;
    font-size: 40px;
    font-weight:normal;
    padding:10px 0;
    text-transform:uppercase;
}

and complete CSS code


*
{
    padding: 0px;
    margin: 0px;
}

body
{
    width:90%;
    margin:auto;
    font-family: Segoe UI;
    color: #323232;
}

summary
{
    background-color: #3084BD;
    border: 1px solid #2A94CD;
    box-shadow: 2px 2px 10px #03448A inset;
    color: #fff;
    font-family: Segoe UI Light;
    font-size: 15px;
    padding: 7px;
    cursor: pointer;
}

details
{
    width: 90%;
    margin: 10px auto;
    background-color: #f7f7f7;
    border: 1px solid #eaeaea;
    padding: 2px;
    font-size: 12px;
}

p
{
    padding: 10px;
}

h1
{
    color: #a3a3a3;
    font-size: 40px;
    font-weight:normal;
    padding:10px 0;
    text-transform:uppercase;
}

and now let me show you how its HTML code looks like:

<details>
<summary>Shabir Gilkar</summary>
<h1>About Me!</h1>
<p>I am Shabir Gilkar from Srinagar Kashmir, now shifted to Bangalore India.</p>
</details>
    <details>
<summary>What i do?</summary>
<h1>I m doing</h1>
<p>I am working as Sr. Graphics Designer in Aditi Technologies Bangalore, You can reach me at shabirgilkar@gmail.com</p>
</details>

and it display like this, It is almost like accordion.

and next tag about which i would like to discuss is <mark></mark> tag. It is used to highlight any section in sentence.
To make it little interesting i had wrote little css to it. It had support in almost all the latest browsers

mark
{
    padding: 2px;
    border: 1px dotted orange;
}

and the HTML code for this:

Do not forget to get <mark>Milk</mark> from market...!!

and when we display the same in browser it looks like this:

I hope you  all like the above discussed tags and i am looking forward to update this post as i pass through while learning it. Please post your comments/suggestion, and i will be more than happy to receive them. Thanks in advance!

 

Advertisements