In this topic, we described about the below sections -
In HTML5, we can code content on webpage using some different groups. These groups are termed as content models. Each of these models defines the type of elements it includes. The text and child elements are the content models in HTML5.
HTML5 content models are listed below -
The metadata content type provides knowledge about or the behaviour of remaining content, or setup relationship to other properties or other documents and defines the performance or the actions of it. These elements are not displays on the webpage.
The metadata content model types are - <base> , <link> , <meta>, <noscript>, <script>, <style>, <template> and <title>.
<html>
<head>
<title> Metadata content type </title>
<meta charset="UTF-8">
<style>
* {color: #00ff00;}
</style>
</head>
<body>
<h1>Heading<h1>
<p>Paragraph<p>
</html>
Paragraph
Elements mostly used in the body of an HTML document are belongs to the flow content type. i.e. Those are coded within the <body></body> tags.
The flow content model types are - <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>.
<!DOCTYPE html>
<html>
<head>
<title> Flow content example</title>
</head>
<body>
<p><abbr title="World Wide Web">WWW</abbr> - The World Wide Web
is a system for displaying text,graphics,and audio retrieved
over.</p>
<hr/>
<p>The World Wide Web is a way of exchanging information between
computers on the Internet, tying them together into a vast
collection of interaction multimedia resources. Internet and Web
is not the same thing:Web uses internet to pass over the
information.</p>
<hr/>
<ol type="A">
<li>Website1</li>
<li>Website2</li>
<li>Website3</li>
</ol>
</body>
</html>
WWW - The World Wide Web is a system for displaying text, graphics, and audio retrieved over.
The World Wide Web is a way of exchanging information between computers on the Internet, tying them together into a vast collection of interactive multimedia resources. Internet and Web is not the same thing: Web uses internet to pass over the information.
Sectioning content used to define the headings and footers scope. Note that each section could have its direction and shape.
The sectioning content model types are - <article>, <aside>, <nav> and <section>.
<!DOCTYPE html>
<html>
<head>
<title> sectioning content example</title>
</head>
<body>
<section>
<h1>Artical About Amimal</h1>
<article>
<h2>Lion</h2>
<p>The lion (Panthera leo) is one of the largest cats
Leo owes the nickname “king of the animals” appearance
of his dense mane.The natural environment of the second
largest (after the tiger) cat are dry areas of the South
African savannah.Lions can also meet in … India</p>
</article>
</section>
</body>
</html>
The lion (Panthera leo) is one of the largest cats Leo owes the nickname “king of the animals” appearance of his dense mane.The natural environment of the second largest (after the tiger) cat are dry areas of the South African savannah.Lions can also meet in … India.
Heading content is used to define the header of the section content. The sectioning content model types are - <h1>, <h2>, <h3>, <h4>, <h5>, <h6> and <hgroup>.
<!DOCTYPE html>
<html>
<head>
<title> Heading content example </title>
</head>
<body>
<hgroup>
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
</hgroup>
</body>
</html>
Phrasing content is the text of the web document and the elements that marks-up the text at the inner paragraph level.
The phrasing content model types are - <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small> <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video> and <wbr>.
<!DOCTYPE html>
<html>
<head>
<title> Phrasing content example</title>
</head>
<body>
<h1>HTML5 Content Models</h1>
<p>Features <sub> of HTML5</sub>.</p>
<p>It has launched new multimedia features like, audio and video
monitors by using <audio> and <video> tags.</p>
<p>The new graphics elements present in HTML5 are, vector
graphics and tags.</sup>, vector graphics and tags</p>
<p>The new feature of HTML5 was suggested by WHATWG group.
WHATWG means Web Hypertext Application Technology Working Group.
It was founded in 2004 by Apple, Mozilla, Opera.
<mark>WHATWG means Web Hypertext Application Technology
Working Group.</mark> </p>
<p>audio and video monitors by using HTML5</p>
<p>HTML means Hyper Text Markup Language.<em> HTML5 fifth
version of the HTML standard.</em>.</p>
</body>
</html>
Features of HTML5.
It has launched new multimedia features like, audio and video monitors by using
The new graphics elements present in HTML5 are, vector graphics and tags., vector graphics and tags
The new feature of HTML5 was suggested by WHATWG group. WHATWG means Web Hypertext Application Technology Working Group. It was founded in 2004 by Apple, Mozilla, Opera. WHATWG means Web Hypertext Application Technology Working Group.
audio and video monitors by using HTML5
HTML means Hyper Text Markup Language. HTML5 fifth version of the HTML standard..
Embedded content is used to includes content from another mark-up language or namespace into the document we use Embedded content.
The embedded content model types are - <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, and <video>.
<!DOCTYPE html>
<html>
<head>
<title> Embedded content example</title>
</head>
<body>
<h1>HTML elements -</h1>
<canvas id="canvasExample" width="400"
height="200"></canvas>
<script>
var canvas = document.getElementById('canvasExample');
var context = canvas.getContext('2d');
context.font = '30pt Calibri';
context.fillStyle = '#1c87c9';
context.fillText('SVG Example !', 50, 100);
</script>
<h2>HTML<img> tag:</h2>
<img id="scream" src="laptop.png" alt="Laptop Cat" width="220"
height="277">
<h2>HTML5 <svg> tag -</h2>
<svg width="350" height="150">
<circle cx = "100" cy = "100" r = "50" fill = "green"
stroke="red" stoke-width="10"/>
</svg>
<br/>
</body>
</html>
Interactive content is used to create for user interaction. The interactive content model types are - <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select> and <textarea>.
<!DOCTYPE html>
<html>
<head>
<title> Interactive content example</title>
</head>
<body>
<h1>HTML5 New elements</h1>
<form>
<select>
<option value="">Choose...</option>
<option value="details">Details</option>
<option value="Inline elements">HTML5
Inline elements</option>
<option value="Form types">HTML5
Form types</option>
</select>
<br><br>
<textarea name="comment" rows="7" cols="49"
placeholder="Write comment here..."></textarea>
<br>
<button type="button">submit</button>
</form>
</body>
</html>
The secondary content types are used for scripts and elements in script-supporting are <script> and <template>. The sectioning content category root elements are, <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> and <td>. The transparent content type model elements are - <a>, <audio>, <canvas>, <del>, <ins>, <map>, <object> and <video>.