Scribd
Upload
6 views4 pages

Week 6 - Summary Notes On Tags and Examples

The document provides a comprehensive overview of various HTML tags used in web design, categorized into sections such as Basic Structure, Metadata, Headings, Lists, Tables, Forms, Links, Images, Semantic Tags, and Scripting. Each section includes a description and examples of the tags, illustrating their purpose and usage. Overall, it emphasizes the importance of these tags in creating structured, interactive, and visually appealing webpages.

Uploaded by

petrjakovlevci9805
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 views4 pages

Week 6 - Summary Notes On Tags and Examples

The document provides a comprehensive overview of various HTML tags used in web design, categorized into sections such as Basic Structure, Metadata, Headings, Lists, Tables, Forms, Links, Images, Semantic Tags, and Scripting. Each section includes a description and examples of the tags, illustrating their purpose and usage. Overall, it emphasizes the importance of these tags in creating structured, interactive, and visually appealing webpages.

Uploaded by

petrjakovlevci9805
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/ 4

In web design, HTML (HyperText Markup Language) tags are used to structure content,

create layout elements, and define interactions on a webpage.

Below is a comprehensive list of different types of HTML tags, along with examples.

1. Basic Structure Tags


These tags define the basic structure of an HTML document.

Tag Description Example


<html> Root element of an HTML document <html lang="en"> ... </html>
<head> Contains metadata, styles, and scripts <head> ... </head>
<title> Sets the page title (displayed in the browser tab) <title>My Web Page</title>
<body> Contains the main content of the webpage <body> ... </body>

2. Metadata and SEO Tags


These tags provide additional information about the webpage to browsers and search engines.

Tag Description Example


<meta>
Provides metadata like character <meta charset="UTF-8">
encoding, author, and description
<link>
Links external stylesheets or <link rel="stylesheet"
resources href="styles.css">
<style>body {background-color:
<style> Embeds internal CSS styles lightgray;}</style>
<script>console.log("Hello,
<script> Embeds JavaScript code World!");</script>

3. Heading and Text Formatting Tags


Used to structure headings and format text content.

Tag Description Example


Headings (h1 is the largest, h6 is the <h1>Main Heading</h1>
<h1> to <h6>
smallest)
<p> Paragraph <p>This is a paragraph.</p>
This is line one.<br>This is line
<br> Line break (self-closing tag) two.
<hr> Horizontal rule (divider) <hr>

1
Tag Description Example
<strong> Bold text (semantic) <strong>Important text</strong>
<b> Bold text (non-semantic) <b>Bold text</b>
<em> Italicized text (semantic) <em>Emphasized text</em>
<i> Italicized text (non-semantic) <i>Italic text</i>
<u> Underlined text <u>Underlined text</u>
<small> Smaller text <small>Small text</small>
<mark> Highlighted text <mark>Highlighted text</mark>
<blockquote>Quote
<blockquote> Block-level quotation content</blockquote>
<q> Inline quotation <q>Inline quote</q>

4. List Tags
Used to create ordered and unordered lists.

Tag Description Example


<ul> Unordered list (bullets) <ul><li>Item 1</li><li>Item 2</li></ul>
<ol> Ordered list (numbers) <ol><li>First</li><li>Second</li></ol>
<li> List item inside <ul> or <ol> <li>List item</li>
<dl> Definition list <dl><dt>Term</dt><dd>Definition</dd></dl>

5. Table Tags
Used to create tabular data.

Tag Description Example


<table> Defines a table <table>...</table>
<tr> Defines a table row <tr>...</tr>
<td> Defines a table cell (data) <td>Data</td>
<th> Defines a table header cell <th>Header</th>
<thead> Groups the table header <thead>...</thead>
<tbody> Groups the table body <tbody>...</tbody>
<tfoot> Groups the table footer <tfoot>...</tfoot>
colspan & rowspan Merges table cells <td colspan="2">Merged Cell</td>

6. Form and Input Tags


Used to collect user input.
2
Tag Description Example
<form action="submit.php"
<form> Creates a form method="POST">...</form>
<input> Creates an input field <input type="text" name="username">
<textarea> Multi-line text input <textarea rows="4" cols="50"></textarea>
<label> Labels an input field <label for="name">Name:</label>

<button>
Creates a clickable <button>Click Me</button>
button
<select> Dropdown list <select><option>Option 1</option></select>
<option> Option in a dropdown <option value="1">Choice 1</option>
<fieldset> Groups form elements <fieldset>...</fieldset>
<legend> Title for a fieldset <legend>Personal Info</legend>

7. Link and Navigation Tags


Used to create links and navigation elements.

Tag Description Example


<a href="https://example.com">Click
<a> Anchor (hyperlink) Here</a>
<nav> Navigation section <nav>...</nav>

<menu>
Represents a menu (deprecated in <menu><li>Menu Item</li></menu>
HTML5)

8. Image and Multimedia Tags


Used to add images, videos, and audio.

Tag Description Example


<img>
Embeds an <img src="image.jpg" alt="Description">
image
Groups
<figure><img
<figure> images with
src="image.jpg"><figcaption>Caption</figcaption></figure>
captions
<audio>
Embeds <audio controls><source src="audio.mp3"></audio>
audio

3
Tag Description Example
<video>
Embeds <video controls><source src="video.mp4"></video>
video

9. Semantic and Structural Tags


Improve webpage readability and SEO.

Tag Description Example


<header> Defines a header section <header>...</header>
<footer> Defines a footer section <footer>...</footer>
<section> Defines a section of a page <section>...</section>
<article> Defines independent content <article>...</article>
<aside> Sidebar content <aside>...</aside>
<main> Main content of the document <main>...</main>
<div> Generic container for styling <div class="box">...</div>
<span> Inline container for styling <span class="highlight">...</span>

10. Scripting and Interactive Tags


Used for adding interactivity.

Tag Description Example


<script> Adds JavaScript <script>console.log("Hello");</script>

<noscript>
Alternative content for <noscript>Your browser does not support
non-JS browsers JavaScript.</noscript>

Conclusion
These HTML tags help in creating structured, interactive, and visually appealing webpages.
They work together with CSS (for styling) and JavaScript (for interactivity) to form the
foundation of modern web development.

You might also like