Essential HTML Elements and Attributes for Web Development
HTML is a markup language rather than a programming language.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
Comments help document code for future reference:
<!-- This is a comment --> (Ctrl+/ shortcut in many editor)
Common structural tags include:
- Heading tags:
<h1>through<h6> - Paragraph:
<p> - Line break:
<br> - Horizontal rule:
<hr>
Text formatting elements:
- Bold:
<b>,<strong> - Italic:
<i>,<cite>,<em> - Superscript:
<sup> - Subscript:
<sub> - Large text:
<big> - Small text:
<small> - Strikethrough:
<s> - Underline:
<u>
Core attributes:
class- Specifies element class nameid- Defines unique element identifierstyle- Applies inline CSS stylingtitle- Provides additional element information
Image embedding:
<img src="images/photo.jpg" alt="Description" class="image-style">
The src attribute specifies the image file path.
Form structure:
<form action="/submit" method="post" enctype="multipart/form-data">
</form>
- action: URL for form submission
- method: HTTP method (GET or POST)
- enctype: Data encoding format
Input elements:
<input type="text" name="username" value="">
- type: Defines input behavior
- name: Identifier for server-side processing
- value: Contains user input data
Input types:
- text: Plain text input
- password: Masked text input
- number: Numeric input only
- submit: Form submission button
- button: Generic button
- radio: Single selection (group by identical name attributes)
- checkbox: Multiple selection
Important considerations:
- All form controls require name attributes for server processing
- Pre-populate fields using the value attribute
- Set default selections with checked attribute for radio/checkbox
Select dropdowns:
<select name="country">
<option value="us">United States</option>
<option value="ca" selected>Canada</option>
</select>
- name: Identifier for server retrievla
- option value: Data sent to server
- selected: Specifies default selection
