HTML
JAVASCRIPT
CSS
PYTHON

HTML Basic Tags

HTML Basic Tags

HTML tags are the building blocks of any webpage. They help structure and organize content so browsers can render it appropriately. Here’s a breakdown of what you described and an expanded overview

  • Opening Tag: Indicates the start of an element (e.g., <p>).
  • Closing Tag: Indicates the end of an element (e.g., </p>). Closing tags have a forward slash (/) before the tag name.
  • Self-closing Tags: Some tags don’t require a closing tag because they don’t wrap content (e.g., <img> or <br>).

Heading Tags

Heading tags in HTML (<h1> to <h6>) are used to define headings and subheadings, and they play a crucial role in organizing and structuring content. Each heading level represents a different level of importance, with <h1> being the most important and <h6> the least.

Purpose of HTML Tags

  • Structure: Define sections, headings, paragraphs, and more.
  • Semantics: Indicate the purpose of content, such as <header> for a page header or <nav> for navigation.
  • Behavior: Work with JavaScript to enable interactivity.
  • Styling: Work with CSS to define the visual appearance of elements.

Common HTML Tags and Their Uses

Tag Description
<html> Root element of the HTML document.
<head> Contains metadata (e.g., title, meta tags, link to stylesheets).
<body> Contains all content displayed on the webpage.
<title> Sets the title of the document (visible on the browser tab).
<h1> to <h6> Define headings, with <h1> being the largest.
<p> Defines a paragraph.
<a> Creates hyperlinks.
<img> Embeds images.
<ul> Creates an unordered (bulleted) list.
<ol> Creates an ordered (numbered) list.
<li> Defines a list item within <ul> or <ol>.
<div> Generic container for structuring content.
<span> Inline container for styling a part of text or content.
<table> Defines a table.
<th> Table header.
<td> Table cell.
<form> Defines an input form for user interaction.

Heading Tags

Heading tags in HTML are used to define the structure and hierarchy of a document by organizing content into sections. These tags range from <h1> to <h6>, where:

  • <h1> represents the most important heading (typically used for the main title or heading of a page),
  • <h2> to <h6> represent subheadings of decreasing importance or levels.

Each heading tag not only helps with organizing content but also plays a crucial role in SEO (Search Engine Optimization), as search engines prioritize <h1> as the main topic of a page. Here's a quick breakdown of how they are structured: 

    <!DOCTYPE html>
    <html>
      <head>
        <title>Top Free Course Heading Example</title>
      </head>
      <body>
        <h1>Top Free Course Heading 1</h1>
        <h2>Top Free Course Heading 2</h2>
        <h3>Top Free Course Heading 3</h3>
        <h4>Top Free Course Heading 4</h4>
        <h5>Top Free Course Heading 5</h5>
        <h6>Top Free Course Heading 6</h6>
      </body>
    </html>

Key Points about Heading Tags:

  • Semantic Meaning: The tags provide meaning to the content, indicating which sections are more important.
  • Styling: By default, browsers render headings with bold text and adjust font size (h1 is the largest, h6 is the smallest). You can customize this using CSS.
  • Spacing: Browsers automatically add space above and below headings, but you can adjust or remove this spacing with CSS if needed.
  • Accessibility: Proper use of heading tags helps screen readers and other assistive technologies understand the document structure better.

Paragraph Tag

The <p> tag in HTML is used to define a paragraph. Each block of text wrapped in an opening <p> tag and a closing </p> tag is treated as an independent paragraph.

Basic Syntax:

  <p>This is a paragraph of text.</p>

Example:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Paragraph Tag Example</title>
  </head>
  <body>
      <p>This is the first paragraph. It contains some text about a topic.</p>
      <p>This is the second paragraph. You can use multiple <p> tags to separate your content into readable chunks.</p>
  </body>
  </html>

Best Practices:

  • Use <h1> only once per page to describe the main topic or title.
  • Use other heading levels hierarchically to organize content logically.
  • Avoid skipping heading levels (e.g., going directly from <h1> to <h3>), as it may confuse both users and search engines.

Learning Basic HTML

If you're just starting out, focus on:

  • Structuring text (e.g., <p>, <h1>).
  • Adding images and links (e.g., <img>, <a>).
  • Creating lists (e.g., <ul>, <ol>).
  • Organizing content with <div> and <span>.
Previous Next