HTML Introduction – Basics

HTML (HyperText Markup Language) is the foundation of the web. It’s the language used to structure and present content on a website. Think of it as the skeleton – it defines the basic elements of a webpage, like headings, paragraphs, images, and links. Without HTML, a website would be just a collection of static images and text. This tutorial will introduce you to the core concepts of HTML, focusing on the basics to get you started with web development.

Section 1: The Basic Structure

The fundamental building block of an HTML document is the <html> tag. This tag encapsulates the entire HTML document.

<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

• <html>: The root element of the HTML document.
• <head>: Contains meta-information about the HTML document, such as the title. This information isn't displayed on the page itself.
• <title>: Specifies a title for the HTML page (which is shown in the browser's title bar or tab).
• <body>: Contains the visible content of the HTML page – everything the user sees.

Section 2: Headings – Creating Structure

Headings are used to organize content into different levels of importance. They are defined using the <h1> to <h6> tags.

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 3</h4>
<h5>This is a Heading 3</h5>
<h6>This is a Heading 3</h6>

• <h1> to <h6>: These tags define the different heading levels. <h1> is the most important and largest heading, while <h6> is the smallest.

Section 3: Paragraphs – Text Content

Paragraphs are used to display the main content of a webpage. They are enclosed within <p> tags.

<p>This is a paragraph of text.  It can contain multiple sentences and phrases.</p>

• <p>: The tag for paragraphs.

Section 4: Links – Navigating to Other Pages

Links allow users to navigate to other pages on a website. They are created using the <a> (anchor) tag.

<a href="https://netgramnews.com">Visit NetGram News</a>

• <a>: The anchor tag.
• href: Specifies the URL (web address) that the link points to.

Section 5: Images – Visual Elements

Images can be embedded in a webpage using the <img> tag.

<img src="image.jpg" alt="A descriptive image">

• <img>: The image tag.
• src: Specifies the path to the image file.
• alt: Provides alternative text for the image, which is displayed if the image cannot be loaded. This is important for accessibility.

Section 6: Lists – Creating Ordered Content

Lists are used to present information in a structured format. They are created using the <ul> (unordered list) and <ol> (ordered list) tags.

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

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Section 7: Basic HTML Structure - Forms

Simple forms are created using the <form> tag and the <input> and <textarea> tags.

<form action="submit.php" method="post">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br><br>
  <input type="submit" value="Submit">
</form>

• <form>: The tag that defines a form.
• action: Specifies the URL where the form data will be submitted.
• method: Specifies the HTTP method used to submit the form (e.g., "post", "get").

💡 Tip: Remember to always include the <!DOCTYPE html> declaration at the very top of your HTML document. This tells the browser that the document is an HTML5 document, ensuring proper rendering.