Scribd
Upload
2 views

HTML Basic Tags

The document provides an overview of HTML structure, including key elements like DOCTYPE, HTML, head, and body. It lists basic HTML tags for headings, paragraphs, links, lists, tables, and semantic elements, emphasizing their roles in content organization. Additionally, it highlights the importance of HTML in structuring content, ensuring accessibility, and serving as the foundation for web development.

Uploaded by

spidyronaldo07
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML Basic Tags

The document provides an overview of HTML structure, including key elements like DOCTYPE, HTML, head, and body. It lists basic HTML tags for headings, paragraphs, links, lists, tables, and semantic elements, emphasizing their roles in content organization. Additionally, it highlights the importance of HTML in structuring content, ensuring accessibility, and serving as the foundation for web development.

Uploaded by

spidyronaldo07
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Overview of the structure of HTML, basic tags, and its importance:

# Structure of HTML
1. DOCTYPE Declaration: <!DOCTYPE html> declares the document type as HTML5.
2. HTML Element: <html> is the root element of the HTML document.
3. Head Element: <head> contains metadata about the document, such as title, charset, and
links to external stylesheets or scripts.
4. Body Element: <body> contains the content of the HTML document.

# Basic HTML Tags


1. Heading Tags
- <h1>: Main heading
- <h2>: Subheading
- <h3>: Sub-subheading
- <h4>, <h5>, <h6>: Additional subheadings

2. Paragraph and Text Tags


- <p>: Paragraph
- <span>: Inline text container
- <br>: Line break
- <hr>: Horizontal rule

3. Link and Image Tags


- <a>: Hyperlink
- <img>: Image
- <picture>: Container for multiple image sources

4. List Tags
- <ul>: Unordered list
- <ol>: Ordered list
- <li>: List item

5. Table Tags
- <table>: Table
- <tr>: Table row
- <td>: Table data
- <th>: Table header

6. Semantic Tags
- <header>: Header section
- <nav>: Navigation section
- <main>: Main content section
- <section>: Self-contained section
- <article>: Independent article
- <aside>: Supplementary content
- <footer>: Footer section

# Importance of HTML
1. Structures Content: HTML provides a structure for content, making it easier to read and
understand.
2. Platform Independence: HTML documents can be displayed on various devices and
platforms, including desktops, laptops, tablets, and mobile phones.
3. Search Engine Optimization (SEO): HTML elements like headings, paragraphs, and links
help search engines understand the content and structure of a webpage.
4. Accessibility: HTML provides features like semantic tags, alt text for images, and ARIA
attributes to make web content more accessible to people with disabilities.
5. Basic Building Block: HTML is the foundation of web development, and understanding HTML
is essential for creating web pages, web applications, and mobile applications.

CODE:
<!DOCTYPE html>
<html>
<head>
​ <title>HTML Tags Example</title>
</head>
<body>
​ <!-- Heading Tags -->
​ <h1>Main Heading</h1>
​ <h2>Subheading</h2>
​ <h3>Sub-subheading</h3>
​ <h4>Heading 4</h4>
​ <h5>Heading 5</h5>
​ <h6>Heading 6</h6>

​ <!-- Paragraph and Text Tags -->


​ <p>This is a paragraph of text.</p>
​ <span>This is an inline text container.</span>
​ <br>
​ <hr>

​ <!-- Link and Image Tags -->


​ <a href="https://www.example.com">Visit Example Website</a>
​ <img src="image.jpg" alt="Example Image" width="300" height="200">

​ <!-- List Tags -->


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

​ <ol>
​ ​ <li>Ordered Item 1</li>
​ ​ <li>Ordered Item 2</li>
​ ​ <li>Ordered Item 3</li>
​ </ol>

​ <!-- Table Tags -->


​ <table border="1">
​ ​ <tr>
​ ​ ​ <th>Header 1</th>
​ ​ ​ <th>Header 2</th>
​ ​ </tr>
​ ​ <tr>
​ ​ ​ <td>Cell 1</td>
​ ​ ​ <td>Cell 2</td>
​ ​ </tr>
​ </table>

​ <!-- Semantic Tags -->


​ <header>
​ ​ <h1>Header Section</h1>
​ </header>

​ <nav>
​ ​ <ul>
​ ​ ​ <li><a href="#">Link 1</a></li>
​ ​ ​ <li><a href="#">Link 2</a></li>
​ ​ </ul>
​ </nav>

​ <main>
​ ​ <section>
​ ​ ​ <h2>Main Content Section</h2>
​ ​ ​ <p>This is the main content section.</p>
​ ​ </section>
​ </main>

​ <aside>
​ ​ <h2>Aside Section</h2>
​ ​ <p>This is the aside section.</p>
​ </aside>
​ <footer>
​ ​ <h2>Footer Section</h2>
​ ​ <p>This is the footer section.</p>
​ </footer>
</body>
</html>

You might also like