Press F for Fullscreen

1/8

REC

HTML Tags Elements Attributes

Part 2: Mastering HTML Building Blocks

Simegnew Destew

Senior Full-Stack Developer

Part 2: HTML Building Blocks

What are HTML Tags?

The Foundation of Web Structure

TAG

HTML Tags Definition

HTML tags are the basic building blocks of web pages

Tags define how content should be displayed in browsers
They are enclosed in angle brackets: < >
Most tags come in pairs: opening and closing tags
Tags tell browsers what type of content they contain

STR

Tag Structure

Basic Tag Syntax:

<tagname>Content goes here</tagname>

Opening Tag: <tagname>
Content: The actual text or elements
Closing Tag: </tagname>

Common HTML Tags

Essential tags every developer should know:

Part 2: HTML Building Blocks

Start Tag & End Tag

Understanding Tag Pairs

Start Tag (Opening Tag)

Definition

Marks the beginning of an HTML element

Syntax

<tagname>

Purpose

Tells browser where the element starts

Attributes

Can contain additional information

Example

<p class="intro">

End Tag (Closing Tag)

Definition

Marks the end of an HTML element

Syntax

</tagname>

Purpose

Tells browser where the element ends

No Attributes

Never contains attributes

Example

</p>

Complete Element Example:

<!-- Start Tag -->
<p class="intro">

<!-- Content -->
This is a paragraph of text that demonstrates how HTML tags work.

<!-- End Tag -->
</p>

Part 2: HTML Building Blocks

HTML Elements Explained

Complete Building Blocks

HTML Element Anatomy

Start Tag <p class="intro">

Content This is paragraph content

End Tag </p>

All three parts together form a complete HTML element

Types of HTML Elements

Block Elements

Start on a new line and take full width

<div> <p> <h1> <ul>

Inline Elements

Flow within text and don't break lines

<span> <a> <strong> <em>

Void Elements

Self-closing with no content

<img> <br> <hr> <input>

Part 2: HTML Building Blocks

Self-Closing Tags

Void Elements in HTML

What are Self-Closing Tags?

Self-closing tags (void elements) don't have content and don't require closing tags.

Regular Element

<p>This is content</p>

Has opening tag, content, and closing tag

Self-Closing Element

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

No content, no closing tag needed

Common Self-Closing Tags

IMG

<img>

Embeds images

<img src="photo.jpg">

<br>

Line break

<br>

<hr>

Horizontal rule

<hr>

INPUT

<input>

Input field

<input type="text">

<meta>

Metadata

<meta charset="UTF-8">

LINK

<link>

External resources

<link rel="stylesheet">

Part 2: HTML Building Blocks

HTML Attributes

Adding Extra Information

What are HTML Attributes?

Attributes provide additional information about HTML elements and are always specified in the start tag.

Attribute Syntax:

<tagname attribute="value">Content</tagname>

Always placed in the start tag
Format: name="value"
Values should be enclosed in quotes
Multiple attributes can be used in one tag

Common HTML Attributes

id

Unique identifier for an element

id="main-header"

class

CSS class selector

class="btn primary"

src

Source file location

src="image.jpg"

href

Hyperlink reference

href="page.html"

alt

Alternative text for images

alt="Description"

style

Inline CSS styling

style="color: red;"

Part 2: HTML Building Blocks

Practical Demo

Working with Tags & Attributes

demo.html

<!DOCTYPE html>
<html>
<head>
  <title>HTML Tags Demo</title>
</head>
<body bgcolor="#f0f8ff">
  
  <!-- Paragraph with alignment -->
  <p align="center">
    This is a centered paragraph
  </p>
  
  <!-- Bold and Italic text -->
  <p>
    This text has <b>bold</b> and 
    <i>italic</i> formatting.
  </p>
  
  <!-- Multiple attributes -->
  <div id="container" class="main" style="border: 1px solid blue;">
    <h1 align="center">Welcome</h1>
    <p>This div has ID, class, and style attributes.</p>
  </div>
  
  <!-- Self-closing tags -->
  <br>
  <hr width="50%" align="center">
  <br>
  
  <!-- Image with attributes -->
  <img src="logodev2.jpg" alt="Company Logo" width="200" height="100">

</body>
</html>

demo.html

This is a centered paragraph

This text has bold and italic formatting.

Welcome

This div has ID, class, and style attributes.

[Image: logodev2.jpg]

Company Logo

Key Concepts Demonstrated:

Basic Tags

<p>, <b>, <i>, <div>

Attributes

align, bgcolor, id, class

Self-Closing

<br>, <hr>, <img>

Styling

style, width, height

COMPLETE

Excellent Work!

You've Mastered HTML Tags & Elements

What We Covered in Part 2:

TAG

HTML Tags

Basic building blocks of web pages

START/END

Tag Structure

Start tags and end tags

ELEM

HTML Elements

Complete building blocks

VOID

Self-Closing Tags

Elements without content

ATTR

HTML Attributes

Extra element information

DEMO

Practical Demo

Real-world examples

Practice Exercise:

Create a Styled Profile Card

Build an HTML file with:

A heading with your name using <h1>
A paragraph about yourself with <b> and <i>
A centered image using align attribute
A div with bgcolor and custom styling
Proper use of line breaks and horizontal rules

Next: Learn about DOCTYPE, head section, and semantic HTML

Presenter Notes - Part 2

Intro Slide: Welcome back! Emphasize that this video builds on HTML fundamentals by diving into the actual building blocks.

HTML Tags: Use analogies - tags are like containers that tell browsers what type of content they hold.

Start & End Tags: Emphasize the importance of proper tag pairing. Show common mistakes with unclosed tags.

HTML Elements: Differentiate between tags and elements. Tags are the syntax, elements are the complete unit.

Self-Closing Tags: Explain why some tags don't need closing. Use real-world analogies like single-use items.

HTML Attributes: Compare to properties of objects. Show how they enhance and configure elements.

Practical Demo: Live code the example. Show how different attributes affect the display.

Recap: Summarize key concepts. Emphasize that mastery of these basics is crucial for all web development.