HTML Fundamentals: Structure, Elements, and Forms
Introduction to Frontend Technologies
The three foundational pillars of frontend web development are HTML, CSS, and JavaScript.
1. HTML: The Webpage Foundation
1.1 Overview
HyperText Markup Language (HTML) is the standard markup language for creating web pages. Currently in its fifth iteration, commonly referred to as HTML5.
Key characteristics:
- HTML is not a programming language, but a markup language composed of various tags (HTML tags)
- It can describe text, graphics, animations, audio, tables, links, and more
- HTML runs in browsers and is parsed by the browser engine
1.2 Document Skeleton
Every HTML file follows a standard structural template. When creating a new HTML file, the following tags are typically auto-generated:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<main>
<!-- Page content goes here -->
</main>
</body>
</html>
1.2.1 Tag Concepts
Analyzing the code above reveals:
- HTML tags are keywords surrounded by angle brackets, such as
<html> - They typically appear in pairs, for example:
<header>Content...</header> - The first tag is called the opening tag (or start tag), such as
<header>, while the second is the closing tag (or end tag), such as</header>
1.2.2 Skeleton Tag Analysis
<!DOCTYPE html>
The first line declares that this is an HTML5 document.
<html lang="en">...</html>
This encompasses all HTML content and serves as the outermost container.
lang="en": Indicates to search engines that the page uses HTML and the primary language is English. You can change this tolang="zh-CN"for Chinese or other language codes as appropriate.- Note: This attribute is optional and doesn't restrict the content language within the page.
<head>...</head>
The head section serves as a container for metadata. Elements with in <head> can reference scripts, instruct the browser where to find stylesheets, provide meta information, and more.
The document head describes various properties and information about the document, including the document title. Data contained in the head is not displayed as actual page content.
<meta charset="UTF-8"> and <title>My Web Page</title>
<meta>: Sets the character encoding for the webpage (UTF-8 is the international standard supporting multiple languages)<title>: Sets the webpage title that appears in the browser tab
<body>...</body>
The body section is at the same hierarchy level as the head. All visible webpage content resides within the body tags.
1.3 Heading Tags
When viewing an HTML page, textual content is typically organized with headings. HTML provides six levels of headings that decrease in visual importance:
<h1>Main Heading</h1>
<h2>Subheading Level 2</h2>
<h3>Subheading Level 3</h3>
<h4>Subheading Level 4</h4>
<h5>Subheading Level 5</h5>
<h6>Subheading Level 6</h6>
Each heading occupies its own line and represents a distinct level of content hierarchy.
1.4 Paragraph Tags
Where there are headings, there are paragraphs:
<p>
This is a paragraph of content...
</p>
Using appropriate tags for specific content types is known as semantic HTML. This practice improves search engine rankings, increases click-through rates, and enhances accessibility.
1.5 Comments
Although HTML is a markup language rather than a programming language, it supports comments:
<!-- This is a comment that won't be displayed -->
Browsers ignore comments, but they help document your HTML structure. You can use comments for notes, reminders, or temporarily disabling code.
1.6 Whitespace and Line Breaks
In HTML:
Spaces are created using:
<!-- Represents one non-breaking space -->
Line breaks use:
<br> <!-- Represents a line break or carriage return -->
1.7 File Paths
Relative Path: The route from the current file location (or any relative position) to the target file.
Absolute Path: The complete route from the root directory to the target file.
1.8 Attributes
HTML tags can have attributes that provide additional information about elements. Attributes always appear as name/value pairs, such as name="value". They are always specified in the opening tag.
For example, the name attribute specifies a name for the element. The <a> tag requires either an href or name attribute:
<a href="https://www.example.com">Visit Example</a>
<a name="section-anchor"></a>
1.8.1 The id Attribute
The id attribute specifies a unique identifier for an HTML element. IDs must be unique within the HTML document.
ID or name attribute values can be any string enclosed in quotes. The string must be a unique identifier—it cannot be reused by other name or id attributes within the same document, though it can be reused across different documents.
1.8.2 The style Attribute
Inline styles were introduced in HTML 4 as a way to change element appearance directly. The style attribute allows adding CSS directly to HTML elements.
Background Color: The background-color property defines the background color of an element:
<html>
<body style="background-color: #f0f0f0;">
<h2 style="background-color: #e74c3c;">This is a heading</h2>
<p style="background-color: #2ecc71;">This is a paragraph with colored background</p>
</body>
</html>
Typography: The font-family, color, and font-size properties define the typeface, text color, and size respectively:
<html>
<body>
<h1 style="font-family: Georgia, serif;">A Styled Heading</h1>
<p style="font-family: Arial, sans-serif; color: #3498db; font-size: 18px;">
Custom styled paragraph content
</p>
</body>
</html>
Text Alignment:
<html>
<body>
<h1 style="text-align: center;">Centered Heading</h1>
<p style="text-align: justify;">This paragraph text is justified for clean edges on both sides.</p>
</body>
</html>
For a complete list of attributes, refer to the MDN Web Docs.
1.9 Images
When inserting images into HTML, first ensure the image file is accessible. You reference the image using its file path:
<img src="/assets/images/landscape.jpg"
width="400"
height="300"
title="Descriptive hover tooltip"
alt="Description shown when image fails to load" />
<img>: Stands for image; its a self-closing tag with no end tagsrc: Source attribute pointing to the image file locationwidth: Horizontal dimension;height: Vertical dimension. If omitted, the image displays at its original dimensionstitle: Text displayed when hovering over the imagealt: Alternative text displayed if the image cannot load (important for accessibility)
1.10 Hyperlinks
Hyperlinks are common webpage elements represented by the anchor tag:
<a href="https://www.example.com">Click here to visit Example</a>
- The
hrefattribute specifies the destination URL (can be external or local) - The content wrapped by the
<a>tags appears as the clickable link text on the webpage
1.11 Division Blocks
The <div> tag defines a division or section in an HTML document. It serves as a generic container for flow content, allowing you to group elements for styling or scripting purposes without inherent visual formatting.
When marked with id or class attributes, <div> becomes a powerful organizational tool:
<h1>News Portal</h1>
<p>Introduction text and general content...</p>
<div class="article-card">
<h2>Technology Breakthrough</h2>
<p>Latest developments in quantum computing...</p>
</div>
<div style="background-color: #ecf0f1; height: 200px; width: 500px; padding: 20px;">
<h2>Featured Story</h2>
<p>Important highlighted content with custom styling...</p>
</div>
1.12 Forms
The <form> tag encapsulates all user input elements, including text fields, dropdown menus, radio buttons, checkboxes, and more.
Input Types:
type="text": Standard single-line text inputtype="password": Masked input for sensitive datatype="radio": Single-selection option from a groupchecked: Boolean attribute for default selection
type="checkbox": Multiple-selection optionschecked: Boolean attribute for default selection
Select Menus:
The <select> element contains nested <option> tags, where each option represents a dropdown menu item:
<select name="country">
<option value="us">United States</option>
<option value="uk" selected>United Kingdom</option>
<option value="ca">Canada</option>
</select>
selected: Attribute indicating the default option
Text Areas:
<textarea name="message" rows="4" cols="50" placeholder="Enter your comments here...">
</textarea>
Buttons:
type="button": Generic button requiring JavaScript for functionalitytype="reset": Restores form fields to their default valuestype="submit": Sends form data to the server for processing
Common Attributes:
placeholder="Enter username": Displays hint text within empty input fieldsvalue="Submit": Defines the text displayed on buttonsname="fieldname": Identifies the data when submitted to the server
Best Practices:
- Always include labels for form controls using the
<label>element - Ensure form elements have appropriate
nameattributes for data submission - Use the
forattribute on labels to associate them with specific input IDs - Validate user input on both client and server sides
