HTML, CSS3 and JavaScript has the power to make your site or blog look alluring, easy to use and modern. HTML5 has made a tremendous commitment to the stunning sites being planned regular. HTML can do a ton of slick things, as well as just making a site.
You can utilize HTML to make flawless text effects, tables, joins, marquees, thus significantly more. These are incredible for adding a tweaked look to your blog, site, eBay sale, discussion, and that's just the beginning.
Hide
<main hidden>Hello World</main>
You can hide element without the use of CSS😲. Using the hidden
attribute.
<mark>
tag
Any text between the <mark>
will have highlighted effect. You can customize the color of your highlighter by just using the mark
CSS property in the CSS.
See the Pen mark by DevIntro
(@devintro) on CodePen.
noscript
The markup inside is delivered by the program just when the scripts are off. This tag is helpful for telling clients when the content is incapacitated in their program and to give any other fallback system to segments on the website pages that will quit working without JavaScript.
<head>
<noscript>
/*adds custom css when the scripts are off*/
<link rel="stylesheet" href="noscript.css">
</noscript>
</head>
<body>
<noscript>Enable JavaScript to See the content</noscript>
</body
Voice search
You can add voice search in the input field. It searches on by voice recognition. ** only works on mobile devices**
<input type="text" x-webkit-speech>
preload attribute
This attribute is used increase User Experience. Using the attribute in your videos states that how the video should be loaded when the page loads.
*If autoplay
is present this attribute is ignore. *
<video controls preload>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Refreshing browser
<meta http-equiv=”refresh” content=”6"/>
Pretty sure developers there will love this tip. You can use it to make your browser refresh every seconds so no problem for refreshing manually when you do your CSS.
Meta
meta
tag : The <meta>
tag consistently go inside the
<head>
<meta charset="UTF-8">
<meta name="description" content="We post content for Developers">
<meta name="keywords" content="HTML, CSS, JavaScript, react, ">
<meta name="author" content="DevWriteUps">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Amazing <a>
There are multiple things you can do with the anchor tag. You may have heard of the mailto
using this it redirect to mail app on your device. There are bunch of anchor tag relation with skype too.
<a href="mailto:someone@gmail.com">Send email</a>
<a href="tel:9999999999”>Make a call</a>
<a href="skype:username?chat”>Chat</a>
<a href="skype:username?add”>Add </a>
<a href="skype:username?call”>Call</a>
<video>
tag
Using <video>
tag you can embed video directly on your webpage.
<video autoplay="" loop="" controls="" width="640" height="480">
<source type="video/mp4" src="https://www.pexels.com/video/the-rocky-coastline-of-in-northern-california-3578881/">
</video>
<meter>
tag
You can utilize the <meter>
tag to quantify information inside a given reach.
See the Pen meter tag by DevIntro
(@devintro) on CodePen.
autofocus
attribute
It indicates that a <input>
component ought to consequently get focus when the page loads.
<input type="text" placeholder="Devwriteups" required autofocus>
Progress tag
This is same like the <meter>
tag (but a bit ore enhanced).
See the Pen progress tag by DevIntro
(@devintro) on CodePen.
Thank you For Reading🤩 Subscribe to our newsletter , we send it occasionally with amazing news, resources and many thing.
Top comments (0)