Tweet
SIGN UP
MEMBER LOGIN:
TECHNOLOGIES
.NET 4.5
.NET Remoting in C#
Active Directory C#
ADO.NET in C#
AJAX in C#
Algorithms in C#
Android Programming
Articles C#
ASP, JavaScript, CSS
ASP.NET Controls in C#
ASP.NET MVC with C#
ASP.NET Programming
BizTalk Server
C# Assemblies
C# Language
C# Tutorials
C, C++, MFC
Career Advice
Chapters
Cloud Computing
COBOL.NET
Coding Best Practices
COM Interop
Compact Framework
Cryptography C#
Crystal Reports C#
Current Affairs
Custom Controls C#
Databases & DBA
Deployment
Design & Architecture
DirectX C#
Enterprise Development
Error Zone
Exception Handling C#
Expression Studio
F#
Files, Directories in C#
Financial Applications
Games Programming C#
GDI+ & Graphics
Hardware
How do I
HTML 5
Internet & Web
iPhone/iPad
Java
Java and .NET
JQuery
JSP
Leadership
Learn .NET
LINQ with C#
Metro Style Apps in C#
Mobile & Embedded
MonoDevelop
MSMQ in C#
Multithreading in C#
Networking
Office Development
OOP/OOD
Operating Systems
PHP
Printing in C#
Products
Project Management
Reports using C#
Robotics & Hardware
Security in .NET
SharePoint
Silverlight with C#
Smart Devices
Speech in C#
SQL
SQL Server 2012
String in C#
Team Foundation & VSS
Testing
Visual Basic .NET
Visual C#
Visual Studio .NET
Visual Studio 11
Visual Studio 2010
VS LightSwitch 2011
WCF with C#
Web Forms C#
Web Services in C#
WebForms Controls
Windows 8 in C#
Windows Controls C#
Windows Forms C#
Windows Phone in C#
Windows PowerShell
Windows Services in C#
Workflow Foundation in C#
WPF with C#
XAML with C#
XML in C#
XNA with C#
FORUMS
BLOGS
VIDEOS
INTERVIEWS
CERTIFICATIONS
DOWNLOADS
BOOKS
LINKS
NEWS
Learn .NET in 60 days – Part 1 (13 Labs)
Learn MVC (Model view controller) Step by Step ...
Learn C# Corner - Home
Using Border Radius and Gradients in CSS3: Part I
Learn C# Corner - Footer
Learn .NET and C# in 60 Days Lab13(Day 5): - C ...
iPhone 5 First Look
Samsung Galaxy Note Review
WCF - Authentication and Authorization in Ente ...
How to write a good article on C# Corner
Blog
Using "details" tag in HTML 5
Posted by
Vijay Prativadi
in
Blogs
|
HTML 5
on
Feb 05, 2012
Today, in this blog let’s learn one more useful concept "details" tag in HTML5.
Tweet
567
0
0
Introduction
This concept express good look and feel for website.
Question Arises:
What is Details Tag in HTML 5?
In Simple terms "This tag provides an additional amount of information or hit that is required to process some operation by the user. It can be viewed or hidden by user".
So, I think we all are now good to go and implement this concept.
Step 1 :
The Complete Code of Details.html looks like this:
<!
DOCTYPE
html
>
<
html
lang
="en">
<
head
>
<
meta
charset
="utf-8"
/>
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess -->
<
meta
http-equiv
="X-UA-Compatible"
content
="IE=edge,chrome=1"
/>
<
title
>
templates
</
title
>
<
meta
name
="description"
content
=""
/>
<
meta
name
="author"
content
="Vijay"
/>
<
meta
name
="viewport"
content
="width=device-width; initial-scale=1.0"
/>
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<
link
rel
="shortcut icon"
href
="/favicon.ico"
/>
<
link
rel
="apple-touch-icon"
href
="/apple-touch-icon.png"
/>
</
head
>
<
body
>
<
div
>
<
header
>
<
h1
style
="
text-align
: center;
color
: Gray">
Details tag - HTML 5
</
h1
>
</
header
>
<
div
style
="
font-family
: Verdana;
font-size
: 22">
<
details
>
<
p
>
Question Arises:
<
b
>
What is Details Tag - Html 5
</
b
></
p
>
<
p
style
="
color
: Blue">
In Simple terms "This tag provides an
additional amount of information or hit that is requried to process some operation by the user. It can be viewed or hidden by user "
</
p
>
<
p
>
<
ul
style
="
color
:Red"><
li
>
This Tag is only Supported in Google Chorme Browser!!
</
li
></
ul
>
</
p
></
details
>
</
div
>
<
div
style
="
text-align
: center;
font-family
: Verdana;
font-size
: 22">
<
p
>
I hope this article is useful for you....I look forward for your comments and feedback....
Thanks Vijay Prativadi
</
p
>
</
div
>
<
br
>
<
footer
>
<
p
style
="
text-align
:center;
color
: Silver;
font-family
: Verdana;
font-size
: 22">
©
Copyright by Vijay Prativadi
</
p
>
</
footer
>
</
div
>
</
body
>
</
html
>
Step 2 :
The Output of the Application looks like this:
I hope this blog is useful for you. I look forward for your comments and feedback. Thanks Vijay Prativadi..
share this blog :
Year 2012 Development Trends: Vi..
How to add icon to your web page. (FAVICON)
Related Blogs
Heading Footer and Content Grouping Tags in HTML 5
Inline tags for content grouping and linking in HTML 5
details tag in HTML5
HTML tags which are deprecated in HTML5
Output tag in HTML 5
Creating a HTML 5 page using "output" tag
post comment
Sponsored by
Become a Sponsor
More Blogs from this Blogger
Request-Reply Operation Flow Diagrammatical Representation
WCF Architecture Key Notes
How Channel Operates in WCF
Using FUN Keyword Effectively in F# Interrelated Implementation Scenario
Way Along towards F# Introductory Article
BalloonPopupExtender using Ajax Controls
Password Strength Control of AJAX using Bar Indicator and Text
Retrieve database values using Dynamic Keyword in C# 4.0
Flow Diagram of how view is rendered in MVC
What's New in Visual Studio 2011
View All
Latest Blogs
Free Ride is Over for Desktop Developers in Visual Studio 11
DotNet developers most used application/tools launching through 'Run'
80-inch Windows 8 Tablet
Data encapsulation
Option to access the Column Names in Data table
Open multiple windows in browser startup. (Multiple homepages option)
I'm Sorry
const and readonly
Address, Binding and Contract in WCF
JQuery Maxchars Plugin
View All
Sponsored by
Become a Sponsor