- This topic is empty.
-
Topic
-
In HTML, tags are the fundamental building blocks used to create elements in a web document. These tags define the structure and content of a web page, allowing web browsers to interpret and display the content correctly. Tags are enclosed in angle brackets (
< >
) and typically come in pairs: an opening tag and a closing tag, with the content placed between them.Basic Structure of Tags
- Opening Tag: This marks the beginning of an element. It includes the element’s name and may contain attributes.
html
<tagname attribute="value">
- Closing Tag: This marks the end of an element. It includes a forward slash before the element’s name.
html
</tagname>
- Self-Closing Tag: Some elements do not have content and can be self-closed. In HTML5, the forward slash is optional.
html
<tagname attribute="value" />
Common HTML Tags and Their Uses
- Document Structure Tags
<!DOCTYPE html>
: Declares the document type and version of HTML.<html>
: The root element of an HTML document.<head>
: Contains meta-information about the document.<body>
: Contains the content of the document.
- Head Section Tags
<title>
: Sets the title of the document, which appears in the browser’s title bar or tab.<meta>
: Provides metadata such as character set, viewport settings, and keywords.<link>
: Links external resources like stylesheets.<style>
: Contains internal CSS styles.<script>
: Includes or references JavaScript code.
- Content Section Tags
<h1>
to<h6>
: Define headings, with<h1>
being the most important and<h6>
the least.<p>
: Defines a paragraph.<a>
: Creates a hyperlink.<img>
: Embeds an image.<ul>
,<ol>
,<li>
: Create unordered (bulleted) and ordered (numbered) lists.<div>
: Defines a division or section, used for grouping content.<span>
: Inline container for text, used for styling purposes.
- Form and Input Tags
<form>
: Defines an HTML form for user input.<input>
: Defines an input field.<textarea>
: Defines a multiline text input.<button>
: Defines a clickable button.<select>
,<option>
: Creates a dropdown list.
- Media Tags
<audio>
: Embeds audio content.<video>
: Embeds video content.<source>
: Specifies multiple media resources for<audio>
and<video>
.<embed>
: Embeds external content like a plugin.
- Table Tags
<table>
: Defines a table.<tr>
: Defines a table row.<td>
: Defines a table cell.<th>
: Defines a table header cell.<thead>
,<tbody>
,<tfoot>
: Group table header, body, and footer content.
Example HTML Document
Here’s a simple example of an HTML document using various tags:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Example HTML Document</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#about”>About</a></li>
<li><a href=”#contact”>Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id=”home”>
<h2>Home</h2>
<p>This is the home section of the website.</p>
</section>
<section id=”about”>
<h2>About</h2>
<p>This is the about section of the website.</p>
</section>
<section id=”contact”>
<h2>Contact</h2>
<form action=”/submit” method=”post”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name”>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”>
<button type=”submit”>Submit</button>
</form>
</section>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>In this example:
- The
<html>
element is the root element. - The
<head>
section contains metadata and links to external resources. - The
<body>
section contains the visible content, structured with headers, navigation, sections, and a form.
HTML tags are essential for creating structured, well-formed web documents. Understanding the purpose and proper use of these tags is crucial for web development and ensuring that web pages are displayed correctly across different browsers and devices.
- Opening Tag: This marks the beginning of an element. It includes the element’s name and may contain attributes.
- You must be logged in to reply to this topic.