Basic HTML: Complete Guide

Learn the fundamentals of HTML in this comprehensive guide. HTML (Hypertext Markup Language) is the foundation of web development, helping you structure content for the web.

HTML Essentials

Introduction to HTML HTML Tags and Elements HTML Document Structure HTML Attributes HTML Forms and Inputs HTML Links and Navigation HTML Media Elements

Download Catalog

Catalog PDF Catalog DOC

Have a Question?

+1 5589 55488 55

contact@example.com

What is HTML? A Brief Overview

HTML stands for Hypertext Markup Language and is used to create the structure of web pages. It allows web developers to define the elements of a web page such as headings, paragraphs, links, images, and more.

HTML uses a series of elements (also called tags) to structure content. It is the foundation of web development, providing the basic framework that developers build upon using other languages like CSS and JavaScript.

HTML Document Structure

Every HTML document has a basic structure. It begins with a `` declaration, followed by the opening and closing `` tags, which contain the rest of the content. The two main sections of an HTML document are the `` and the ``.

Head section includes metadata, links to stylesheets, and other non-visible content.
Body section contains the visible content like text, images, and interactive elements.
Basic tags in HTML: ``, ``, ``, ``, `<p>`, `<h1>`, etc.</span></li> </ul> <h4>Key HTML Tags</h4> <p> HTML uses different tags to structure the content. Here's a list of common HTML tags: </p> <ul> <li><i class="bi bi-check-circle"></i> <span>`<h1> to <h6>`: Headings of different levels, from most important to least important.</span></li> <li><i class="bi bi-check-circle"></i> <span>`<p>`: Defines a paragraph.</span></li> <li><i class="bi bi-check-circle"></i> <span>`<a>`: Creates a hyperlink.</span></li> <li><i class="bi bi-check-circle"></i> <span>`<img>`: Embeds an image.</span></li> <li><i class="bi bi-check-circle"></i> <span>`<ul>` and `<ol>`: Define unordered and ordered lists.</span></li> </ul> <h4>HTML Attributes</h4> <p> HTML elements often use attributes to provide additional information. Attributes are placed inside the opening tag and have a name and a value. For example: </p> <pre><code><a href="https://example.com">Link to Example</a></code></pre> <p>In this example, the `href` is the attribute, and `"https://example.com"` is its value.</p> <h4>HTML Forms and Input</h4> <p> Forms are an essential part of HTML for collecting user data. The `<form>` tag is used to create a form, and it can contain different input types such as text fields, radio buttons, checkboxes, and buttons. Example: </p> <pre><code><form action="submit.php"> <input type="text" name="name" placeholder="Enter your name"> <input type="submit" value="Submit"> </form></code></pre> <p>This is a basic HTML form with a text input and a submit button.</p> <h4>Links and Navigation</h4> <p> The `<a>` tag is used to create links in HTML. These links can be used to navigate between pages, files, or external websites. Example: </p> <pre><code><a href="https://example.com">Visit Example</a></code></pre> <p>This creates a clickable link that leads to "https://example.com".</p> <h4>HTML Media Elements</h4> <p> HTML supports embedding media such as images, videos, and audio. The `<img>`, `<video>`, and `<audio>` tags are used to integrate these media types into a webpage. </p> </div> </div> </div> </section> </main> <footer id="footer" class="footer light-background"> <div class="container"> <div class="row gy-3"> <div class="col-lg-3 col-md-6 d-flex"> <i class="bi bi-geo-alt icon"></i> <div class="address"> <h4>Address</h4> <p>A108 Adam Street</p> <p>New York, NY 535022</p> <p></p> </div> </div> <div class="col-lg-3 col-md-6 d-flex"> <i class="bi bi-telephone icon"></i> <div> <h4>Contact</h4> <p> <strong>Phone:</strong> <span>+1 5589 55488 55</span><br> <strong>Email:</strong> <span>info@example.com</span><br> </p> </div> </div> <div class="col-lg-3 col-md-6 d-flex"> <i class="bi bi-clock icon"></i> <div> <h4>Opening Hours</h4> <p> <strong>Mon-Sat:</strong> <span>11AM - 23PM</span><br> <strong>Sunday</strong>: <span>Closed</span> </p> </div> </div> <div class="col-lg-3 col-md-6"> <h4>Follow Us</h4> <div class="social-links d-flex"> <a href="#" class="twitter"><i class="bi bi-twitter-x"></i></a> <a href="#" class="facebook"><i class="bi bi-facebook"></i></a> <a href="#" class="instagram"><i class="bi bi-instagram"></i></a> <a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a> </div> </div> </div> </div> <div class="container copyright text-center mt-4"> <p>© <span>Copyright</span> <strong class="px-1 sitename">Rapid</strong> <span>All Rights Reserved</span></p> <div class="credits">     Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a> </div> </div> </footer>  <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>  <div id="preloader"></div>  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="assets/vendor/php-email-form/validate.js"></script> <script src="assets/vendor/aos/aos.js"></script> <script src="assets/vendor/glightbox/js/glightbox.min.js"></script> <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script> <script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script> <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script> <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>  <script src="assets/js/main.js"></script> </body> </html>