Scribd
Upload
6 views9 pages

Introduction to HTML - Copy

HTML (HyperText Markup Language) is the standard language for creating and structuring web pages using tags and elements. The document explains the basic structure of HTML documents, types of tags, common elements, and the importance of semantic elements for better readability and SEO. It also covers forms, attributes, and examples of HTML syntax.

Uploaded by

evanskwakye2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views9 pages

Introduction to HTML - Copy

HTML (HyperText Markup Language) is the standard language for creating and structuring web pages using tags and elements. The document explains the basic structure of HTML documents, types of tags, common elements, and the importance of semantic elements for better readability and SEO. It also covers forms, attributes, and examples of HTML syntax.

Uploaded by

evanskwakye2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

INTRODUCTION TO HTML

What is HTML?
HTML (HyperText Markup Language) is the standard language used to create and structure
web pages. It tells web browsers how to display content using tags and elements.
Breaking Down HTML
 HyperText: Text that contains links to other web pages or resources.
 Markup Language: Uses tags to define elements on a webpage, such as headings,
paragraphs, images, and links.
What is an HTML Tag?
A tag is a keyword enclosed in angle brackets (<>). Tags define different types of content on
a webpage.
Example of an HTML Tag:
<p>This is a paragraph.</p>
 <p> is an opening tag (starts the paragraph).
 </p> is a closing tag (ends the paragraph).
 The content inside is displayed on the webpage.
Types of Tags:
1. Paired Tags (Opening & Closing)
o Example: <p>...</p>, <h1>...</h1>, <div>...</div>
2. Self-Closing Tags (No Closing Tag)
o Example: <img>, <br>, <hr>

What is an HTML Element?


An element consists of an opening tag, content, and a closing tag.

Example of an HTML Element:


<h1>Welcome to My Website</h1>
Here:
 <h1> is the opening tag.
 "Welcome to My Website" is the content.
 </h1> is the closing tag.
 Together, they form an HTML element.

Common HTML Elements


Tag Description Example
<h1> - <h6> Headings <h1>Title</h1>
<p> Paragraph <p>This is text.</p>
<a> Hyperlink <a href="https://google.com">Google</a>
<img> Image <img src="image.jpg" alt="Image">
<ul> Unordered List <ul><li>Item</li></ul>
<ol> Ordered List <ol><li>First</li></ol>
<table> Table <table><tr><td>Data</td></tr></table>

In Summary:
Tags define the structure of an element.
Elements include an opening tag, content, and a closing tag (except for self-closing tags).
Every webpage is made up of multiple HTML elements.

BASIC STRUCTURE OF AN HTML DOCUMENT


An HTML document follows a specific structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
Explanation:
 <!DOCTYPE html>: Declares the document as an HTML5 document.
 <html>: The root element of the page.
 <head>: Contains meta-information like the title and links to stylesheets.
 <title>: Defines the title displayed in the browser tab.
 <body>: Contains the visible content of the webpage.
COMMON HTML TAGS
Headings
HTML provides six levels of headings:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Title</h3>
<h4>Subsection</h4>
<h5>Smaller Subsection</h5>
<h6>Smallest Heading</h6>
Paragraphs and Text Formatting
<p>This is a paragraph.</p>
<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
<mark>Highlighted text</mark>
<small>Small text</small>
Links
Hyperlinks allow navigation between pages.
<a href="https://www.example.com">Visit Example</a>
Images
To add images:
<img src="image.jpg" alt="Description of image">
 src: Specifies the image path.
 alt: Provides alternative text.
Lists
Ordered List (Numbered)
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Unordered List (Bulleted)
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
Tables
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Forms
Forms collect user input.
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<input type="submit" value="Submit">
</form>
HTML Attributes
Attributes provide additional information about elements. Example:
<a href="https://www.google.com" target="_blank">Google</a>
 href: Specifies the URL.
 target="_blank": Opens link in a new tab.
HTML5 Features
Semantic Elements
These elements improve readability and SEO.
<header></header>
<nav></nav>
<section></section>
<article></article>
<footer></footer>
Audio and Video
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>

<video controls width="300">


<source src="video.mp4" type="video/mp4">
</video>

What are Semantic Elements in HTML?


Semantic elements are HTML elements that have a meaningful name, clearly describing their
purpose and structure. These elements improve webpage readability for both developers and
search engines (SEO).
Why Use Semantic Elements?
Better Readability – Code is easier to understand.
Improved SEO – Search engines can better index content.
Accessibility – Helps screen readers and assistive technologies.
Easier Maintenance – Organized structure simplifies web development.
Examples of Semantic Elements
Element Description

<header> Defines the header section of a webpage.

<nav> Represents navigation links.

<section> Defines a section in a webpage.

<article> Represents an independent article or post.

<aside> Represents content aside from the main content (e.g., sidebar).

<footer> Defines the footer of a webpage.

<figure> Groups images, charts, or illustrations with captions.

<figcaption> Provides a caption for the <figure> element.

3. Example of Semantic Elements in Action


<!DOCTYPE html>
<html>
<head>
<title>Semantic HTML Example</title>
</head>
<body>

<header>
<h1>Welcome to My Website</h1>
</header>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<section>
<article>
<h2>My First Article</h2>
<p>This is a sample article about semantic HTML.</p>
</article>
</section>

<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">HTML Basics</a></li>
<li><a href="#">CSS Styling</a></li>
</ul>
</aside>

<footer>
<p>&copy; 2025 My Website. All rights reserved.</p>
</footer>
</body>
</html>

Difference Between Semantic and Non-Semantic Elements


Semantic Elements Non-Semantic Elements
<header> <div>
<nav> <span>
<section> <div>
<article> <div>
Key Difference:
 Semantic elements clearly describe their purpose (<header>, <footer>, etc.).
 Non-semantic elements like <div> and <span> do not provide meaning; they only
serve as containers.
5. Why Should You Use Semantic Elements?
Better organization of web pages
Enhanced SEO ranking
Improved accessibility for screen readers
Easier maintenance and collaboration

What Is a Form in HTML?


An HTML form is a section of a web page that allows users to enter data and submit it to a
server for processing.
Purpose of a Form
Forms are used for:
 User registration
 Login pages
 Surveys and quizzes
 Search boxes
 Checkout and payment pages
 Feedback/contact forms

Basic Syntax
<form action="/submit" method="post">
<!-- form elements go here -->
</form>
Attribute Description

action The URL where the form data is sent

HTTP method (GET or POST) used to


method
send the data

Common Form Elements


Inside the <form> tag, you place form controls
Attribute Description

(input fields):
<input type="text"> <!-- Text field -->
<input type="email"> <!-- Email field -->
<input type="password"> <!-- Password field -->
<input type="submit"> <!-- Submit button -->
<textarea></textarea> <!-- Multi-line text box -->
<select></select> <!-- Dropdown list -->

Example Form
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"
required>

<label for="email">Email:</label>
<input type="email" id="email" name="email"
required>

<input type="submit" value="Send">


</form>

In HTML, attributes provide additional information about elements. They are always
specified in the opening tag of an element and usually come in name="value" pairs.

Common HTML Attribute Structure


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

You might also like