DEV Community

Cover image for 12 HTML things you should know about
Dev Write Ups
Dev Write Ups

Posted on

12 HTML things you should know about

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>

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Refreshing browser

<meta http-equiv=”refresh” content=”6"/>
Enter fullscreen mode Exit fullscreen mode

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

component, and are normally used to indicate character set, page depiction, catchphrases, about, and viewport settings.
 <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> 
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)