HTML stands for Hypertext Markup Language. It is created for designing Web Pages and Web applications.
Hypertext: It describes the way according to which all the HTML documents (Web Pages) are linked together. Therefore, the link available is known as Hypertext.
Markup Language: It means to simply “mark up” a text document with tags that informs the browser “How to structure it to display”.
Semantics: HTML5 introduced semantic elements like <header>, <nav>, <section>, <article>, <footer>, and <aside>, which provide better structure and meaning to web content.
Multimedia Support: HTML5 introduced native support for <audio> and <video> elements, enabling direct embedding and playback of audio and video content without the need for plugins.
Canvas: The <canvas> element allows dynamic rendering of graphics, animations, and visualizations using JavaScript, providing a powerful drawing surface within the browser.
Form Enhancements: HTML5 introduced new input types (date, email, number, etc.) and attributes (placeholder, required, autocomplete, etc.) to enhance form input and validation capabilities.
Local Storage: HTML5 introduced the Web Storage API, which allows storing data locally on the client's browser using localStorage and sessionStorage, providing a more efficient and persistent alternative to cookies.
<div> is a block-level element used for grouping and creating sections of content. It typically starts on a new line and takes up the full width available.
<span> is an inline-level element used for applying styles and targeting specific text within a block of content. It remains within the flow of text and only occupies the space necessary for its content.
Ordered Lists (<ol>): Ordered lists are used when the items need to be displayed in a specific sequential order. Each list item is marked with a number or another sequential marker. By default, the numbering starts from 1, but you can customize the start value and the numbering style using CSS.
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Unordered Lists (<ul>): Unordered lists are used when the items do not require a specific order or sequence. Each list item is typically marked with a bullet point (disc, circle, or square) by default, but you can customize the bullet style using CSS.
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
Definition Lists (<dl>): Definition lists are used to present terms (definitions) and their corresponding descriptions. Each term is defined using the <dt> tag, and its description is provided using the <dd> tag. This type of list is commonly used for glossaries, dictionaries, or FAQs.
<dl>>
<dt>HTML/dt>
<dd>HyperText Markup Language/dd>
<dt>CSS/dt>
<dd>Cascading Style Sheets/dd>
</dl>
<a>: This is the anchor element, which is used to create a hyperlink.
href="URL": This attribute specifies the destination URL that the link should navigate to. Replace "URL" with the actual URL.
Link Text: This is the visible text that will be displayed as the link. Replace it with the desired text.
<a href="https://www.teentechy.com">Visit Teentechy Website</a>
<img> tag in HTML is to insert and display images on a web page. It defines an image element and allows you to specify the image source (src attribute), provide alternative text (alt attribute), and control the display dimensions of the image.
<img src="image.jpg" alt="Description of the image" width="300" height="200">
<video>: This is the video element, used to embed videos in HTML.
src="video.mp4": This attribute specifies the source URL of the video file. Replace "video.mp4" with the actual URL or file path of the video.
controls: This attribute adds playback controls (play, pause, volume, etc.) to the video player.
The width and height attributes set the dimensions of the video player.
<video src="video.mp4" controls width="640" height="360" poster="poster.jpg">Your browser does not support the video tag.</video>
<header> tag in HTML5 is to represent the introductory or navigational section at the top of a document or a section. It typically contains branding, main heading, navigation menus, or other introductory content.
<footer> tag in HTML5 is to represent the closing or bottom section of a document or a section. It is commonly used to include information such as copyright notices, contact details, related links, or site-wide navigational links.
In HTML, there are various types of form input elements that allow users to input data. Here are some commonly used form input elements:
<input type="text">: This element creates a text input field where users can enter single-line text.
<input type="password">: It creates a password input field that masks the entered text for security purposes.
<input type="email">: This element is used for email input fields and validates that the entered value follows the email format.
<input type="number">: It creates a numeric input field that allows users to enter only numeric values.
<input type="checkbox">: This element presents a checkbox that users can select or deselect.
<input type="radio">: It represents a radio button where users can select one option from a group of options.
<input type="submit">: This element creates a submit button that, when clicked, submits the form data to the server.
<input type="file">: It allows users to upload files from their device.
<textarea>: This element creates a multi-line text input field where users can enter longer text or comments.
<select>: It creates a drop-down list of options from which users can select one or more items.
HTML5 introduced several built-in form validation features that allow you to validate form input without relying solely on JavaScript or server-side validation. Here are some ways to validate form input using HTML5:
Required Field: You can make a field required by adding the required attribute to the input element. This ensures that the user must enter a value before submitting the form.
<input type="text" name="username" required>
Input Types: HTML5 introduced specific input types that have built-in validation. For example, you can use the email type to validate that the input is a valid email address.
<input type="email" name="email">
Pattern Matching: You can use the pattern attribute with a regular expression to validate the format of an input. For example, to validate a phone number in a specific format:
<input type="text" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">
Minimum and Maximum Values: For numeric input fields, you can use the min and max attributes to specify the minimum and maximum allowed values.
<input type="number" name="age" min="18" max="99">
Error Messages: HTML5 allows you to customize error messages that are displayed when validation fails. You can use the setCustomValidity() method in JavaScript or the title attribute in HTML to provide custom error messages.
<input type="email" name="email" required title="Please enter a valid email address">
The <table> tag in HTML is used to create a structured grid or tabular representation of data. It is designed to display data in rows and columns, providing a way to organize and present information in a tabular format.
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Item 1</td>
<td>$10</td>
</tr>
<tr>
<td>Item 2</td>
<td>$15</td>
</tr>
</table>