Scribd Logo
Upload

Welcome to Scribd!

  • Unit-5 HTML-5: New Features of HTML 5

    Uploaded by

    Awash Zilong Sharma
    6 views5 pages

    Original Title

    5

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views5 pages

    Unit-5 HTML-5: New Features of HTML 5

    Uploaded by

    Awash Zilong Sharma

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    Unit-5

    HTML-5
    It is the fifth revision of HTML used to structure and present content on
    the internet.It is designed to deliver the best possible experiences for all
    users of all the devices from desktop to digital watch.

    It includes features such as :-

     Improved semantic elements audio and Video Support , drag and drop
    , offline Storage and many more.

    New features of HTML 5 :-

    Semantic Elements:

    HTML 5 introduces semantic elements like <header> <footer> <article>


    <nav> <section>. These elements are used to better Structure the
    document , Making it easier to read and understand.
    Eg:-
    <nav>
    <a href="a.html"> A </a>
    <a href="b.html">B</a>
    </nav>

    Audio & video:

    The HTML 5 <audio> and <video> tags makes it simple to add media to
    a Website.You need to set 'Src' attribute identify the Media Source and
    include a controls attribute so the user can play and pause the media.
    Eg:

    <body>
    <audio controls>
    <source src="audio/sample.mp3"type="audio/mpeg"> Yourbrowser does
    not support the audio tag.
    </audio>
    <video controls width="480">
    <source src="video/sample.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>
    </body>

    SVG (Scalable Vector Graphics)

    SVG (Scalable Vector Graphics) is an XML-based format used for


    creating 2D vector graphics that can be scaled to any size without losing
    quality. SVG is widely used on websites and offers several advantages for
    web-based graphics:

    Eg:

    <svg width="200" height="200">

    <circle cx="100" cy="100" r="80" fill="orange" />

    <text x="50" y="120" font-family="Arial" font-size="24"


    fill="white">SVG</text>
    </svg>

    HTML 5 Form:

    HTML 5 form defines a new type of form that made it easier to collect
    data from the user.

    New attributes of input tag:

    *Auto complete: It allows the browser to suggest values as the user types.

    *placeholder:It specifies a short hint that describes the expected value.

    *pattern:It specifies a regular expression that the input elements value is


    checked against.

    *list:It references of datalist elements which contains predefined options


    for an input element.

    *Min/Max:It is used to set the minimum and maximum value for an input
    field.

    *Autofocus:It automatically focus on input elememt when the page loads.


    *Multiple:It allows multiple values that can be entered in an input field.

    *Required:It specifies that an input field is required.

    *step:It specifies the legal number interval for an input field.

    *Formaction:It specifies the URL of the file that will process the input
    control when the form is submitted.

    *height and width: It specifies the height and width of an input field.

    Eg:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-
    scale=1.0">
    <title>Form Attributes Example</title>
    </head>
    <body>
    <h2>Registration Form</h2>
    <form action="/submit-form" method="post">

    <!-- Auto Complete -->


    <label for="username">Username:</label>
    <input type="text" id="username" name="username"
    autocomplete="on" required><br><br>

    <!-- Placeholder -->


    <label for="email">Email:</label>
    <input type="email" id="email" name="email"
    placeholder="example@example.com" required><br><br>

    <!-- Pattern -->


    <label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-
    9]{3}-[0-9]{4}" placeholder="123-456-7890" required><br><br>

    <!-- List -->


    <label for="browser">Preferred Browser:</label>
    <input list="browsers" id="browser" name="browser" required>
    <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    </datalist><br><br>

    <!-- Min/Max -->


    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="18" max="100"
    required><br><br>

    <!-- Autofocus -->


    <label for="comment">Comments:</label>
    <textarea id="comment" name="comment"
    autofocus></textarea><br><br>

    <!-- Multiple -->


    <label for="interests">Select Interests:</label>
    <select id="interests" name="interests" multiple>
    <option value="sports">Sports</option>
    <option value="music">Music</option>
    <option value="movies">Movies</option>
    <option value="reading">Reading</option>
    </select><br><br>

    <!-- Required -->


    <label for="password">Password:</label>
    <input type="password" id="password" name="password"
    required><br><br>

    <!-- Step -->


    <label for="quantity">Quantity:</label>
    <input type="number" id="quantity" name="quantity" min="1"
    max="10" step="1" required><br><br>

    <!-- Formaction -->


    <button type="submit"
    formaction="/submit-form">Submit</button>

    </form>
    </body>
    </html>
    Copyright by @ARADix tech

    You might also like