This project is a solution to a web development exercise focused on enhancing HTML5 skills. The main objective was to create a web page that utilizes advanced content elements and a robust form with native validation, all without the need for JavaScript. The final page demonstrates a well-thought-out structure, usability, and clarity, following web development best practices.
- Semantic Structure: Effective use of HTML5 tags like
header,main,section,footer,table,figure, andformfor a logical and accessible layout. - Content Organization: Efficient use of ordered (
<ol>) and unordered (<ul>) lists, as well as an accessible table with headers (<thead>), for data presentation. - Embedded Media: Demonstration of embedding different types of media, including an image (
<img>), a video (<video>), and audio (<audio>), with respective playback controls. - Advanced Form:
- Native Validation: Application of attributes like
required,minlength,pattern, andreadonlyto ensure the integrity of user-entered data. - Usability and Accessibility: Grouping of related fields with
<fieldset>and<legend>, in addition to using<label>to associate descriptions with each input field. - Diverse Fields: Inclusion of various input types (
text,email,password,number,date,select) for a comprehensive form.
- Native Validation: Application of attributes like
- Clone this repository or download the
enhanced-form.htmlfile. - Open the
enhanced-form.htmlfile in any modern web browser (Chrome, Firefox, Edge, Safari). - Interact with the content and fill out the form to test the native HTML5 validation in action.
Augusto Mate