HTML Flow elements
➔ It contains all the elements which are allowed as direct child of the <body> element
➔ Content in the Flow elements also includes text or embedded content.
Flow elements are
<a>,
<abbr>,
<address>,
<area>,
<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>,
<link>,
<main>,
<map>,
<mark>,
<math>,
<menu>,
<meta>,
<meter>,
<nav>,
<noscript>,
<object>,
<ol>,
<output>,
<p>,
<picture>,
<pre>,
<progress>,
<q>,
<ruby>,
<s>,
<samp>,
<script>,
<section>,
<select>,
<slot>,
<small>,
<span>,
<strong>,
<sub>,
<sup>,
<svg>,
<table>,
<templeate>,
<textarea>,
<time>,
<u>,
<ul>,
<var>,
<video>,
<wbr>,
<text>.
Example <picture>
<!DOCTYPE html>
<html>
<head>
<title>HTML picture element example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>HTML picture element</h1>
<p>Resize the browser to load different images.</p>
<picture>
<source media="(min-width:650px)" srcset="./resources/images/veg-tomato.png">
<source media="(min-width:480px)" srcset="./resources/images/veg-lettuce.png">
<img src="./resources/images/veg-cabbage.png" alt="vegitables" style="width:auto;">
</picture>
</body>
</html>
Copy code and click on the "Try it Now" button to see how it works.