HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of HTML. Our HTML tutorial is developed for beginners and professionals. In our tutorial, every topic is given step-by-step so that you can learn it in a very easy way. If you are new in learning HTML, then you can learn HTML from basic to a professional level and after learning HTML with CSS and JavaScript you will be able to create your own interactive and dynamic website. But Now We will focus on HTML only in this tutorial.
The major points of HTML are given below:
- HTML stands for HyperText Markup Language.
- HTML is used to create web pages and web applications.
- HTML is widely used language on the web.
- We can create a static website by HTML only.
- Technically, HTML is a Markup language rather than a programming language.
HTML Example with HTML Editorhttps://techzone360.shop/html-tutorial/
In this tutorial, you will get a lot of HTML examples, at least one example for each topic with explanation. You can also edit and run these examples, with our online HTML editor. Learning HTML is fun, and it’s very easy to learn.
- <!DOCTYPE>
- <html>
- <head>
- <title>Web page title</title>
- </head>
- <body>
- <h1>Write Your First Heading</h1>
- <p>Write Your First Paragraph.</p>
- </body>
- </html>
HTML 5 Tags
There is a list of newly included tags in HTML 5. These HTML 5 tags (elements) provide a better document structure. This list shows all HTML 5 tags in alphabetical order with description.
List of HTML 5 Tags
| Tag | Description |
|---|---|
| <article> | This element is used to define an independent piece of content in a document, that may be a blog, a magazine or a newspaper article. |
| <aside> | It specifies that article is slightly related to the rest of the whole page. |
| <audio> | It is used to play audio file in HTML. |
| <bdi> | The bdi stands for bi-directional isolation. It isolates a part of text that is formatted in other direction from the outside text document. |
| <canvas> | It is used to draw canvas. |
| <data> | It provides machine readable version of its data. |
| <datalist> | It provides auto complete feature for textfield. |
| <details> | It specifies the additional information or controls required by user. |
| <dialog> | It defines a window or a dialog box. |
| <figcaption> | It is used to define a caption for a <figure> element. |
| <figure> | It defines a self-contained content like photos, diagrams etc. |
| <footer> | It defines a footer for a section. |
| <header> | It defines a header for a section. |
| <main> | It defines the main content of a document. |
| <mark> | It specifies the marked or highlighted content. |
| <menuitem> | It defines a command that the user can invoke from a popup menu. |
| <meter> | It is used to measure the scalar value within a given range. |
| <nav> | It is used to define the navigation link in the document. |
| <progress> | It specifies the progress of the task. |
| <rp> | It defines what to show in browser that don’t support ruby annotation. |
| <rt> | It defines an explanation/pronunciation of characters. |
| <ruby> | It defines ruby annotation along with <rp> and <rt>. |
| <section> | It defines a section in the document. |
| <summary> | It specifies a visible heading for <detailed> element. |
| <svg> | It is used to display shapes. |
| <time> | It is used to define a date/time. |
| <video> | It is used to play video file in HTML. |
| <wbr> | It defines a possible line break. |
HTML Drag and Drop
HTML Drag and Drop (DnD) is a feature of HTML5. It is a powerful user interface concept which is used to copy, reorder and delete items with the help of mouse. You can hold the mouse button down over an element and drag it to another location. If you want to drop the element there, just release the mouse button.
If you want to achieve the Drag and Drop functionality in traditional HTML4, you must either have to use complex JavaScript programming or other JavaScript frameworks like jQuery etc.
Events for Drag and Drop feature
| Event | Description |
|---|---|
| Drag | It fires every time when the mouse is moved while the object is being dragged. |
| Dragstart | It is a very initial stage. It fires when the user starts dragging object. |
| Dragenter | It fires when the user moves his/her mouse cursur over the target element. |
| Dragover | This event is fired when the mouse moves over an element. |
| Dragleave | This event is fired when the mouse leaves an element. |
| Drop | Drop It fires at the end of the drag operation. |
| Dragend | It fires when user releases the mouse button to complete the drag operation. |
HTML5 Drag and Drop Example
Let’s see an example of HTML 5 drag and drop feature.
To understand this example, you must have the knowledge of JavaScript.
- <script>
- function allowDrop(ev) {ev.preventDefault();}
- function drag(ev) {ev.dataTransfer.setData(“text/html”, ev.target.id);}
- function drop(ev) {
- ev.preventDefault();
- var data = ev.dataTransfer.getData(“text/html”);
- ev.target.appendChild(document.getElementById(data));
- }
- </script>
- <p>Drag the javatpoint image into the rectangle:</p>
- <div id=”div1″ style=”width:350px;height:100px;padding:10px;border:1px solid #aaaaaa;”
- ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
- <br>
- <img id=”drag1″ src=”/htmlpages/images/javatpoint.png” alt=”javatpoint image”
- draggable=”true” ondragstart=”drag(event)”/>
In the above example, we have used ondrop and ondragover events on div element, and ondragstart event on img tag.
500+ HTML Color Names
There is given a list of all HTML color names with hexadecimal code alphabetically. It is arranged from A to Z.
It is recommended to use hex values than html color names because it occupies less space. Whenever you minify your css file, it uses hex color value replacing html color names.
Let’s see the list of 500+ html color names.
A B C D F G H I K L M N O P R S T V W Y
A color names
There is given a list of 13 color names that starts with A letter.PauseNextMute
Current Time 0:13
/
Duration 18:10
Loaded: 5.50%Fullscreen
| Color Name | Color | Color Code |
|---|---|---|
| AliceBlue | #f0f8ff | |
| AntiqueWhite | #faebd7 | |
| AntiqueWhite1 | #ffefdb | |
| AntiqueWhite2 | #eedfcc | |
| AntiqueWhite3 | #cdc0b0 | |
| AntiqueWhite4 | #8b8378 | |
| aquamarine1 | #7fffd4 | |
| aquamarine2 | #76eec6 | |
| aquamarine4 | #458b74 | |
| azure1 | #f0ffff | |
| azure2 | #e0eeee | |
| azure3 | #c1cdcd | |
| azure4 | #838b8b |
https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-4699858549023382&output=html&h=0&slotname=6746133113&adk=4015322468&adf=3256916255&pi=t.ma~as.6746133113&w=0&abgtt=1&lmt=1739518844&rafmt=12&format=0x0&url=https%3A%2F%2Fwww.tpointtech.com%2Fhtml-color-names&wgl=1&uach=WyJXaW5kb3dzIiwiMTAuMC4wIiwieDg2IiwiIiwiMTMyLjAuNjgzNC4xNjAiLG51bGwsMCxudWxsLCI2NCIsW1siTm90IEEoQnJhbmQiLCI4LjAuMC4wIl0sWyJDaHJvbWl1bSIsIjEzMi4wLjY4MzQuMTYwIl0sWyJHb29nbGUgQ2hyb21lIiwiMTMyLjAuNjgzNC4xNjAiXV0sMF0.&dt=1739518844185&bpp=7&bdt=417&idt=182&shv=r20250210&mjsv=m202502110101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D886af3dce38bf5ed%3AT%3D1739357611%3ART%3D1739518684%3AS%3DALNI_MZ1XLd_uaRHkxey5QKJUGevXmBYJw&gpic=UID%3D000010372a64c06a%3AT%3D1739357611%3ART%3D1739518684%3AS%3DALNI_MbNmM-5LqikxgBkNjs5SAw62GLrqQ&eo_id_str=ID%3De68b780da95c7852%3AT%3D1739357611%3ART%3D1739518684%3AS%3DAA-AfjZUVMn9o5oUV8KgVUX20AuD&correlator=7140821988728&frm=20&pv=2&u_tz=330&u_his=47&u_h=768&u_w=1366&u_ah=728&u_aw=1366&u_cd=24&u_sd=0.9&dmc=8&adx=314&ady=1470&biw=1498&bih=712&scr_x=0&scr_y=0&eid=31090149%2C31090351%2C95352068%2C95347433%2C95348348%2C95350016&oid=2&pvsid=1060362256972836&tmod=1805028734&uas=0&nvt=1&ref=https%3A%2F%2Fwww.tpointtech.com%2Fhtml-drag-and-drop&fc=640&brdim=0%2C0%2C0%2C0%2C1366%2C0%2C1366%2C728%2C1517%2C712&vis=1&rsz=o%7C%7CoeEbr%7C&abl=CS&fu=256&bc=31&bz=0.9&td=1&tdf=2&psd=W251bGwsbnVsbCxudWxsLDNd&nt=1&ifi=1&uci=a!1&btvi=1&fsb=1&dtd=206
B color names
There is given a list of 21 color names that starts with B letter.
| Color Name | Color | Color Code |
|---|---|---|
| beige | #f5f5dc | |
| bisque1 | #ffe4c4 | |
| bisque2 | #eed5b7 | |
| bisque3 | #cdb79e | |
| bisque4 | #8b7d6b | |
| black | #000000 | |
| BlanchedAlmond | #ffebcd | |
| blue1 | #0000ff | |
| blue2 | #0000ee | |
| blue4 | #00008b | |
| BlueViolet | #8a2be2 | |
| brown | #a52a2a | |
| brown1 | #ff4040 | |
| brown2 | #ee3b3b | |
| brown3 | #cd3333 | |
| brown4 | #8b2323 | |
| burlywood | #deb887 | |
| burlywood1 | #ffd39b | |
| burlywood2 | #eec591 | |
| burlywood3 | #cdaa7d | |
| burlywood4 | #8b7355 |
C color names
There is given a list of 27 color names that starts with C letter.
| Color Name | Color | Color Code |
|---|---|---|
| CadetBlue | #5f9ea0 | |
| CadetBlue1 | #98f5ff | |
| CadetBlue2 | #8ee5ee | |
| CadetBlue3 | #7ac5cd | |
| CadetBlue4 | #53868b | |
| chartreuse1 | #7fff00 | |
| chartreuse2 | #76ee00 | |
| chartreuse3 | #66cd00 | |
| chartreuse4 | #458b00 | |
| chocolate | #d2691e | |
| chocolate1 | #ff7f24 | |
| chocolate2 | #ee7621 | |
| chocolate3 | #cd661d | |
| coral | #ff7f50 | |
| coral1 | #ff7256 | |
| coral2 | #ee6a50 | |
| coral3 | #cd5b45 | |
| coral4 | #8b3e2f | |
| CornflowerBlue | #6495ed | |
| cornsilk1 | #fff8dc | |
| cornsilk2 | #eee8cd | |
| cornsilk3 | #cdc8b1 | |
| cornsilk4 | #8b8878 | |
| cyan1 | #00ffff | |
| cyan2 | #00eeee | |
| cyan3 | #00cdcd | |
| cyan4 | #008b8b |
D color names
There is given a list of 49 color names that starts with D letter.
| Color Name | Color | Color Code |
|---|---|---|
| DarkGoldenrod | #b8860b | |
| DarkGoldenrod1 | #ffb90f | |
| DarkGoldenrod2 | #eead0e | |
| DarkGoldenrod3 | #cd950c | |
| DarkGoldenrod4 | #8b6508 | |
| DarkGreen | #006400 | |
| DarkKhaki | #bdb76b | |
| DarkOliveGreen | #556b2f | |
| DarkOliveGreen1 | #caff70 | |
| DarkOliveGreen2 | #bcee68 | |
| DarkOliveGreen3 | #a2cd5a | |
| DarkOliveGreen4 | #6e8b3d | |
| DarkOrange | #ff8c00 | |
| DarkOrange1 | #ff7f00 | |
| DarkOrange2 | #ee7600 | |
| DarkOrange3 | #cd6600 | |
| DarkOrange4 | #8b4500 | |
| DarkOrchid | #9932cc | |
| DarkOrchid1 | #bf3eff | |
| DarkOrchid2 | #b23aee | |
| DarkOrchid3 | #9a32cd | |
| DarkOrchid4 | #68228b | |
| DarkSalmon | #e9967a | |
| DarkSeaGreen | #8fbc8f | |
| DarkSeaGreen1 | #c1ffc1 | |
| DarkSeaGreen2 | #b4eeb4 | |
| DarkSeaGreen3 | #9bcd9b | |
| DarkSeaGreen4 | #698b69 | |
| DarkSlateBlue | #483d8b | |
| DarkSlateGray | #2f4f4f | |
| DarkSlateGray1 | #97ffff | |
| DarkSlateGray2 | #8deeee | |
| DarkSlateGray3 | #79cdcd | |
| DarkSlateGray4 | #528b8b | |
| DarkTurquoise | #00ced1 | |
| DarkViolet | #9400d3 | |
| DeepPink1 | #ff1493 | |
| DeepPink2 | #ee1289 | |
| DeepPink3 | #cd1076 | |
| DeepPink4 | #8b0a50 | |
| DeepSkyBlue1 | #00bfff | |
| DeepSkyBlue2 | #00b2ee | |
| DeepSkyBlue3 | #009acd | |
| DeepSkyBlue4 | #00688b | |
| DimGray | #696969 | |
| DodgerBlue1 | #1e90ff | |
| DodgerBlue2 | #1c86ee | |
| DodgerBlue3 | #1874cd | |
| DodgerBlue4 | #104e8b |
Leave a Reply