12 HTML things you should know about
Tags: html, css, beginners, programming
Published: 2021-09-02 04:24:06

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

```html
<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. 

<iframe height="129" style="width: 100%;" scrolling="no" title="mark" src="https://codepen.io/devintro/embed/ExWYgZK?height=129&theme-id=dark&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/devintro/pen/ExWYgZK'>mark</a> by DevIntro
  (<a href='https://codepen.io/devintro'>@devintro</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>


### `noscript`

The markup inside <noscript> 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.

```html
<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**

```html
<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. **

```html
<video controls preload>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
```

### Refreshing browser

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

```html
<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. 

```html
<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. 

<iframe height="134" style="width: 100%;" scrolling="no" title="meter tag" src="https://codepen.io/devintro/embed/JjWPmgw?height=134&theme-id=dark&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/devintro/pen/JjWPmgw'>meter tag</a> by DevIntro
  (<a href='https://codepen.io/devintro'>@devintro</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>


### `autofocus` attribute

It indicates that a `<input>` component ought to consequently get focus when the page loads.

```html
<input type="text"  placeholder="Devwriteups" required autofocus>
```



### Progress tag

This is same like the `<meter>` tag (but a bit ore enhanced).
<iframe height="142" style="width: 100%;" scrolling="no" title="progress tag" src="https://codepen.io/devintro/embed/NWpKeLm?height=142&theme-id=dark&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/devintro/pen/NWpKeLm'>progress tag</a> by DevIntro
  (<a href='https://codepen.io/devintro'>@devintro</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>  


---

Thank you For Reading🤩 Subscribe to our  [newsletter](https://www.devintro.com) , we send it occasionally with amazing news, resources and many thing.