Exploring HTML Commands: Tags, Structure, Forms, Attributes
At the core of creating webpages lies HTML—Hypertext Markup Language—which leverages tags to instruct browsers on how to present content visually. By incorporating various elements and attributes, developers shape the foundation and functionality of websites. Let's delve deeper into essential HTML commands based around tags, structure, forms, and attribute usage.
Tags and Elements
HTML utilizes tags encased in < and >, designated for structuring and styling content. Two vital tags serve as bookends for an entire document:
<html><!--body contents here-->...</html>
Headings comprised of six levels (from H1 to H6) allow users to organize content hierarchically:
<h1>Level One Heading</h1>
<h2>Level Two Heading</h2>
<!-- and so forth -->
Paragraphs are set apart using the <p> tag:
<p>Normal "block" styled text goes here.</p>
To emphasize objects, employ <strong> for boldness and <em> for emphasis:
<strong>Bold Text</strong>
<em>Emphasized Text</em>
Subscripts and superscripts, useful in mathematical equations, scientific texts, or citations, are denoted using <sub> and <sup>. For instance:
H<sub>2</sub>O - Subscripted Chemical Formula
x² + y³ - Superscripted Mathematical Expression
The HTML preformatting tag ensures that spacing and indentation remain intact despite web rendering:
<pre><code>Code Example</code></pre>
Structure
By inserting <head> and <body> tags, authors define the overall layout of their pages. Typically, the <head> segment holds metadata such as titles, while the <body> houses visible content (Fig. 1):
<head>
<!-- Head Section Content --><!--/*/-->
</head>
<body>
<!-- Body Section Content --><!--/*/-->
</body>
Figure 1: HTML Document Structure
Forms
HTML provides a framework for building functional input fields and buttons utilizing the <form>, <input>, and <button> tags:
<form method="post" action="/action_page.php">
Name: <input type="text" name="firstname"><br>
Email: <input type="email" name="email"><br>
Password: <input type="password" name="psw"><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<input type="submit" value="Submit">
</form>
Attributes
Several attributes influence the behavior and appearance of individual components. Take, for example, the href attribute for anchors, defining the destination URL upon clicking a link:
<a href="https://example.com">Link Text</a>
Or consider the align attribute for visually centering elements, now considered deprecated:
<img src="image.jpg" align="middle">
Attributes enable customization of texts and styles through CSS (Cascading Style Sheets).
