HTML Elements

Welcome to the fundamental section of this tutorial – HTML Elements! HTML (HyperText Markup Language) is the foundation of the web, and understanding its building blocks is crucial for creating even simple websites. This tutorial will introduce you to the most basic HTML elements, providing a solid starting point for your web development journey. We’ll focus on the core concepts and practical examples to get you started.

– The Main Content of Your Page

The <body> element is the container for all the content that will be displayed on your webpage. Everything you see – text, images, links, and other elements – goes inside the <body> tag. It’s the largest element in the HTML document.

<body>
  <h1>My Awesome Website</h1>
  <p>This is a paragraph of text.</p>
  <a href="https://netgramnews.com">Visit NetGram</a>
</body>

In this example, the <body> element contains the main heading "My Awesome Website" and a paragraph of text. The <a> tag creates a hyperlink to "Visit NetGram" using the URL provided. The <h1> tag defines a level 1 heading, and the <p> tag defines a paragraph.

Headings – Structuring Your Content

Headings are used to organize your content and make it easier to read. They are defined using the <h1> to <h6> tags. <h1> is the most important heading, used for the main title of your page. <h6> is the least important heading.

<h1>This is a Main Heading</h1>
<h2>This is a Subheading</h2>
<h3>This is a Sub-Subheading</h3>

Notice how the heading tags are enclosed in <h1> to <h6>. The order of the headings matters; the first heading is the most important.

Paragraphs – Adding Text

Paragraphs are used to display text that flows logically within your webpage. They are defined using the <p> tag.

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

You can also use line breaks within a paragraph to improve readability.

Links – Connecting Pages

The <a> (anchor) tag is used to create hyperlinks. It defines a link to another webpage or resource.

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

The href attribute specifies the URL to which the link will point.

Images – Visual Elements

Images are used to enhance your webpage with visual content. You can include images using the <img> tag.

<img src="image.jpg" alt="A beautiful landscape">

The src attribute specifies the path to the image file. The alt attribute provides alternative text for the image, which is important for accessibility and if the image cannot be displayed.

Lists – Organizing Items

The <ul> (unordered list) and <ol> (ordered list) tags are used to create lists of items.

<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>

Tags – Understanding the Basics

• <div>: A generic container element used for grouping content.
• <br>: Inserts a line break.
• <hr>: Creates a horizontal rule (line).

💡 Tip: Use CSS for Styling

While HTML provides the structure of your webpage, CSS (Cascading Style Sheets) is used to control the visual presentation of your content. You can use CSS to change the colors, fonts, and layout of your elements.

🖥️ Try It Yourself

Here are a few exercises to practice what you've learned:

1. Create a simple webpage with a heading, a paragraph, and a link.
2. Add an image to your webpage and use the alt attribute.
3. Create a bulleted list with three items.
4. Experiment with different HTML tags to see how they affect the appearance of your webpage.