Hello, Today I will tell you the 21 most amazing things that you must know in HTML5. Let's get to know something about HTML5. HTML stands for HyperText Markup Language. HTML use to write content on the webpage, and it is the most necessary part of the website. Without content, nobody will visit your website. And the article you are reading is also created with HTML tags. HTML gives structure to the web page.
There are two types of tags in HTML.
Paired Tag :- HTML tags which have starting tags and ending tags are called paired tag. For example:- <p>...</p>, <h1>...</h1>, etc.
Unpaired Tag :- HTML tags that haven't started tags and ending tags are self-ended tags. For example:- <Br>, <hr>, etc.
meta viewport must use a tag in HTML web page
Meta Viewport is the most necessary tag in the HTML web page. We paste this meta tag into the head tag of the HTML web page. It helps us to show our web page in the perfect zoom size.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Favicon use in html web page
This link tag helps us to insert an icon into the tab. It is also called Favourite Icon in HTML.
<link rel="icon" href="assets/favicon.png" type="image/png">Meta theme-color tag in HTML web page
This meta-tag is used to show the color on the tab of the browser. There are three types of theme-color meta tags. theme-color this meta tag is used for Chrome, Opera, Firefox and mobile browser. msapplication-navbutton-color this meta tag is used for windows phone and last one apple-mobile-web-app-status-bar-style this meta tag is used for ISO Safari browsers. It means you can choose tab color as per the client's browser.
<!-- for android -->
<meta name="theme-color" content="#ffb03b">
<!-- for windows smartphone -->
<meta name="msapplication-navbutton-color" content="#ffb03b">
<!-- For Apple IOS -->
<meta name="apple-mobile-web-app-status-bar-style" content="#ffb03b">Marquee tag in HTML for animation
This marquee tag helps us to make our content animate without using CSS codes. Its attributes are the direction. You can controll it's speed using scrollamount attribute.
<marquee>type your text here! for normal marquee animation.</marquee>
<marquee direction="right">type your text here! for right direction marquee animation.</marquee>
<marquee direction="up">type your text here! for up direction marquee animation.</marquee>
<marquee direction="down">type your text here! for down direction marquee animation.</marquee>Title attribute for the HTML tag
Everyone knows about the title tag HTML also has a title attribute for a tag, which is used to show the short message for the content.
<p title="HyperText Markup Language">hower me HTML</p>Output:
HTML full form
Contenteditable attribute for the HTML tag
By adding this attribute to a paragraph tag or heading tag, that content gets editable power. It means the user can also click on the content and edit, but it doesn't save the user's content into the browser.
<p contenteditable="true">You can edit this paragraph.</p>Output:
You can edit this paragraph.
align attribute for the HTML tag
This HTML tag attribute helps us to align the content in the HTML web page. Align attribute values are left, right and center.
hidden attribute for the HTML tag
This HTML tag attribute helps us to hide the content on which tag we write this hidden attribute. It means we don't need to write CSS code for display: none and visibility: hidden.
Details > summary tags for the HTML web page.
This HTML tag makes content collapse content when the user clicks on the summary content. It opens the HTML content like a drop-down which we want to show.
<details>
<summary>Heading of the Summary</summary>
<p>Hidden part of the html content while click on the summary it will open.</p>
</details>Output:
Heading of the Summary
Hidden part of the html content while click on the summary it will open.
Fieldset > legend tags for the HTML web page
This HTML tag makes our form or content stylish without using CSS.
<fieldset>
<legend>Heading of fieldset</legend>
<p>your html content using any tag</p>
</fieldset>Progress tag in HTML for web page
This HTML tag helps us to show the horizontal diagram meter. It is the same as the progress bar. Its attributes are min, max, and value.
<progress value="25" max="100">Progress isn't support in your browser</progress>Output:
hr tag and its attribute for HTML web page
This HTML tag helps us to make Horizontal Rulers in HTML. We can use the width, color, and size attribute for this HTML tag.
<hr size="30" color="tomato">Output:
Anchor tag target attribute for the HTML
It allows us to open anchor links in various ways as we want. Target="_self" is default, target="_blank" it open our link in the new tab.
<a href="https://example.com" target="_blank">Your Link</a>iframe tag in HTML for web page
Iframe tag allows us to extract the part of any website to our web page. Its attributes are src, frameborder, height, width, and scrolling.
<iframe src="http://example.com" frameborder="1" height="450px" width="1200px" scrolling="yes"></iframe>Object tag in HTML for web page
This attribute helps us to insert PDF or SWF files into our web page. Its attributes are width, height, and data.
<object width="800px" height="800px" data="youpdf.pdf">Datalist tag in HTML form for web page
It is the same as the select input tag, but it has a feature for searching value.
<input list="courses">
<datalist id="courses">
<option value="html">
<option value="css">
<option value="JavaScript">
<option value="PHP">
<option value="MySQL">
<option value="NodeJs">
</datalist>Output:
HTML form all input type attribute value.
These are the most common input type attributes which have the form tag.
//tableForm input attribute oncopy, oncut, onpaste for HTML web page.
These form input attributes help us preventing copy, paste and cut the form value.
<label for="">Label name</label>
<input type="text" oncopy="return false" oncut="return false" onpaste="return false" autocomplete="off">Output:
I hope this post was new for you and full of informative posts. Comment on the below box if any of the tricks don't work on your computer.
