HTML utilizes the <form> element to group input fields and facilitate the submission of data. These forms play a crucial role in transmitting data to a server or handler using the specified method. This guide provides an overview and practical demonstrations of using HTML forms to collect and submit input data.

Form Submission

The Action Attribute:
The action attribute specifies the destination where the form data will be sent upon submission. Typically, this points to a script that processes the submitted information.

<form action="action.php">

The Method Attribute:
The method attribute determines the HTTP method to be used for form submission, which can be either GET or POST.

<form action="action.php" method="get"> <form action="action.php" method="post">

The GET method is commonly used to retrieve data, like fetching a post by its ID or name, or executing a search query. It appends the form data to the URL specified in the action attribute.

Example:

www.abc.com/action.php?firstName= Mozila & lastName= Firefox

The POST method, on the other hand, is utilized when submitting data to a script. It does not append the form data to the action URL but sends it within the request body.

To ensure proper submission of form data, each input field must have a name attribute.

For instance, to send the value of a field named lastname:

<input type="text" name="lastName" value="Chrome">

Additional Attributes:

<form action="action.php" method="post" target="_blank" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate> <!-- form elements --> </form>

Target Attribute in Form Tag

The target attribute specifies where the response from the form submission should be displayed.

Values:

• _blank: Response is displayed in a new window or tab.
• _self (default): Response is displayed in the same frame.
• _parent: Response is displayed in the parent frame.
• _top: Response is displayed in the entire window.
• framename: Response is displayed in a named iframe.

Note: The target attribute was deprecated in HTML 4.01 but is supported in HTML5. Although frames and framesets are not supported in HTML5, these values are still used, primarily with iframes.

Uploading Files

To upload images and files to a server, you need to specify the enctype attribute of the form tag as multipart/form-data. This attribute determines how the form data will be encoded for submission.

Example:

<form method="post" enctype="multipart/form-data" action="upload.php"> <input type="file" name="Picture" /> <input type="submit" value="Upload" /> </form>

Grouping Input Fields

When designing a form, it’s helpful to group related input fields together to maintain a structured layout. This can be achieved using the <fieldset> tag.

You can add a title to each group using the <legend> tag.

Example:

<form> <fieldset> <legend>Full Name:</legend> First Name:<br> <input type="text"><br> Last Name:<br> <input type="text"><br> </fieldset><br> <fieldset> <legend>Personal Information:</legend> Country:<br> <input type="text"><br> State:<br> <input type="text"><br> </fieldset><br> <input type="submit" value="Done"> </form>

Result:
This will create a structured form layout with grouped input fields.

Browser Support:
The <fieldset> tag is supported by the latest versions of Chrome, IE, Edge, Firefox, Safari, and Opera.

Creating an Image

To insert an image into a page, utilize the image tag. Image tags (img) do not require closing tags. The main attributes for the img tag are src (the image source) and alt (alternative text describing the image).

<img src="images/img.png" alt="This is an Image">

Images can also be sourced from web URLs:

<img src="https://unsplash.com/photos/a-person-typing-on-a-keyboard-at-a-desk-hbMk23Z2ErA" alt="Image of Laptop Desk">

Note: Images are linked to HTML pages; they are not technically inserted into the HTML page. The <img> tag creates a space for the referenced image. It is also possible to embed images directly into the page using base64:

<img src="https://unsplash.com/photos/a-person-typing-on-a-keyboard-at-a-desk-hbMk23Z2ErA" alt="Image Of Laptop Desk">

Tip: To link an image to another document, nest the <img> tag within <a> tags.

Choosing Alt Text

Alt-text is crucial for screen readers and search engines. It should accurately describe the image’s content. For example:

<img src="img.png" alt="This is an Image"/> This is written in the Blog <a href="https://google.com/"><img src="Previous.png" alt="Previous Button"/></a> / <a href="https://google.com/"><img src="Next.png" alt="Next Button"/></a>

Without the images, this would look like:

This is an Image This is written in the Blog

Previous Button / Next Button

To correct this:

• Remove the alt-text as it adds redundant information.
• Remove “Button” from the alt-text for the icons, focusing on their function.

<img src="img.png" alt="/> This is written in the Blog <a href="https://google.com/"><img src="Previous.png" alt="Previous"/></a> / <a href="https://google.com/"><img src="Next.png" alt="Next"/></a>

The presence or absence of the alt attribute conveys a semantic difference. An empty alt attribute implies that the image is supplementary to the content and can be omitted from rendering without affecting comprehension. Conversely, the absence of the alt attribute suggests that the image is integral to the content, and there is no textual equivalent available for rendering.

Responsive Image using the srcset Attribute Utilizing srcset with sizes:

Srcset with Size:

<img sizes="(min-width: 1200px) 580px, (min-width: 640px) 48vw, 98vw" srcset="img/img1.jpg 300w, img/img2.jpg 600w, img/img3.jpg 900w, img/img4.jpg 1200w" src="img/img5.jpg" alt="images">

Sizes attribute functions akin to media queries, dictating the space an image occupies within the viewport. For instance:

• If the viewport exceeds 1200px, the image spans precisely 580px, aligning with a centered content container of maximum 1200px width.
• In the range of 640px to 1200px, the image occupies 48% of the viewport’s width, adapting to the page’s scale.
• For viewports below 640px, the image expands to 98% of the viewport’s width, ensuring full coverage. The media condition is omitted for this scenario.

Srcset informs the browser about available image options and their respective sizes. For instance:

• img/img1.jpg is 300px wide,
• img/img2.jpg is 600px wide,
• img/img3.jpg is 900px wide,
• img/img4.jpg is 1200px wide.

The src attribute is obligatory for specifying the image source. In cases where srcset is used, src serves as a fallback image if the browser does not support srcset.

Using srcset without sizes:

<img src="img/img1.jpg" alt="images" srcset="img/img1.jpg 1x, img/img2.jpg 2x, img/img3.jpg 3x">

This indicates available images based on the device-pixel ratio:

• For a device-pixel ratio of 1, img/img1.jpg is utilized.
• For a ratio of 2, img/img2.jpg is chosen.
• For a ratio of 3, img/img3.jpg is preferred.

Responsive Image using the Picture Element Code:

<picture> source media="(min-width: 600px)" srcset="Img1.jpg"> <source media="(min-width: 450px)" srcset="Img2.jpg"> <img src="Img3.jpg" style="width:auto;"> </picture>

Usage:

Include all images using the source tag within a picture tag.

Result:

On screens with a width >600px, it shows img1.jpg. On screens with a width >450px, it shows Img2.jpg. On screens with other widths, it shows Img3.jpg.

CSS enriches the presentation of HTML elements within a webpage. Inline styling, executed through the style attribute within tags, is generally discouraged. Internal stylesheets, facilitated by the <style> tag, allow for the declaration of rules pertinent to specific sections of the page. Additionally, external stylesheets can be incorporated via the <link> tag, linking to an external CSS file and implementing its rules across the document. This discussion encompasses the application of all three attachment methods.

Utilizing External Stylesheets
To employ an external stylesheet, incorporate the link attribute within the document’s head:

<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>

External stylesheets can also be sourced from websites through a content delivery network (CDN), such as Bootstrap:

<head> <link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head>

CDN support for various frameworks is typically available on their respective websites.

Internal Stylesheet
CSS elements can also be included internally using the <style> tag:

<head> <style type="text/css"> body { background-color: blue; } </style> </head>

Multiple internal stylesheets can be included within a program:

<head> <style type="text/css"> body { background-color: blue; } </style> <style type="text/css"> p { background-color: red; } </style> </head>

Inline Styling
Specific elements can be styled using the style attribute:

<span style=”color: red”>This text will be red.</span>

Note: Inline styling is discouraged as it hampers the separation of content and presentation.

Multiple Stylesheets
Multiple stylesheets can be loaded, with later files and declarations taking precedence over earlier ones:

<head> <link rel=”stylesheet” type=”text/css” href=”style1.css”> <link rel=”stylesheet” type=”text/css” href=”style2.css”> </head>

In cases of conflicting rules, the background color of the document, for example, will be determined by the latter declaration.

In above case, if style1 has property of background color “Black” and style2 has property of background color “Yellow”, as the last declaration is for style2, the background color will be Yellow.

Dealing with Disabled JavaScript

In scenarios where client browsers lack JavaScript support or have it disabled, potentially due to security concerns, informing users about script execution can be achieved using the <noscript> tag. The <noscript> content displays when JavaScript is disabled.

<script> document.write(“Hello, world!”); </script> <noscript>This browser does not support JavaScript.</noscript>

Linking to an External JavaScript File

The src attribute functions akin to href for anchors, accepting absolute or relative URLs. Typically placed within the <head> tags at the document’s beginning.

<script src=”JSfile.js”></script>

Direct Inclusion of JavaScript Code

Alternatively, instead of linking to an external file, JavaScript code can be directly embedded in HTML.

<script> //JS code </script>

Including a JavaScript File for Asynchronous Execution

<script type="text/javascript" src="URL" async></script>

Attribute Breakdown:

Although scripts, icons, and stylesheets can be directly embedded into HTML markup, it is considered a best practice for efficiency and organization to include these resources in separate files and link them to your document. This section focuses on linking external resources such as stylesheets and scripts to an HTML document.

JavaScript Loading Methods
Synchronous Loading:

<script src="jspath/to.js"></script>

Conventionally, JavaScript <script> tags are positioned just before the closing </body> tag. This practice enhances the rapid display of your website’s visuals and prevents potential issues where JavaScript attempts to interact with elements before they are fully loaded.

Asynchronous Loading:

<script src="jspath/to.js" asynchronous></script>

An alternative approach is asynchronous loading, suitable when the JavaScript code isn’t essential for page initialization. By utilizing async, the browser loads the script content in parallel with other page resources. Once fully downloaded, it interrupts HTML parsing to execute the JavaScript file.

Deferred Loading:

<script src="jspath/to.js" deferred></script>

Deferred scripts operate similarly to asynchronous ones, but they postpone parsing until after the HTML is fully parsed. Unlike asynchronous scripts, deferred scripts ensure loading in the order of declaration, akin to synchronous scripts.

<noscript> Element:

<noscript>JavaScript is disabled</noscript>

The <noscript> element provides content to display if the user disables scripts or if the browser doesn’t support script usage. It can be positioned within either the <head> or the <body> section of the document.

Incorporating External CSS Stylesheets

<link rel="stylesheet" href="csspath/to.css" type="text/css">

Conventionally, CSS <link> tags are positioned within the <head> tag at the outset of your HTML document. This arrangement ensures that CSS styles are loaded first, allowing them to apply to your page progressively. Thus, your page avoids displaying unstyled HTML content while waiting for the CSS to load. The type attribute is generally redundant in HTML5, as HTML5 inherently supports CSS.

<link rel="stylesheet" href="csspath/to.css" type="text/css"> <link rel="stylesheet" href="csspath/to.css">

Both of these <link> tags achieve the same result in HTML5, with or without the type attribute.

Alternatively, a less common practice involves using the @import statement within direct CSS:

<style type="text/css"> @import("jspath/to.css") </style> <style> @import("jspath/to.css") </style>

Managing Favicon

<link rel="icon" type="image/png" href="/favicon.png"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

For favicon management, specify image/png for PNG files and image/x-icon for icon (*.ico) files. The presence of a file named favicon.ico at the root of your website typically results in automatic loading and application without the need for a <link> tag. However, it’s worth noting that browsers may be sluggish and resistant to updating their cache if this file undergoes changes.

Implementing Alternative CSS Stylesheets

<link rel="alternate stylesheet" href="csspath/to/style.css" title="Title">

Certain browsers offer support for alternate style sheets if they are provided. By default, these alternate stylesheets remain inactive but can be activated through browser settings:

• Firefox allows users to select the stylesheet via the View > Page Style submenu.
• Internet Explorer supports this feature from version 8, accessible through View > Page Style (as of IE 11).
• Chrome requires an extension to utilize this feature (as of version 48). Alternatively, the webpage itself can offer a user interface to enable users to switch between styles.
  (Source: the MDN Docs)

Utilizing Resource Hinting Attributes

<!-- Preconnect --> <link rel="preconnect" href="URL"> <!-- DNS-Prefetch --> <link rel="dns-prefetch" href="URL"> <!-- Prefetch --> <link rel="prefetch" href="URL"> <!-- Prerender --> <link rel="prerender" href="URL">

These attributes serve different purposes:

• Preconnect resolves DNS and initiates a TCP handshake and optional TLS negotiation.
• DNS-Prefetch instructs browsers to resolve the DNS for a URL, enhancing the loading speed of assets from that URL.
• Prefetch advises browsers to prefetch a specified resource for quicker loading.
• Prerender prompts browsers to fetch and render the URL in the background, allowing for instantaneous delivery to the user upon navigation to that URL. Note that Prerender is an experimental feature.

Managing the Link ‘media’ Attribute

<link rel="stylesheet" href="file.css" media="print">

The media attribute specifies which style sheet should be applied for a specific type of media. Setting the value to “print” ensures that the style sheet is only applied when printing pages. The attribute can accept various media type values, akin to a CSS media query.

Implementing Prev and Next Links

<!-- Prev and Next Links --> <link rel="prev" href="<http://abc.com/page1>"> <link rel="next" href="<http://abc.com/page2>">

In cases where a page forms part of a series of articles, the prev and next attributes can be used to link to preceding and succeeding pages.

Enabling Web Feed Discovery

<!-- Web Feed Discovery --> <!-- Use the rel="alternate" attribute to facilitate the discoverability of Atom/RSS feeds. --> <link rel="alternate" type="application/atom+xml" href="<http://abc.com/feed.xml>" /> <link rel="alternate" type="application/rss+xml" href="<http://abc.com/feed.xml>" />

These <link> tags enable the discovery of Atom/RSS feeds, providing alternative feed formats for the website.

Created by Dhruv Mahant

Last updated: yesterday at 4:51 PM

1 min readSee how many people viewed this page

Compatibility with Older Browsers:

Data attributes were introduced with HTML5, a standard widely supported by modern browsers. However, older browsers predating HTML5 do not recognize these data attributes.

According to HTML specifications, attributes unrecognized by the browser should be left untouched, and the browser will simply disregard them during page rendering.

Web developers have leveraged this aspect to create non-standard attributes, which are attributes not defined in HTML specifications. For instance, consider the value attribute in the following <img> tag:

<img src="img.jpg" value="imgValue" />

Since the <img> tag specifications do not include a value attribute, and it’s not a global attribute, value is considered a non-standard attribute.

Despite the lack of support in older browsers, data attributes still function as intended. You can both set and retrieve them using generic JavaScript methods like setAttribute and getAttribute. However, the newer dataset property, available in modern browsers, cannot be utilized in older ones.

Use Of Data Attributes:

You can create custom data attributes in HTML5 using the data-* syntax. These attributes provide a handy way to store data within HTML elements, which can then be accessed and manipulated using JavaScript. For instance:

<div data-submitted="yes" class="class1"> ... content ... </div>

In this example, we’ve assigned a custom data attribute data-submitted with a value of "yes" to a <div> element with the class class1. The data-* structure allows you to name the attribute after the data- part, making it accessible for retrieval or modification via JavaScript.

Classes and IDs simplify referencing HTML elements from scripts and stylesheets. The class attribute can be applied to one or more tags and is utilized by CSS for styling. However, IDs are intended to uniquely identify a single element, thus the same ID should not be reused. IDs are commonly used with JavaScript and internal document links, but their usage in CSS is discouraged.

Assigning a Class to an Element

Classes serve as identifiers for the elements they are assigned to. Use the class attribute to assign a class to an element:

<div class="class1"></div>

To assign multiple classes to an element, separate the class names with spaces:

<div class="class1 class2"></div>

Utilizing classes in CSS enables styling specific elements without affecting all elements of the same type. For instance, the following <span> elements can have distinct stylings:

<span></span> <span class="class1"></span>

Elements with the same class name can be styled uniformly across the page, unless specified otherwise in the CSS:

<div class="class1">This is class 1</div> <span class="class1">This is class 1</span>

However, if targeting only <div> elements with the class class1, specificity can be added in the CSS:

div.class1 { color: red; }

It’s generally recommended to utilize only classes (e.g., .class1) rather than elements with classes (e.g., div.class1) when styling with CSS. Classes can also be nested in CSS selectors, such as:

.class1 .class2 { color: green; } /* Descendant combinator */ .class1 > .class2 { color: yellow; } /* Child combinator */

Additionally, you can chain class selectors to select elements with a combination of several classes.

You have the option to chain the class selector to exclusively target elements that possess a combination of multiple classes. Consider the following HTML scenario:

<div class="class1 class2 class3">This text will be red</div>

Suppose we aim to make this particular text appear pink. In such cases, we can employ the following CSS approach:

.class1.class2.class3 { color: red; }

Assigning an ID to an Element

The ID attribute of an element serves as a unique identifier within the entire document. Its purpose is to uniquely identify the element for linking, scripting, or styling purposes.

<div id="id1"></div>

Avoid having two elements with the same ID in the same document, as it may lead to unexpected behavior when styling with CSS or adding functionality with JavaScript.

To reference elements by their ID in CSS, prefix the ID with #:

#id1 { color: red; }

To navigate to an element with an ID on a page, append # followed by the element name in the URL:

<http://abc.com/about#id1>

This feature is widely supported in browsers and doesn’t require additional JavaScript or CSS to function.

Acceptable Values

For an ID (Version ≥ 5)

The value of an ID must be unique in the document, cannot contain spaces, and must contain at least one character. Therefore, the value can include digits, punctuation characters, special characters, etc., but not whitespace.

Valid examples:

<div id="id1"> ... </div> <div id="111"> ... </div> <div id="#%a;sdm-||"> ... </div> <div id="____b"> ... </div>

Invalid examples:

<div id=" "> ... </div> <div id="id1"> ... </div> <!-- Duplicate IDs -->

The ID value should commence with a letter and may then be followed by:

• Letters (A-Z/a-z)
• Digits (0-9)
• Hyphens (“-“)
• Underscores (“_”)
• Colons (“:”)
• Periods (“.”)

Looking at the initial examples provided in the HTML5 section, only one is considered valid:

<div id="class1"> ... </div>

These formats are also acceptable:

<div id="class1"> ... </div> <div id="class-1"> ... </div> <div id="class_1"> ... </div> <div id="class:1"> ... </div> <div id="class.1"> ... </div>

Remember, if the ID value does not commence with a letter (whether uppercase or lowercase), it is considered invalid.

For a Class

Classes follow similar rules to IDs but do not need to be unique in the document. While duplicate class names are acceptable, it’s crucial to avoid duplicate IDs.

Important Note: Treatment of ID and Class Values Outside of HTML

Be cautious when using numbers, punctuation, or special characters in ID or class values, as they may cause issues in other contexts such as CSS, JavaScript, and regular expressions.

For instance, while the following ID is valid in HTML5:

<div id="1id"> ... </div>

It is invalid in CSS due to its restrictions on identifiers:

In most cases, you may need to escape characters in contexts with restrictions or special meanings.

Issues Related to Duplicate IDs

Having multiple elements with the same ID is a challenging problem to troubleshoot. While the HTML parser will attempt to render the page, it may lead to misbehavior in the web page.

For example:

<div id="id1">a</div> <div id="id1">b</div>

While CSS selectors will still work:

#id1 { color: green; }

JavaScript may fail to handle both elements:

var html = document.getElementById("id1").innerHTML;

In this scenario, the html variable will only contain the content of the first <div> (“i”).

Similar to other programming, markup, and markdown languages, HTML comments serve to provide developers with development-specific information without impacting the user interface. However, unlike some other languages, HTML comments can be utilized to target HTML elements specifically for Internet Explorer. This section elucidates the process of crafting HTML comments and their practical applications.

Section 9.1. Creating Comments

HTML comments are effective for leaving annotations within the code for personal or collaborative reference. They are initiated with <!-- and concluded with -->, as demonstrated below:

<!-- I'm a comment! -->

Comments can also be inserted inline within other content:

<h1>This is a Header <!-- This comment will not be displayed -->.</h1>

For more elaborate notes, comments can span multiple lines:

<!-- This is a multiline comment. Anything written in this section will not get displayed by browser. -->

However, it’s essential to note that comments cannot be placed within another HTML tag, as it would result in invalid HTML syntax:

<h1 <!-- comment -->>This will throw an error/h1>

To maintain compatibility with tools parsing HTML as XML or SGML, it’s advised not to include two consecutive dashes -- within the comment body.

Section 9.2. Commenting out Whitespace

Inline display elements, such as <span> or <a>, typically include up to one whitespace character before and after them in the document. To mitigate lengthy markup lines and unintentional whitespace, comments can be used to nullify whitespace characters:

<a href="#">No extra space as we are using comments</a><!-- --><button>Button</button>

Omitting the comment between inline elements results in an unintended space between them. In some cases, preserving the space character is necessary.

Example code:

<a href="#">No extra space as we are using comments</a><!-- --><button>Button</button> <hr> <a href="#">Wxtra space as we are not using comments</a> <button>Button</button>

Output:

The <table> element in HTML empowers web creators to present tabular information, including text, images, links, and additional tables, in a structured format characterized by rows and columns of cells.

Simple Table Format:

<table> <tr> <th>Column 1, Row 1</th> <th>Column 2, Row 1</th> </tr> <tr> <td> Column1, Row 2</td> <td> Column2, Row 2</td> </tr> <tr> <td> Column1, Row 3</td> <td> Column2, Row 3</td> </tr> </table>

The code snippet will generate a <table> comprising three rows in total (<tr>): one row containing header cells (<th>), and two rows containing content cells (<td>). <th> elements serve as tabular headers, while <td> elements represent tabular data. You have the flexibility to include any desired content within <td> or <th> elements.

Example table layout:

Spanning:

You can extend the span of table cells across multiple columns or rows by utilizing the colspan and rowspan attributes, which can be applied to both <th> and <td> elements.

table> <tr> <th>Column 1, Row 1</th> <th>Column 2, Row 1</th> </tr> <tr> <td colspan="2"> Column1, Row 2</td> <td> Column2, Row 2</td> </tr> <tr> <td rowspan="2"> Column 1, Row 3 - Spanned Across Two Rows</td> <td> Column2, Row 3</td> </tr> <tr> <td>column 1, Row 4</td> <td>column 2, Row 4</td> </tr> </table>

Output:

Note: It’s important to avoid designing tables where rows and columns overlap, as this violates HTML standards and may produce inconsistent rendering across different web browsers.

Explanation of attributes:

• rowspan: Specifies the number of rows spanned by a cell. Default is 1, and 0 means it spans to the last row of the table section (<thead>, <tbody>, or <tfoot>).
• colspan: Specifies the number of columns spanned by the current cell. Default is 1, and 0 means it extends to the last column of the <colgroup> in which the cell is defined.

Column Groups:

At times, you might find it necessary to style a column or a group of columns, or to logically group columns for semantic clarity. For such purposes, HTML provides the <colgroup> and <col> elements.

The <colgroup> tag, which is optional, enables you to group columns together. It should be nested within a <table> element, positioned after any <caption> elements, and before any table content (e.g., <tr>, <thead>, <tbody>, etc.).

Example usage of <colgroup>:

<table> <colgroup span="3"></colgroup> <colgroup span="2"></colgroup> </table>

On the other hand, the <col> tag is optional and allows you to target individual columns or a range of columns without applying logical grouping. If used, <col> elements must be placed within a <colgroup> element.

Example usage of <col>:

<table> <colgroup> <col id="id1" /> <col /> </colgroup> <colgroup> <col class="class 1" /> <col class="class 2" span="2" /> </colgroup> <!-- More colgroup elements with col elements can be added here --> </table>

CSS styles such as border, background, width, visibility, and display (including display: none) can be applied to both <colgroup> and <col> elements. Utilizing display: none will effectively remove the specified columns from display, causing the table to render as if those cells do not exist.

Table with head, body, foot and caption

HTML offers additional elements such as <thead>, <tbody>, <tfoot>, and <caption> to enhance the semantic structure of tables and facilitate separate CSS styling. These elements play a crucial role in organizing and styling tabular data effectively.

When printing a table that spans multiple pages, most browsers repeat the contents of <thead> on each page, ensuring clarity and continuity.

It’s essential to follow a specific order while structuring tables with these elements. However, not every element behaves intuitively within this structure. The following example illustrates the correct placement of these elements:

<table> <caption>Title Of The Table</caption> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Body Text 1</td> <td>Body Text 2</td> </tr> </tbody> <tfoot> <tr> <td>Footer Text 1</td> <td>Footer Text 2</td> </tr> </tfoot> </table>

The example below demonstrates two renditions of the table: one without any styling and the other with CSS properties applied for illustration purposes. These styles include background-color, color, and border. While these styles are provided as a visual aid, they are not integral to understanding the table structure.

Styling details:

• <caption>: White text on a black background.
• <thead>: Bold text on a blue background.
• <tbody>: Text on a pink background.
• <tfoot>: Text on a red background.
• <th>: Black borders.
• <td>: Green borders.

Heading Scope

The <th> elements are commonly used to designate headings for table rows and columns, enhancing table readability. Here’s an example:

<table> <thead> <tr> <td></td> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <th>Row 1</th> <td></td> <td></td> </tr> <tr> <th>Row 2</th> <td></td> <td></td> </tr> </tbody> </table>

To enhance accessibility, you can utilize the scope attribute. Here’s the improved version with the scope attribute:

<table> <thead> <tr> <td></td> <th scope="col">Column 1</th> <th scope="col">Column 2</th> </tr> </thead> <tbody> <tr> <th scope="row">Row 1</th> <td></td> <td></td> </tr> <tr> <th scope="row">RoW 2</th> <td></td> <td></td> </tr> </tbody> </table>

The scope attribute is an enumerated attribute, meaning it can have a value from a specific set. This set includes:

• col
• row
• colgroup
• rowgroup

HTML provides three methods for defining lists: ordered lists, unordered lists, and description lists. Ordered lists utilize ordinal sequences to signify the order of list items, unordered lists employ symbols like bullets to present items in no specific order, and description lists use indentation to display items alongside their descriptions. This topic elucidates the utilization and amalgamation of these list types within HTML markup.

Ordered List:

You can create an ordered list using the <ol> tag, and each list item can be defined with the <li> tag, as demonstrated below:

<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

This code will generate a numbered list, which is the default style:

1. Item 1
2. Item 2
3. Item 3

Manual Number Manipulation:

There are several ways to manipulate the numbering of list items in an ordered list. One method is to specify a starting number using the start attribute. The list will commence at this specified number and continue incrementing by one as usual.

<ol start="3"> <li> Item 1</li> <li> Item 2</li> <li> Item 3</li> </ol>

This will result in a numbered list, starting from the defined number:

3. Item 1
4. Item 2
5. Item 3

You can also explicitly assign a particular number to a specific list item. Subsequent list items after one with a specified value will continue counting from that item’s value, disregarding the numbering of the parent list.

<li value="3"></li>

It’s important to note that by using the value attribute directly on a list item, you can reset an ordered list’s numbering system by starting the numbering from a lower value. For instance, if the parent list had reached value 6 and encountered a list item at value 3, that item would display as 1 and resume counting from that point onward.

ol start="3"> <li> Item 1</li> <li> Item 2</li> <li value="1"> Item 3</li> <li> Item 3</li> <li> Item 3</li> <li> Item 3</li> </ol>

In the example above, the list follows the sequence 3,4,1,2,3,4– restarting from a lower number than before and duplicating the number 6 in the list.

Note: The start and value attributes only accept numerical values, even if the ordered list is configured to display Roman numerals or letters.

Version ≥ 5: You can reverse the numbering by adding reversed in your <ol> element:

<ol reversed> <li> Item 1</li> <li> Item 2</li> <li value="1"> Item 3</li> <li> Item 3</li> <li> Item 3</li> <li> Item 3</li> </ol>

Reverse numbering is useful for lists where new items are continuously added, such as podcast episodes or presentations, and you want the most recent items to appear first.

Changing the Numeral Type:

You can easily alter the type of numeral displayed in the list item marker by using the type attribute:

<ol type="1|a|A|i|I">

Here are the descriptions and examples of different types:

You should use <ol> to display a list of items where intentional ordering is emphasized. If changing the order of the items does not affect the correctness of the list, you should use <ul>.

Unordered List:

You can create an unordered list using the <ul> tag, and each list item can be defined with the <li> tag, as illustrated below:

<ul> <li> Item 1</li> <li> Item 2</li> <li> Item 3</li> </ul>

This code will generate a bulleted list, which is the default style:

• Item 1
• Item 2
• Item 3

You should utilize <ul> to display a list of items where the order is not significant. If changing the order of the items would render the list incorrect, you should opt for <ol>.

Nested Lists:

You have the flexibility to nest lists to depict sub-items within a list item. For example:

<ul> <li> Item 1</li> <li> Item 2</li> <li> Item 3 <ul> Item 3.1</ul> <ul> Item 3.2</ul> </li> <li> Item 4</li> </ul>

This markup will render as:

• Item 1
• Item 2
• Item 3
  • Item 3.1
  • Item 3.2
• Item 4

It’s important to note that the nested list must be a descendant of the <li> element.

Additionally, you can nest different types of lists. For instance:

<ol> <li> Item 1</li> <li> Item 2</li> <li> Item 3 <ul> Item 3.1</ul> <ul> Item 3.2</ul> </li> <li> Item 4</li> </ol>

Description list

You can utilize the <dl> element to create a description list, formerly known as a definition list prior to HTML5. It comprises name-value pairs, where the name is specified within the <dl> element, and the corresponding value is provided within the <dd> element.

<dl> <dt>Name Of Item 1</dt> <dd>value for Item 1</dd> <dt>Name Of Item 1</dt> <dd>value for Item 2</dd> </dl>

Here’s an example of a name-value group with multiple names and/or values:

dl> <dt>Name Of Item 1</dt> <dt>Name Of Item 2</dt> <dd>value for Item 1 and Item 2</dd> <dt>Name Of Item 3</dt> <dd>value for Item 3</dd> <dd>value for Item 3</dd> </dl>

This arrangement allows for clear delineation and presentation of associated name-value pairs.