HTML Basics: Must-Know Tips for Beginner

I've been in the process of learning HTML, and now I'm sharing my HTML knowledge with fellow folks to facilitate their rapid and improved understanding of the language. Here's an in-depth HTML tutorial that covers everything from the basics to advanced concepts, complete with code examples. Let's get started!

Introduction to HTML
Basic Structure of an HTML Document
HTML Tags and Elements
Text Formatting
Links and Anchors
Images
Lists
Tables
Forms
Semantic HTML
CSS and HTML Styling
HTML5 APIs and Advanced Features

1. Introduction to HTML

HTML (Hypertext Markup Language) is the standard markup language used for creating web pages. It provides the structure and content of a webpage. HTML uses tags to define various elements and their properties.

2. Basic Structure of an HTML Document

An HTML document consists of an opening <!DOCTYPE> declaration, an <html> element that contains the entire document, and two main sections: the <head> and the <body>. The <head> section contains metadata and external resources, while the <body> section contains the visible content of the webpage.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

3. HTML Tags and Elements

HTML tags are used to define elements within an HTML document. Tags are enclosed in angle brackets (<>). Elements can be nested inside one another, creating a hierarchical structure.

<tagname>Content goes here</tagname>

For example, the <h1> tag is used to define a heading:

<h1>This is a Heading</h1>

4. Text Formatting

HTML provides several tags for text formatting, such as headings, paragraphs, emphasis, and more.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<strong>This text is bold.</strong>
<em>This text is emphasized.</em>
<mark>This text is highlighted.</mark>

5. Links and Anchors

HTML allows you to create links using the <a> tag. The href attribute specifies the URL of the target page.

<a href="https://www.example.com">Visit Example</a>

6. Images

To display images on a webpage, use the <img> tag with the src attribute specifying the image URL.

<img src="image.jpg" alt="Description of the image">

7. Lists

HTML supports ordered and unordered lists.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

8. Tables

Tables can be created using the <table>, <tr>, and <td> tags.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

9. Forms

HTML forms allow users to interact with the webpage. Form elements include input fields, checkboxes, radio buttons, dropdowns, and more.

<form>
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <input type="submit" value="Submit">
</form>

10. Semantic HTML

Semantic HTML provides meaning to the structure of a webpage. It helps search engines and assistive technologies understand the content better.

<header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content goes here.</p>
  </article>
</main>

<footer>
  <p>&copy; 2023 My Website</p>
</footer>

11. CSS and HTML Styling

Cascading Style Sheets (CSS) are used to style HTML elements. CSS defines the layout, colors, fonts, and other visual aspects of a webpage. CSS can be applied inline, internally, or externally.

Inline CSS Example:

<p style="color: red;">This is a red paragraph.</p>

Internal CSS Example:

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This is a red paragraph.</p>
</body>
</html>

External CSS Example:

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This is a styled paragraph.</p>
</body>
</html>

12. HTML5 APIs and Advanced Features

HTML5 introduces several new APIs and advanced features, such as geolocation, local storage, canvas for drawing, audio and video support, and more. These features enhance the functionality and interactivity of web pages.

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Features</title>
</head>
<body>
  <h1>Geolocation</h1>
  <p id="location">Determining your location...</p>

  <h1>Canvas</h1>
  <canvas id="myCanvas" width="200" height="100"></canvas>

  <h1>Audio</h1>
  <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
  </audio>

  <h1>Video</h1>
  <video controls>
    <source src="video.mp4" type="video/mp4">
  </video>

  <script>
    // JavaScript code to access and use HTML5 APIs
  </script>
</body>
</html>

That concludes our tutorial on HTML from scratch to an advanced level. By understanding and practicing these concepts, you'll be well-equipped to create dynamic and interactive web pages. Remember to explore additional resources and stay updated on the latest developments in HTML and web technologies.

Cheat Sheet link:- https://html-css-js.com

Biswajit's Blog