Understanding Basic HTML Tags for Beginners

Structure of a Simple HTML Page

An HTML page is the foundation of a website. It consists of essential elements wrapped in HTML tags that define the structure and layout of the content. Here's a quick breakdown of what a simple HTML page looks like:

  • <html> Tag: The <html> tag is the root element that wraps all other content on the page. It tells the browser that the document is in HTML format.
  • <head> Tag: The <head> section contains metadata about the page, such as the page title, character set, and links to CSS files. While this content doesn't appear on the page, it's vital for SEO and styling.
  • <body> Tag: The <body> section is where all visible content appears, including text, images, and links. It is the main area for website content.

Here's an example of a straightforward HTML layout:

<!DOCTYPE html>

<html>

  <head>

    <title>My First HTML Page</title>

  </head>

  <body>

    <h1>Welcome to My Website</h1>

    <p>This is a basic paragraph of text on a simple HTML page.</p>

  </body>

</html>

Common HTML Tags Explained

HTML tags define different types of content on a web page. Here are a few basic HTML tags you'll frequently encounter:

  • <h1> Tag: This is a heading tag, usually the largest and most important, representing your page's or section's main title. <h2>, <h3>, and so on, are used for subheadings.
  • <p> Tag: The paragraph tag <p> is used for blocks of text, adding line breaks before and after to separate it from other content.
  • <img> Tag: This tag embeds images into your page. It requires a src attribute to specify the image URL and an alt attribute to describe the image for accessibility and on-page SEO.

These tags wrap around the content they affect, like so:

<h1>Page Title</h1>

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

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

Styling Options: Inline Styles and External CSS

You can style HTML content either inline or through an external CSS file:

1.      Inline Styling: Inline styles are applied directly within HTML tags using the style attribute. For example:

<p style="color:blue; font-size:20px;">This is a styled paragraph.</p>

While quick, inline styling is best used sparingly, as it can clutter HTML code and is harder to manage for larger websites.

2.      CSS File: External CSS files allow you to apply consistent styles across multiple pages. By linking to a CSS file in the <head> section, you can control the look and feel of your site from one location, making updates easier. Example:

<head>

  <link rel="stylesheet" href="styles.css">

</head>

Using basic HTML tags effectively lays the groundwork for a structured, accessible, and well-styled website. Whether you're adding headings, images, or paragraphs, understanding how to use these tags is essential for any beginner looking to build or edit a website.

 

Here is some additional information about HTML.