What is HTML? Structure, Tags, and Coding Examples Explained
Introduction
HTML (HyperText Markup Language) is the standard language used to create and design web pages. It forms the backbone of web development by structuring the content that is displayed on the internet. Whether you're creating a personal blog, a professional portfolio, or a complex web application, HTML is an essential tool that allows developers to create visually appealing and functional websites.
What is HTML?
HTML is a markup language that uses tags and elements to define the structure of a webpage. It dictates how text, images, links, and other content are displayed in a browser. HTML is not a programming language but rather a language designed to describe the structure of information on a webpage.
Basic Structure of an HTML Document
An HTML document typically consists of the following elements:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
<p>This is a paragraph of text in HTML.</p>
</body>
</html>
Explanation of the Code:
<!DOCTYPE html>: Declares the document type and version of HTML being used.
<html>: The root element that wraps all other HTML content.
<head>: Contains metadata, title, and links to external stylesheets or scripts.
<title>: Sets the title of the webpage that appears on the browser tab.
<body>: Contains the visible content of the webpage, such as headings, paragraphs, images, etc.
HTML Tags and Elements
HTML relies on a wide range of tags and elements to define content. Here are some common tags:
Headings
<h1>This is a Heading 1</h1> <h2>This is a Heading 2</h2> <h3>This is a Heading 3</h3>
Paragraphs
<p>This is a paragraph in HTML.</p>
Links
<a href="https://www.example.com">Visit Example</a>
Images
<img src="image.jpg" alt="A descriptive text for the image">
Lists
Ordered List <ol> <li>First item</li> <li>Second item</li> </ol>
Unordered List <ul> <li>First item</li> <li>Second item</li> </ul>
HTML Forms
HTML forms are used to collect user input and send it to a server for processing.
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>
HTML Tables
Tables are used to display data in rows and columns.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
</tr>
</table>
HTML Attributes
Attributes provide additional information about an element, such as:
href in <a> for links.
src in <img> for image source.
alt in <img> for alternative text.
For example:
<a href="https://www.google.com" target="_blank">Open Google</a>
HTML and CSS
While HTML structures the content, CSS (Cascading Style Sheets) is used to style it. Together, they create visually appealing and interactive websites.
Example of integrating CSS with HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #555;
}
</style>
</head>
<body>
<h1>HTML and CSS</h1>
<p>This is how HTML and CSS work together.</p>
</body>
</html>
Advanced HTML Features
HTML5 Semantic Tags
Semantic tags like <header>, <footer>, <article>, and <section> improve readability and accessibility.
<header> <h1>Website Title</h1> </header> <section> <p>Welcome to my website!</p> </section> <footer> <p>Contact us at email@example.com</p> </footer>
HTML Media Elements
Embed a video:
<video controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
Embed audio:
<audio controls> <source src="audio.mp3" type="audio/mp3"> Your browser does not support the audio tag. </audio>
Conclusion
HTML is the foundation of the web. It provides the structure for webpages and acts as the building block for web development. By mastering HTML, you can create and design functional and visually appealing websites. Whether you're a beginner or an experienced developer, HTML remains an essential skill in the digital age.
html, html compiler, html online compiler, html full form, online html compiler, what is html, html tags, html interview questions, html formatter, html color codes, html to pdf, html to pdf converter, html tutorial, online html editor, html viewer, html beautifier, html code runner, table in html, html color picker, html editor, html link, fintech shield
Comments