HTML and Its Essential Tags
HTML is a markup language.if you dont know how is websites are developed and run on server platefom. we will clear this all about how websites built and work. websites built using a language which is HyperText Markup Language.
It is the backbone of every webpage on the internet which is defining the structure and content of websites. Whether you are a learner or looking to refresh your knowledge, In this we have explain the essentials of this markup language in a simple and easy-to-understand manner.
What is HTML?
Full Form of HTMLÂ is HyperText Markup Language, and it is used to create web pages. It is also a markup language just like Python or JavaScript. This is a markup language that structures content on the web.
Why is this markup language Important?
- It defines the structure of web pages.
- It is the foundation of web development.
- It uses alongside CSS (for styling) and JavaScript (for interactivity).
- It is easy to learn and widely used.
Basic Structure of an Document
An HTML document consists of elements enclosed within tags. Every webpage starts with the following structure:
<!DOCTYPE html> <html> <head> <title>DevTech Edu Academy</title> </head> <body> <h1>Welcome to DevTech Edu Academy</h1> <p>This is a paragraph of text on my webpage.</p> </body> </html>
Explanation:
- <!DOCTYPE html>: Declares the document as HTML5.
- <html>: The root element that contains all other elements.
- <head>: Contains metadata and the page title.
- <title>: Sets the title of the webpage (visible in the browser tab).
- <body>: Contains the main content of the webpage.
- <h1>: A heading element (largest size heading).
- <p>: A paragraph element.
Common Tags and Their Uses
Here are some of the most commonly used tags:
Heading Tags:
H1 to H6Â here H1 is Bigger Heading and H6 is smallest
Headings help organize content into sections.
<H1>-----Main Heading---------</H1> <H2>------Sub Heading---------</H2> <H3>------Sub Heading---------</H3> <H4>------Sub Heading---------</H4> <H5>------Sub Heading---------</H5> <H6>------Sub Heading---------</H6>
Paragraphs and Line Breaks <p>,<br>
<p>This is a paragraph.</p>
<br> ----Â used for line break
Links (Hyperlinks) <a>
This links tag allow a user to create any other website link to navigate between webpages.
<a href=”https://www.devtecheduacademy.com“> DevTech Edu Academy</a>
Images <img>
if you want to show image on webpage then you can do this using the <img> tag.
<img src=” image url ” alt=”Description of image”>
Lists (Ordered and Unordered)Â <ol> <ul>
Unorder List
if a Bullet list not have any order no like 1,2,3 or A,B<C and have only any symbol.
<ul> <li>Item 1</li> <li>Item 2</li> </ul>
Order List
if a Bullet list have any order no like 1,2,3 or A,B<C .
<ol> <li>First Item</li> <li>Second Item</li> </ol>
Tables
<table> tag use for creating a table in webpage and inside table <tr> tag for creating row in a table and <th> tag use for table column heading and <td> tag use for creating column.
<table border="1">Â Â Â /* here border attribute used to set border size <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Alice</td> <td>25</td> </tr> </table>
Forms (User Input Fields)
<form> <label for="name"> DevTech Edu Academy </label> <input type="text" id="devtech" name="devtech"> <button type="submit">Save</button> </form>
HTML Best Practices
if you want to write professional way to this code, then follow these best practices:
✅ Use of Semantic tag: Instead of using <div> everywhere, use like <header>, <section>, and <footer> tag .
✅ Always close start Tags: Always close tags properly to avoid errors.
✅ Use Proper indentation improves readability.
✅ Add Alt Text for Images: It improves accessibility and SEO.
Version Details
| Year | Version |
|---|---|
| 1989 | Tim Berners-Lee invented www |
| 1991 | Tim Berners-Lee invented |
| 1993 | Dave Raggett drafted “HTML​+” |
| 1995 | Working Group defined HTML​(Ver 2.0) |
| 1997 | W3C Recommendation: Version 3.2 |
| 1999 | W3C Recommendation: Version 4.01 |
| 2000 | W3C Recommendation: XHTML 1.0 |
| 2008 | WHATWG First Public Draft |
| 2012 | WHATWG Living Standard |
| 2014 | W3C Recommendation: Version 5.0 |
| 2016 | W3C Candidate Recommendation: Version 5.1 |
| 2017 | W3C Recommendation: Version 5.1 (2nd Edition) |
| 2017 | W3C Recommendation: Version 5.2 |
Conclusion
This is the fundamental of website development. It is an essential part for anyone creating websites. By learning basic this tags and structures, we are taking our first step into the exciting world of web development. then use along with CSS for style and jss for script.
So, start practicing and build your first webpage today !