IT Course HTML Basics 015_HTML5 New Features

HTML5 New Features

HTML5 is the latest version of HTML, introducing many new tags, attributes, and features that greatly enhance web functionality and interactivity.

Some interesting new features in HTML5:

• The canvas element for drawing
• Video and audio elements for media playback
• Better support for local offline storage
• New special content elements like article, footer, header, nav, section
• New form controls like calendar, date, time, email, url, search

<canvas>

The HTML5 <canvas> element is used to draw graphics on web pages. The <canvas> element is based on JavaScript’s drawing API and can be used to create various graphics, including charts, graphics, animations, etc.

Example:

1
<canvas width="500" height="500">
2
    Your browser does not support the HTML5 canvas tag.
3
</canvas>
4
<script>
5
    const canvas = document.querySelector("canvas");
6
    // Get drawing context
7
    const ctx = canvas.getContext("2d");
8
    // Draw circle
9
    ctx.beginPath();
10
    ctx.arc(250, 250, 100, 0, 2 * Math.PI);
11
    ctx.fillStyle = "yellow";
12
    ctx.fill();
13
</script>

Effect:

<svg>

The HTML5 SVG element is used to create SVG graphics on web pages. SVG graphics are XML-based vector graphics that can scale losslessly, suitable for various purposes including:

SVG elements include:

• <svg> element: Defines the root element of SVG graphics.
• <path> element: Defines path shapes.
• <rect> element: Defines rectangle shapes.
• <circle> element: Defines circle shapes.
• <ellipse> element: Defines ellipse shapes.
• <line> element: Defines lines.
• <polygon> element: Defines polygons.
• <polyline> element: Defines polylines.
• <text> element: Defines text.
• <g> element: Defines groups for grouping SVG elements together.
• <defs> element: Defines global attributes that can be applied to multiple SVG elements.

Example:

1
<svg width="500" height="500">
2
  <circle cx="250" cy="250" r="100" fill="yellow" />
3
</svg>

Effect:

SVG and Canvas are both tools for creating graphics on web pages. They each have their own advantages and disadvantages, suitable for different scenarios.

SVG is XML-based vector graphics that can scale losslessly. This means SVG graphics can be displayed at any size without losing quality. SVG graphics can also be manipulated and animated using CSS and JavaScript.

Canvas is a JavaScript-based drawing API that can create bitmap graphics. This means Canvas graphics cannot scale losslessly, but can create more complex graphics using JavaScript. Canvas graphics can also be manipulated and animated using JavaScript.

Specific differences between SVG and Canvas:

• SVG is suitable for:

  • Graphics that need lossless scaling, such as icons, logos, illustrations
  • Graphics that need manipulation and animation with CSS and JavaScript

• Canvas is suitable for:

  • Scenarios requiring complex graphics, such as games, animations
  • Scenarios requiring complex operations with JavaScript

HTML5 Forms

HTML5 introduces some new input types and attributes to enhance form functionality and usability.

New Form Elements:

• <datalist> element: Used for predefined option lists for <input> elements.

Example:

1
<label for="browser">Choose browser:</label>
2
<input list="browsers" id="browser" name="browser" autocomplete="off">
3
<datalist id="browsers">
4
  <option value="Chrome">
5
  <option value="Firefox">
6
  <option value="Safari">
7
  <option value="Edge">
8
  <option value="Opera">
9
</datalist>

Effect:

New Form Attributes:

• <form> / <input> autocomplete attribute: Specifies whether form or input fields should have autocomplete functionality. When users start typing in an autocomplete field, the browser should display filled-in options.

Example:

1
<form action="demo-form.php" autocomplete="on">
2
  First name:<input type="text" name="fname"><br>
3
  Last name:<input type="text" name="lname"><br>
4
  Email:<input type="email" name="email" autocomplete="off"><br>
5
  <input type="submit">
6
</form>

Effect:

New input Types:

1
<form action="/submit" method="post">
2
  <label for="name">Name:</label>
3
  <input type="text" id="name" required />
4
  <br>
5
  <label for="email">Email Address:</label>
6
  <input type="email" id="email" required />
7
  <br>
8
  <label for="birthday">Date of Birth:</label>
9
  <input type="date" id="birthday" required />
10
  <br>
11
  <label for="phone">Phone Number:</label>
12
  <input type="tel" id="phone" required />
13
  <br>
14
  <input type="submit" value="Submit" />
15
</form>

Effect:

[!Summary]