SlideShare uma empresa Scribd logo
1 de 9
New Features of HTML 5.1 to
Create More Flexible Web
Experiences
With the release of HTML 5.1 in November 2016,
aptly called as the gold standard by W3C, you are
now empowered with new options to create more
versatile web applications. W3C published its new
HTML 5.1 recommendation to announce that the
HTML specification has been given a major revamp.
We will be discussing some of the new features here
but remember to check browser support as you give
these features a try in production because not all
browsers support all of them.
Making responsive image selection
possible
HTML 5.1 allows you to use <picture> tag along
with the srcset attribute in order to enable you to
do responsive image selection. This tag functions as
an image container for the multiple image resources.
Remember, default image resources need to be
declared as the value of the src attribute within the
<img> tag. And also declare the alternative image
resources as the value of the srcset attribute of
the <img> as well as <source> elements.
Showing and hiding extra information
Now, you can use <details> and <summary>
tags to add extra information in a content piece. By
default this extra information will remain hidden
but if the users are interested to have a look they
have an option to do so. Web development
experts have to place the <summary> tag inside
<details> while they code and the extra
information that they want to hide must be added
after the <summary> tag.
Creating reverse link relationships
With HTML 5.1 you will able to use rev
attribute for the <link> and <a> elements
to specify how your current document is
related to the linked document i.e. it defines
the relationship in the reverse direction.
Creating an empty option
You can create an empty <option> element
which could be defined as the child element of
<select>, <optgroup> or
<datalist> elements. While designing
user-friendly forms, you will find this feature
useful.
Handling figure captions flexibly
In HTML the <figure> element serves as a
container for visuals, e.g. photos, diagrams and
illustrations. The caption or legend of this
<figure> element is represented by the
<figcaption> tag which can appear
anywhere within its <figure> container as
per the new release.
To implement all the new features in your web
application development, get in touch with a
HTML5 Development Service Provider and
create a feature-rich flexible web application.
Originally posted by : https://goo.gl/PTTSUy
Interested To Know More About?
Outsourcing HTML5 Ontwikkeling
Website Ontwikkeling Specialist
Mobiele Applicatie

Mais conteúdo relacionado

Mais procurados

HawkBridge - Picture This! Using CA 2E with Graphical Tools v4
HawkBridge - Picture This! Using CA 2E with Graphical Tools v4HawkBridge - Picture This! Using CA 2E with Graphical Tools v4
HawkBridge - Picture This! Using CA 2E with Graphical Tools v4
Darryl Millington
 
Web development 3
Web development 3Web development 3
Web development 3
pdffromthefuture
 

Mais procurados (14)

Structure Web Content
Structure Web ContentStructure Web Content
Structure Web Content
 
9A0-386 Exam-Adobe Analytics Architect
9A0-386 Exam-Adobe Analytics Architect 9A0-386 Exam-Adobe Analytics Architect
9A0-386 Exam-Adobe Analytics Architect
 
Laying Out Elements with CSS
Laying Out Elements with CSSLaying Out Elements with CSS
Laying Out Elements with CSS
 
Exam 9A0-386 Adobe Analytics Architect Exam
Exam 9A0-386 Adobe Analytics Architect ExamExam 9A0-386 Adobe Analytics Architect Exam
Exam 9A0-386 Adobe Analytics Architect Exam
 
Javascript programming using the document object model
Javascript programming using the document object modelJavascript programming using the document object model
Javascript programming using the document object model
 
Getting Started with your Website
Getting Started with your WebsiteGetting Started with your Website
Getting Started with your Website
 
Html 5
Html 5Html 5
Html 5
 
Domain model
Domain modelDomain model
Domain model
 
ADO.NET Entity Framework DevDays
ADO.NET Entity Framework DevDaysADO.NET Entity Framework DevDays
ADO.NET Entity Framework DevDays
 
HawkBridge - Picture This! Using CA 2E with Graphical Tools v4
HawkBridge - Picture This! Using CA 2E with Graphical Tools v4HawkBridge - Picture This! Using CA 2E with Graphical Tools v4
HawkBridge - Picture This! Using CA 2E with Graphical Tools v4
 
Working with Links
Working with LinksWorking with Links
Working with Links
 
Web development 3
Web development 3Web development 3
Web development 3
 
Formatting text with CSS
Formatting text with CSSFormatting text with CSS
Formatting text with CSS
 
Accemy projects portfolio 20 jan20
Accemy projects portfolio 20 jan20Accemy projects portfolio 20 jan20
Accemy projects portfolio 20 jan20
 

Destaque

Computer Hardware
Computer HardwareComputer Hardware
Computer Hardware
dheeraj87
 
Chfi V3 Module 01 Computer Forensics In Todays World
Chfi V3 Module 01 Computer Forensics In Todays WorldChfi V3 Module 01 Computer Forensics In Todays World
Chfi V3 Module 01 Computer Forensics In Todays World
gueste0d962
 

Destaque (11)

Web Ontwikkelingstrends om naar uit te kijken in 2017
Web Ontwikkelingstrends om naar uit te kijken in 2017Web Ontwikkelingstrends om naar uit te kijken in 2017
Web Ontwikkelingstrends om naar uit te kijken in 2017
 
Waarom is het noodzakelijk om een IoT investeringsstrategie te hebben?
Waarom is het noodzakelijk om een IoT investeringsstrategie te hebben?Waarom is het noodzakelijk om een IoT investeringsstrategie te hebben?
Waarom is het noodzakelijk om een IoT investeringsstrategie te hebben?
 
hydraulics basic level textbook MC 6 (2)
hydraulics basic level textbook MC 6 (2)hydraulics basic level textbook MC 6 (2)
hydraulics basic level textbook MC 6 (2)
 
Eenvoudig ontwikkelen van web applicaties met Javascript Frameworks
Eenvoudig ontwikkelen van web applicaties met Javascript FrameworksEenvoudig ontwikkelen van web applicaties met Javascript Frameworks
Eenvoudig ontwikkelen van web applicaties met Javascript Frameworks
 
Introduction to Algorithms and Asymptotic Notation
Introduction to Algorithms and Asymptotic NotationIntroduction to Algorithms and Asymptotic Notation
Introduction to Algorithms and Asymptotic Notation
 
Mother board
Mother boardMother board
Mother board
 
Computer Hardware
Computer HardwareComputer Hardware
Computer Hardware
 
COMPUTER MEMORY
COMPUTER MEMORYCOMPUTER MEMORY
COMPUTER MEMORY
 
Computer fundamental
Computer fundamentalComputer fundamental
Computer fundamental
 
Chfi V3 Module 01 Computer Forensics In Todays World
Chfi V3 Module 01 Computer Forensics In Todays WorldChfi V3 Module 01 Computer Forensics In Todays World
Chfi V3 Module 01 Computer Forensics In Todays World
 
Divide and Conquer - Part 1
Divide and Conquer - Part 1Divide and Conquer - Part 1
Divide and Conquer - Part 1
 

Semelhante a New Features of HTML 5.1 to Create More Flexible Web Experiences

Semelhante a New Features of HTML 5.1 to Create More Flexible Web Experiences (20)

nothing to share right now here. kindly lkeave this section right away thankuu
nothing to share right now here. kindly lkeave this section right away thankuunothing to share right now here. kindly lkeave this section right away thankuu
nothing to share right now here. kindly lkeave this section right away thankuu
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 
Html5 - Tutorial
Html5 - TutorialHtml5 - Tutorial
Html5 - Tutorial
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
 
Html 5
Html 5Html 5
Html 5
 
CAP 756 UNIT 1.pptx
CAP 756 UNIT 1.pptxCAP 756 UNIT 1.pptx
CAP 756 UNIT 1.pptx
 
Getting started with html5
Getting started with html5Getting started with html5
Getting started with html5
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 
WEB MODULE 1.pdf
WEB MODULE 1.pdfWEB MODULE 1.pdf
WEB MODULE 1.pdf
 
Top 10 major benefits of html 5
Top 10 major benefits of html 5Top 10 major benefits of html 5
Top 10 major benefits of html 5
 
Html 5
Html 5Html 5
Html 5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html 5 few Features and Elements
Html 5 few Features and ElementsHtml 5 few Features and Elements
Html 5 few Features and Elements
 
What is html xml and xhtml
What is html xml and xhtmlWhat is html xml and xhtml
What is html xml and xhtml
 

Mais de Rasin Bekkevold

Mais de Rasin Bekkevold (11)

Multi-Cloud Synergy: Achieving Optimal Efficiency and Cost Savings
Multi-Cloud Synergy: Achieving Optimal Efficiency and Cost SavingsMulti-Cloud Synergy: Achieving Optimal Efficiency and Cost Savings
Multi-Cloud Synergy: Achieving Optimal Efficiency and Cost Savings
 
Benefits of Digital Transformation for Every Business
Benefits of Digital Transformation for Every BusinessBenefits of Digital Transformation for Every Business
Benefits of Digital Transformation for Every Business
 
Hoe AR en VR de ervaringen in de vastgoedsector veranderen?
Hoe AR en VR de ervaringen in de vastgoedsector veranderen?Hoe AR en VR de ervaringen in de vastgoedsector veranderen?
Hoe AR en VR de ervaringen in de vastgoedsector veranderen?
 
3 JavaScript-frameworks die gebruikmaken van op component gebaseerdewebdevelo...
3 JavaScript-frameworks die gebruikmaken van op component gebaseerdewebdevelo...3 JavaScript-frameworks die gebruikmaken van op component gebaseerdewebdevelo...
3 JavaScript-frameworks die gebruikmaken van op component gebaseerdewebdevelo...
 
Waarom Bedrijven Kiezen Voor Drupal Voor De Ontwikkeling Van Futuristische We...
Waarom Bedrijven Kiezen Voor Drupal Voor De Ontwikkeling Van Futuristische We...Waarom Bedrijven Kiezen Voor Drupal Voor De Ontwikkeling Van Futuristische We...
Waarom Bedrijven Kiezen Voor Drupal Voor De Ontwikkeling Van Futuristische We...
 
Vier Ontwerpbenaderingen Om Een Uitstekende User Interface (UI) Te Maken En U...
Vier Ontwerpbenaderingen Om Een Uitstekende User Interface (UI) Te Maken En U...Vier Ontwerpbenaderingen Om Een Uitstekende User Interface (UI) Te Maken En U...
Vier Ontwerpbenaderingen Om Een Uitstekende User Interface (UI) Te Maken En U...
 
How to Resolve Recurring WordPress Problems?
How to Resolve Recurring WordPress Problems?How to Resolve Recurring WordPress Problems?
How to Resolve Recurring WordPress Problems?
 
The Modernization of Application
The Modernization of ApplicationThe Modernization of Application
The Modernization of Application
 
The Difference between HTML, XHTML & HTML5 for Beginners
The Difference between HTML, XHTML & HTML5 for BeginnersThe Difference between HTML, XHTML & HTML5 for Beginners
The Difference between HTML, XHTML & HTML5 for Beginners
 
3 Rules Front End Developers Must Follow!
3 Rules Front End Developers Must Follow!3 Rules Front End Developers Must Follow!
3 Rules Front End Developers Must Follow!
 
9 richtlijnen om op maat gemaakte applicaties te creëren voor een platform sp...
9 richtlijnen om op maat gemaakte applicaties te creëren voor een platform sp...9 richtlijnen om op maat gemaakte applicaties te creëren voor een platform sp...
9 richtlijnen om op maat gemaakte applicaties te creëren voor een platform sp...
 

Último

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Último (20)

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 

New Features of HTML 5.1 to Create More Flexible Web Experiences

  • 1. New Features of HTML 5.1 to Create More Flexible Web Experiences
  • 2. With the release of HTML 5.1 in November 2016, aptly called as the gold standard by W3C, you are now empowered with new options to create more versatile web applications. W3C published its new HTML 5.1 recommendation to announce that the HTML specification has been given a major revamp. We will be discussing some of the new features here but remember to check browser support as you give these features a try in production because not all browsers support all of them.
  • 3. Making responsive image selection possible HTML 5.1 allows you to use <picture> tag along with the srcset attribute in order to enable you to do responsive image selection. This tag functions as an image container for the multiple image resources. Remember, default image resources need to be declared as the value of the src attribute within the <img> tag. And also declare the alternative image resources as the value of the srcset attribute of the <img> as well as <source> elements.
  • 4. Showing and hiding extra information Now, you can use <details> and <summary> tags to add extra information in a content piece. By default this extra information will remain hidden but if the users are interested to have a look they have an option to do so. Web development experts have to place the <summary> tag inside <details> while they code and the extra information that they want to hide must be added after the <summary> tag.
  • 5. Creating reverse link relationships With HTML 5.1 you will able to use rev attribute for the <link> and <a> elements to specify how your current document is related to the linked document i.e. it defines the relationship in the reverse direction.
  • 6. Creating an empty option You can create an empty <option> element which could be defined as the child element of <select>, <optgroup> or <datalist> elements. While designing user-friendly forms, you will find this feature useful.
  • 7. Handling figure captions flexibly In HTML the <figure> element serves as a container for visuals, e.g. photos, diagrams and illustrations. The caption or legend of this <figure> element is represented by the <figcaption> tag which can appear anywhere within its <figure> container as per the new release.
  • 8. To implement all the new features in your web application development, get in touch with a HTML5 Development Service Provider and create a feature-rich flexible web application. Originally posted by : https://goo.gl/PTTSUy
  • 9. Interested To Know More About? Outsourcing HTML5 Ontwikkeling Website Ontwikkeling Specialist Mobiele Applicatie