Textarea & Select
In addition to the basic input types, HTML forms offer other controls
like textarea and select for richer user interaction. These elements
allow for more complex data collection and provide a better user
experience. In this blog, we will dive into these form controls and provide
examples.
The Textarea Element
The textarea element is used when you need multiline text input from
the user. This is particularly useful for comments, reviews, or any other
type of input where the length is unpredictable.
<textarea name="comment" rows="4" cols="50">
Enter your comment here...
</textarea>
Copy
The rows and cols attributes define the visible dimensions of the
textarea.
The Select Element
The select element creates a dropdown menu for the user. It is useful
when you have a predefined list of options for the user to choose from.
<select name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
Copy
Each option inside the select tag represents an item in the dropdown
list.
Combining Textarea and Select
You can combine textarea and select in the same form to capture
varied types of user input.
<form action="/submit">
<textarea name="comment" rows="4" cols="50">Enter
your comment here...</textarea>
<select name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
<input type="submit" value="Submit">
</form>
Copy
Conclusion
The textarea and select elements add another layer of interactivity
to HTML forms, allowing for more complex and useful data collection.
Understanding how to use these elements effectively can greatly
enhance your web application's user interface.
More on forms
HTML forms are the backbone of interactive websites. They allow users
to submit data, which can be processed on the server. While we have
covered basic input types in previous tutorials, this tutorial aims to delve
deeper into form attributes, both common and new HTML5 additions.
We'll also look at HTML5 validation attributes to ensure data integrity.
Common Attributes
action
The action attribute specifies the URL where the form data should be
sent after submission.
<form action="/submit.php" method="POST">
</form>
Copy
method
The method attribute defines how data is sent. The two most common
methods are GET and POST.
<form action="/submit.php" method="POST">
</form>
Copy
name
The name attribute specifies the name for the form element, making it
easier to reference in scripts or the server-side code.
<input type="text" name="username">
Copy
New HTML5 Attributes
placeholder
This attribute provides a hint to the user as to what can be entered in the
field.
<input type="text" placeholder="Enter your username">
Copy
required
The required attribute makes a field mandatory to fill out.
<input type="text" required>
Copy
autofocus
The autofocus attribute automatically focuses the cursor on the
particular input when the page loads.
<input type="text" autofocus>
Copy
HTML5 Validation Attributes
required
As mentioned above, this attribute makes a field mandatory.
<input type="text" required>
Copy
pattern
The pattern attribute specifies a regular expression that the input must
match to be valid.
<input type="text" pattern="[a-zA-Z0-9]+">
Copy
Conclusion
Understanding the different attributes available for HTML forms is crucial
for building robust and user-friendly web applications. This tutorial
covered both commonly used and new HTML5-specific attributes that
enhance functionality and user interaction. Employing these attributes
effectively will greatly enhance your web forms.
HTML Meta Tags
The <meta> tags in HTML provide metadata about the HTML document.
Metadata is data (information) about data. <meta> tags always go inside
the document's <head> tag and are typically used to specify the
character set, page description, keywords, author, and other metadata.
Below is an example HTML code snippet that includes various types
of <meta> tags commonly used:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- Character encoding -->
<meta name="viewport" content="width=device-width,
initial-scale=1.0"> <!-- Responsive design -->
<meta http-equiv="X-UA-Compatible"
content="ie=edge"> <!-- Internet Explorer compatibility
-->
<meta name="description" content="This is a
description of the web page"> <!-- Description for
search engines -->
<meta name="keywords" content="HTML, CSS,
JavaScript"> <!-- Keywords for search engines -->
<meta name="author" content="Your Name"> <!--
Author name -->
<title>Document</title>
</head>
<body>
<!-- Your content here -->
</body>
</html>
Copy
Explanation of each meta tag:
1. Character Encoding (charset): <meta charset="UTF-
8"> sets the character encoding for the webpage. UTF-8 is
the most common and recommended.
2. Viewport: <meta name="viewport"
content="width=device-width, initial-
scale=1.0"> sets the viewport to scale the page to the
screen width, useful for responsive design.
3. IE Compatibility: <meta http-equiv="X-UA-
Compatible" content="ie=edge"> specifies that the
page should be rendered using the latest rendering engine
available on Internet Explorer.
4. Description: <meta name="description"
content="This is a description of the web
page"> provides a brief description of the webpage, which
search engines may use in search results.
5. Keywords: <meta name="keywords" content="HTML,
CSS, JavaScript"> specifies keywords for the webpage,
which were historically used by search engines but are less
relevant today.
6. Author: <meta name="author" content="Your
Name"> indicates the name of the author of the webpage.
How to add favicon in HTML?
A favicon is a small icon that appears next to your website's title in
browser tabs. It helps in branding and easy identification among multiple
tabs.
Step 1: Create/Choose Favicon
Make a square image, usually 16x16 or 32x32 pixels, in .ico format.
You can create a favicon from this website
Step 2: Upload Favicon
Place the .ico file in your website's root directory,
where index.html is located.
Step 3: Update HTML
Insert the following code in the <head> section of your index.html file:
<link rel="icon" href="favicon.ico" type="image/x-
icon">
Copy
Replace favicon.ico with your file's path if different.
Step 4: Test
Open your site in different browsers to make sure the favicon appears.
In the next tutorial, we will talk about more HTML head elements
Link & Script Tags
The <link> and <script> tags are essential elements within an HTML
document's <head> section. They serve various purposes, like linking
external stylesheets or including JavaScript files.
The <link> Tag
The <link> tag is commonly used to link external stylesheets to an
HTML document. It's a self-closing tag, meaning it doesn't require a
closing tag.
Below is an example HTML code snippet that includes a <link> tag to
link an external stylesheet:
<link rel="stylesheet" type="text/css"
href="styles.css">
Copy
The <script> Tag
The <script> tag is used to include JavaScript code or files in an HTML
document. Unlike the <link> tag, the <script> tag must be closed
with a </script> tag.
Below is an example HTML code snippet that includes a <script> tag
to link an external JavaScript file:
<script src="script.js"
type="text/javascript"></script>
Copy
Conclusion
The <link> and <script> tags are crucial for linking external
resources like stylesheets and JavaScript files, enhancing the
functionality and presentation of your HTML documents.
Video & Audio Tags
This tutorial aims to provide a comprehensive guide on
using <video> and <audio> tags in HTML to embed media files.
The <video> Tag
The <video> tag is used to embed video files in an HTML
document. It supports multiple attributes to control the video
playback.
Example usage:
<video src="video.mp4" controls></video>
Copy
Attributes for <video> Tag
src: Specifies the path to the video file.
controls: Adds video controls, like play, pause, and
volume.
autoplay: Automatically starts playing the video when
the page loads.
loop: Repeats the video once it ends.
muted: Mutes the video by default.
poster: Specifies an image to be displayed before the
video starts playing.
width and height: Specifies the dimensions of the
video.
The <audio> Tag
The <audio> tag is used to embed audio files in an HTML
document. It also supports multiple attributes for control.
Example usage:
<audio src="audio.mp3" controls></audio>
Copy
Attributes for <audio> Tag
src: Specifies the path to the audio file.
controls: Adds audio controls, like play, pause, and
volume.
autoplay: Automatically starts playing the audio when
the page loads.
loop: Repeats the audio once it ends.
muted: Mutes the audio by default.
preload: Specifies if and how the audio should be
loaded when the page loads ('auto', 'metadata', 'none').
The "preload" attribute can have the following values:
1. none: This is the default value. It indicates that the
browser should not preload the audio file at all. The
audio file will only start downloading when the user
initiates playback.
2. metadata: This value tells the browser to preload only
the metadata of the audio file, such as its duration and
basic information about the audio. This can be useful if
you want to display the audio duration to the user
without fully loading the audio data.
3. auto: This value instructs the browser to preload the
entire audio file as much as possible without delaying
the loading of other important page content. The
browser will try to load the audio file in the
background so that it's ready to play when the user
decides to start it.
Conclusion
The <video> and <audio> tags are powerful tools for
embedding media content in HTML documents. Utilizing their
attributes allows you to offer an interactive and dynamic user
experience.
SVG in HTML
Scalable Vector Graphics (SVG) has become an indispensable
part of modern web development. SVG enables developers to
create high-quality, scalable graphics that look crisp at any size
or resolution. In this blog post, we'll explore the basics of using
SVG in HTML, its benefits, and some practical examples.
What is SVG?
SVG stands for Scalable Vector Graphics. Unlike raster images
like PNGs or JPGs, SVGs are not pixel-based. They're composed
of vectors—mathematical formulas that describe shapes, paths,
and fills. This means SVGs can be resized without losing quality.
Why Use SVG?
Scalability
SVG images can be scaled indefinitely without losing quality,
which is ideal for responsive web design.
File Size
SVG files are often smaller than their raster counterparts,
especially for simple shapes and icons.
Flexibility
SVGs can be styled, animated, and manipulated using CSS and
JavaScript.
How to Embed SVG in HTML
SVG can be embedded in HTML in several ways:
1. Inline SVG: Directly writing the SVG XML code within
HTML.
2. Using an <img> tag: Point the src attribute to an SVG
file.
3. Using CSS: Setting SVG as a background image in a CSS
file.
Inline SVG Example
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black"
stroke-width="3" fill="red" />
</svg>
Copy
<img> Tag Example
<img src="image.svg" alt="Sample SVG">
Copy
CSS Background Example
.background {
background-image: url('image.svg');
}
Copy
SVG Attributes
SVG comes with a set of attributes to control its behavior:
width and height: To set the dimensions.
viewBox: To set the coordinate system.
fill and stroke: To set the colors.
Practical Examples
Creating a Simple Icon
<svg height="30" width="30">
<rect width="30" height="30"
style="fill:rgb(0,0,255);stroke-
width:1;stroke:rgb(0,0,0)" />
</svg>
Copy
Creating Complex Shapes
SVG can also be used to create more complex shapes like
polygons, lines, and text.
Conclusion
SVG offers a powerful way to add scalable and interactive
graphics to your HTML documents. Its compatibility with CSS
and JavaScript makes it a versatile choice for modern web
development. Whether you're creating simple icons or intricate
illustrations, SVG has got you covered.
iFrames in HTML
iFrames, or Inline Frames, are an integral part of modern web
development. They allow you to embed another HTML page
within your current page. In this blog, we'll delve into the utility
of iFrames, their attributes, and some use-cases.
What is an iFrame?
An iFrame is an HTML element that enables an inline frame for
the embedding of external content. Essentially, you can load
another web page within a designated area of your current
webpage.
Why Use iFrames?
iFrames offer a variety of use-cases:
Content Isolation: iFrames allow you to isolate third-
party content, which can improve security.
Modularity: Easily embed external plugins, widgets, or
content.
Resource Separation: Content within an iFrame can
load separately from the rest of the page.
Basic Syntax
The basic syntax of an iFrame is quite straightforward:
<iframe src="URL" width="width"
height="height"></iframe>
Copy
Attributes of iFrame
Several attributes can enhance the functionality of an iFrame:
src: Specifies the URL of the page to embed.
height and width: Define the dimensions.
frameborder: Indicates whether to display a border.
scrolling: Controls the scrollbars.
name: For targeting the iFrame in JavaScript.
Practical Examples
Embedding a YouTube Video
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0" allowfullscreen></iframe>
Copy
Embedding Google Maps
<iframe src="https://maps.google.com/maps?
q=LOCATION&output=embed" frameborder="0"></iframe>
Copy
Conclusion
iFrames offers a convenient way to embed external content into
your web pages. Their flexibility and ease of use make them an
invaluable tool for modern web development.
HTML Code Tag
The HTML <code> tag is a powerful element for displaying code
snippets within a webpage. It preserves both spaces and line
breaks, making it ideal for showcasing code. In this blog post,
we'll explore how to use the <code> tag effectively, especially in
conjunction with Prism for code highlighting.
What is the <code> Tag?
The <code> tag is a semantic HTML tag that's used for
displaying code snippets. It can be used both inline and within a
block-level element like <pre>.
Why Use the <code> Tag?
Semantic Meaning: Provides semantic value to the
enclosed code.
Readability: This makes it easier for both browsers and
developers to understand that the text is code.
Styling: Easier to style and highlight with CSS or
JavaScript libraries like Prism.
Basic Usage
The most straightforward way to use the <code> tag is inline for
short code snippets:
<code>Your code here</code>
Copy
Using <code> with <pre>
For multiline code snippets, it's common to combine
the <code> tag with the <pre> tag:
<pre><code>Your multiline code here</code></pre>
Copy
Conclusion
The HTML <code> tag is a simple yet powerful way to include
code snippets in your webpage.
HTML Canvas
The <canvas> element in HTML is a powerful feature for
rendering graphics and shapes directly within web pages.
Though it's often paired with JavaScript for dynamic rendering,
the canvas itself is an HTML element. In this blog, we'll explore
what you can do with the <canvas> element alone.
What is Canvas?
The <canvas> element serves as a container for graphics, which
can be rendered via scripting. Essentially, it offers a drawing
area for visual content.
Why Use Canvas?
Here are some reasons why you might use
the <canvas> element:
Graphics: For drawing shapes, graphs, and other visual
representations.
Dynamic Content: To dynamically update visual
elements.
Interactivity: Though this involves JavaScript, the
canvas element is the foundation for interactive
graphical content.
Basic Syntax
Here's how you can define a simple <canvas> element:
<canvas id="myCanvas" width="200"
height="100"></canvas>
Copy
Attributes of Canvas
While the <canvas> element is simple, it does have a couple of
important attributes:
width: Specifies the width of the canvas.
height: Specifies the height of the canvas.
Styling with CSS
You can also style the <canvas> element with CSS. For example,
to add a border:
canvas {
border: 1px solid black;
}
Copy
Conclusion
The HTML <canvas> element serves as a robust foundation for
creating graphics and other visual elements on a web page.
Even without involving JavaScript, understanding the canvas
element and its basic attributes can be quite useful.
HTML Global Attributes
HTML Global Attributes play a crucial role in HTML development,
providing a consistent set of attributes that can be applied to
any HTML element. In this blog, we'll explore what these
attributes are, their descriptions, and how to use them
effectively.
What Are HTML Global Attributes?
The global attributes are a set of attributes that can be used
with all HTML elements, making them incredibly versatile and
essential for dynamic HTML coding.
List of Common Global Attributes
Attribute Description
accesskey Specifies a shortcut key to activate/focus an element
class Specifies one or more classes for an element
contenteditable Specifies whether the content is editable or not
Using Global Attributes
Now, let's look at some examples that illustrate the usage of
some of these global attributes.
Using the class Attribute
<div class="container">This is a container.</div>
Copy
Using the id Attribute
<span id="unique">Unique Element</span>
Copy
Using the data-* Attribute for Custom Data
<div data-user="123">Custom Data</div>
Copy
Conclusion
HTML Global Attributes offer a powerful and consistent way to
control and manage HTML elements. Understanding these
attributes can significantly improve your HTML coding efficiency
and the dynamism of the web pages you create.
HTML Entities
HTML entities are a crucial part of HTML markup language. They
enable you to display characters that are reserved in HTML or
that aren't readily available on the keyboard. In this blog, we'll
explore what HTML entities are, their types, and how to use
them.
What Are HTML Entities?
HTML entities are used to represent special characters in a
format that the browser can understand. They start with an
ampersand (&) and end with a semicolon (;).
Why Use HTML Entities?
Here are some reasons:
Reserved Characters: Characters like <, >, and & are
reserved in HTML.
Special Symbols: For symbols like ©, ®, or
mathematical symbols.
Non-Breaking Spaces: To create white spaces that
won't break into a new line.
Common HTML Entities
< for <
> for >
& for &
for a non-breaking space
© for ©
Copy
How to Use HTML Entities
Entities can be implemented easily within HTML code. Here are
some examples:
Using Reserved Characters
<p>The price is 10 < 20.</p>
Copy
Displaying Special Symbols
<p>Copyright © 2023.</p>
Copy
Creating Non-Breaking Spaces
<p>This is an example text.</p>
Copy
Conclusion
HTML entities are essential for rendering special or reserved
characters on a web page. Understanding how to use them
effectively is key to creating web pages that display content as
intended.
HTML Quotation Tag
The use of quotations is common in textual content. HTML
provides specific tags to handle this: <blockquote> for block
quotations and <q> for inline quotations. In this blog, we'll
explore these tags, their attributes, and how to style them.
What Are <blockquote> and <q> Tags?
The <blockquote> and <q> tags serve to define quotations in
HTML. While <blockquote> is used for longer, block-level
quotes, <q> is used for shorter, inline quotes.
Why Use These Tags?
They provide semantic meaning to your quotations, making it
easier for search engines to understand the context and
relevance of the content.
Basic Syntax
<blockquote> Tag
<blockquote cite="source-url">
Quotation text here.
</blockquote>
Copy
<q> Tag
<q cite="source-url">Quotation text here.</q>
Copy
Attributes
Both <blockquote> and <q> tags support the cite attribute:
cite: Specifies the URL of the quote's source.
Practical Examples
Using <blockquote> for Long Quotes
<blockquote cite="https://example.com">
This is a long quote from an external source. This
quote can span multiple lines and paragraphs.
</blockquote>
Copy
Using <q> for Short, Inline Quotes
The philosopher said, <q cite="https://example.com">The
unexamined life is not worth living.</q>
Copy
Styling with CSS
You can style these tags using CSS to better match the
aesthetics of your website.
Conclusion
The <blockquote> and <q> tags are essential for semantically
marking up quotations in HTML. They provide both readability
and SEO benefits. Understanding how to use these tags
effectively can add more depth and clarity to your web content.
Obsolete HTML Tags
As HTML has evolved, some tags have been deprecated or become
obsolete. While modern browsers might still support them, their use is
discouraged in favor of CSS or more semantic HTML5 elements. In this
blog, we'll explore some of these obsolete tags and their modern
alternatives.
What Are Obsolete Tags?
Obsolete tags are HTML elements that are no longer recommended for
use. They may lack support in modern browsers and are likely to be
phased out entirely in future versions of HTML.
Why Avoid Obsolete Tags?
Compatibility Issues: Not supported by all modern browsers.
Accessibility: This may not meet current web accessibility
standards.
Maintenance: Makes future updates difficult.
Examples of Obsolete Tags
The <font> Tag
Used to specify text color, size, and font.
<font color="red" size="3" face="verdana">This is some
text</font>
Copy
The <center> Tag
Used to center-align elements.
<center>This text will be centered</center>
Copy
The <u> Tag
Used to underline text.
<u>This text will be underlined</u>
Copy
Modern Alternatives
It's better to use CSS for styling and layout as it separates content from
presentation.
Replacing <font>
<span style="color:red; font-size:16px; font-
family:verdana;">This is some text</span>
Copy
Replacing <center>
<div style="text-align:center;">This text will be
centered</div>
Copy
Replacing <u>
<span style="text-decoration:underline;">This text will be
underlined</span>
Copy
Conclusion
Understanding obsolete HTML tags is not just a trip down memory lane;
it also emphasizes the importance of keeping up to date with the latest
web standards. Always opt for modern, semantic HTML and CSS for
styling to ensure your websites are future-proof.
< < Previous
Common Character Sets
Here are some commonly used character sets:
UTF-8: Universal Character Set, 8-bit. It can represent
any character in the Unicode standard.
ISO-8859-1: Western Alphabet.
ASCII: American Standard Code for Information
Interchange.
Examples
Using UTF-8
<meta charset="UTF-8">
Copy
Using ISO-8859-1
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
Copy
Conclusion
Understanding and specifying the correct character set is crucial
for creating web pages that render text accurately across
different platforms and languages. UTF-8 is the most commonly
used and recommended character set due to its wide
applicability and support.
