HTML
活文档标准 — 最后更新于 2024 年 9 月 12 日
活文档标准 — 最后更新于 2024 年 9 月 12 日
picture 元素所有当前引擎都支持。
所有当前引擎都支持。
source 元素，后跟一个 img 元素，可选择性地与 脚本支持元素 交织在一起。[Exposed =Window ]
interface HTMLPictureElement : HTMLElement {
[HTMLConstructor ] constructor ();
};picture 元素是一个容器，它为其包含的 img 元素提供多个源，以允许作者根据屏幕像素密度、视窗 尺寸、图像格式和其他因素声明性地控制或向用户代理提供有关使用哪个图像资源的提示。它 表示 其子元素。
picture 元素与类似的 video 和 audio 元素有些不同。虽然它们都包含 source 元素，但当元素嵌套在 picture 元素中时，source 元素的 src 属性没有意义，并且资源选择算法也不同。此外，picture 元素本身不显示任何内容；它仅仅为其包含的 img 元素提供一个上下文，使它能够从多个 URL 中进行选择。
source 元素所有当前引擎都支持。
所有当前引擎都支持。
picture 元素的子元素，位于 img 元素之前。track 元素之前。type — 嵌入式资源类型media — 适用的媒体src (在 audio 或 video 中) — 资源的地址srcset (在 picture 中) — 在不同情况下使用的图像，例如高分辨率显示器、小型显示器等。sizes (在 picture 中) — 不同页面布局的图像尺寸width (在 picture 中) — 水平尺寸height (在 picture 中) — 垂直尺寸[Exposed =Window ]
interface HTMLSourceElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute USVString src ;
[CEReactions ] attribute DOMString type ;
[CEReactions ] attribute USVString srcset ;
[CEReactions ] attribute DOMString sizes ;
[CEReactions ] attribute DOMString media ;
[CEReactions ] attribute unsigned long width ;
[CEReactions ] attribute unsigned long height ;
};source 元素允许作者为 img 元素指定多个备用 源集，或为 媒体元素 指定多个备用 媒体资源。它本身不 表示 任何内容。
type 属性可以存在。如果存在，则该值必须是 有效的 MIME 类型字符串。
media 属性也可以存在。如果存在，则该值必须包含 有效的媒体查询列表。如果该值与 环境不匹配，用户代理将跳过到下一个 source 元素。
media 属性仅在 资源选择算法 的 媒体元素 中评估一次。相反，在使用 picture 元素时，用户代理将 对环境变化做出反应。
剩余的要求取决于父元素是 picture 元素还是 媒体元素。
source 元素的父元素是 picture 元素srcset 属性必须存在，它是一个 srcset 属性。
如果 source 元素被选中，则 srcset 属性会将 图像源 贡献到 源集 中。
如果 srcset 属性使用 宽度描述符 具有任何 图像候选字符串，则 sizes 属性也可以存在。此外，如果以下兄弟 img 元素不 允许自动调整尺寸，则 sizes 属性必须存在。sizes 属性是一个 sizes 属性，如果 source 元素被选中，它会将 源大小 贡献到 源集 中。
如果 img 元素 允许自动调整尺寸，则可以在之前兄弟 source 元素上省略 sizes 属性。在这种情况下，它等同于指定 auto。
source 元素支持 尺寸属性。img 元素可以使用 source 元素的 width 和 height 属性（而不是 img 元素本身的属性）来确定其渲染的尺寸和纵横比，如渲染部分所定义。
type 属性指定了 源集 中图像的类型，以允许用户代理在不支持给定类型的情况下跳过到下一个 source 元素。
如果 type 属性未指定，则用户代理在发现不支持图像格式后获取图像时，不会选择不同的 source 元素。
当 source 元素具有以下兄弟 source 元素或 img 元素（其中指定了 srcset 属性）时，它必须具有以下至少一项
如果指定了一个 media 属性，其值在 去除开头和结尾的 ASCII 空格 后，不是空字符串，并且与字符串 "all" 的 ASCII 不区分大小写 匹配。
指定了 type 属性。
src 属性必须不存在。
source 元素的父元素是 媒体元素src 属性给出 媒体资源 的 URL。该值必须是 有效的非空 URL，可能包含空格。此属性必须存在。
type 属性给出 媒体资源 的类型，以帮助用户代理在获取之前确定它是否可以播放此 媒体资源。某些 MIME 类型定义的 codecs 参数对于准确指定资源的编码方式可能必不可少。 [RFC6381]
当元素已插入到 video 或 audio 元素中时，动态修改 source 元素的 src 或 type 属性将无效。要更改正在播放的内容，只需直接使用 媒体元素 上的 src 属性，并可能利用 canPlayType() 方法从可用资源中选择。通常，在解析文档后手动操作 source 元素是一种不必要的复杂方法。
以下列表展示了如何在 type 属性中使用 codecs= MIME 参数的一些示例。
< source src = 'video.mp4' type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' > < source src = 'video.mp4' type = 'video/mp4; codecs="avc1.58A01E, mp4a.40.2"' > < source src = 'video.mp4' type = 'video/mp4; codecs="avc1.4D401E, mp4a.40.2"' > < source src = 'video.mp4' type = 'video/mp4; codecs="avc1.64001E, mp4a.40.2"' > < source src = 'video.mp4' type = 'video/mp4; codecs="mp4v.20.8, mp4a.40.2"' > < source src = 'video.mp4' type = 'video/mp4; codecs="mp4v.20.240, mp4a.40.2"' > < source src = 'video.3gp' type = 'video/3gpp; codecs="mp4v.20.8, samr"' > < source src = 'video.ogv' type = 'video/ogg; codecs="theora, vorbis"' > < source src = 'video.ogv' type = 'video/ogg; codecs="theora, speex"' > < source src = 'audio.ogg' type = 'audio/ogg; codecs=vorbis' > < source src = 'audio.spx' type = 'audio/ogg; codecs=speex' > < source src = 'audio.oga' type = 'audio/ogg; codecs=flac' > < source src = 'video.ogv' type = 'video/ogg; codecs="dirac, vorbis"' > 给定 insertedNode，source HTML 元素插入步骤 为：
如果 insertedNode 的父元素是一个 媒体元素，该元素没有 src 属性，并且其 networkState 的值为 NETWORK_EMPTY，则调用该 媒体元素 的 资源选择算法。
如果 insertedNode 的下一个兄弟元素是 img 元素，并且其父元素是 picture 元素，则将其视为 img 元素的 相关变动。
给定 removedNode 和 oldParent，source HTML 元素移除步骤 为：
IDL 属性 src、type、srcset、sizes 和 media 必须 反映 同名内容属性。
如果作者不确定所有用户代理是否都能渲染提供的媒体资源，作者可以在最后一个 source 元素上监听 error 事件并触发回退行为。
< script >
function fallback( video) {
// replace <video> with its contents
while ( video. hasChildNodes()) {
if ( video. firstChild instanceof HTMLSourceElement)
video. removeChild( video. firstChild);
else
video. parentNode. insertBefore( video. firstChild, video);
}
video. parentNode. removeChild( video);
}
</ script >
< video controls autoplay >
< source src = 'video.mp4' type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
< source src = 'video.ogv' type = 'video/ogg; codecs="theora, vorbis"'
onerror = "fallback(parentNode)" >
...
</ video > img 元素所有当前引擎都支持。
所有当前引擎都支持。
usemap 属性：交互式内容。picture 元素的子元素，在所有 source 元素之后。alt — 当图像不可用时使用的替代文本src — 资源地址srcset — 在不同情况下（例如高分辨率显示器、小显示器等）使用的图像sizes — 不同页面布局的图像大小crossorigin — 元素如何处理跨域请求usemap — 要使用的 图像地图 的名称ismap — 图像是否为服务器端图像地图width — 水平尺寸height — 垂直尺寸referrerpolicy — 元素发起的 获取 的 referrer 策略decoding — 处理此图像以进行呈现时使用的解码提示loading — 用于确定加载延迟fetchpriority — 设置元素发起的 获取 的 优先级alt 属性：针对作者；针对实现者。[Exposed =Window ,
LegacyFactoryFunction =Image (optional unsigned long width , optional unsigned long height )]
interface HTMLImageElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString alt ;
[CEReactions ] attribute USVString src ;
[CEReactions ] attribute USVString srcset ;
[CEReactions ] attribute DOMString sizes ;
[CEReactions ] attribute DOMString ? crossOrigin ;
[CEReactions ] attribute DOMString useMap ;
[CEReactions ] attribute boolean isMap ;
[CEReactions ] attribute unsigned long width ;
[CEReactions ] attribute unsigned long height ;
readonly attribute unsigned long naturalWidth ;
readonly attribute unsigned long naturalHeight ;
readonly attribute boolean complete ;
readonly attribute USVString currentSrc ;
[CEReactions ] attribute DOMString referrerPolicy ;
[CEReactions ] attribute DOMString decoding ;
[CEReactions ] attribute DOMString loading ;
[CEReactions ] attribute DOMString fetchPriority ;
Promise <undefined > decode ();
// also has obsolete members
};img 元素表示图像。
img 元素具有一个 尺寸属性来源，最初设置为元素本身。
所有当前引擎都支持。
所有当前引擎都支持。
由 src 和 srcset 属性给出的图像，以及如果父元素是 picture 元素，则任何先前兄弟元素 source 元素的 srcset 属性，是嵌入式内容；alt 属性的值为无法处理图像或图像加载被禁用者的等效内容（即它是 img 元素的 回退内容）。
必须存在 src 属性，并且必须包含一个 有效的非空 URL，可能包含空格，用于引用一个非交互式、可选动画的图像资源，该资源既不分页也不脚本化。
以上要求意味着图像可以是静态位图（例如 PNG、GIF、JPEG）、单页矢量文档（单页 PDF、带有 SVG 文档元素的 XML 文件）、动画位图（APNG、动画 GIF）、动画矢量图形（带有 SVG 的 XML 文件 文档元素，使用声明性 SMIL 动画）等等。但是，这些定义排除了带有脚本的 SVG 文件、多页 PDF 文件、交互式 MNG 文件、HTML 文档、纯文本文档等等。 [PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] [MNG]
也可以存在 srcset 属性，它是一个 srcset 属性。
srcset 属性和 src 属性（如果未使用 宽度描述符）将 图像源 贡献给 源集（如果未选择任何 source 元素）。
如果 srcset 属性存在并且包含任何使用 宽度描述符 的 图像候选字符串，则 sizes 属性也必须存在。如果未指定 srcset 属性，并且 loading 属性处于 Lazy 状态，则可以为 sizes 属性指定值为“auto” (ASCII 不区分大小写)。 sizes 属性是一个 sizes 属性，它将 源大小 贡献给 源集（如果未选择任何 source 元素）。
如果 img 元素 允许自动大小，则
loading 属性处于 Lazy 状态，并且sizes 属性的值为“auto” (ASCII 不区分大小写)，或者以“auto,” (ASCII 不区分大小写) 开头。所有当前引擎都支持。
crossorigin 属性是一个 CORS 设置属性。它的目的是允许来自允许跨域访问的第三方网站的图像与 canvas 一起使用。
referrerpolicy 属性是一个 referrer 策略属性。它的目的是在 获取 图像时设置 referrer 策略。 [REFERRERPOLICY]
decoding 属性指示 解码 此图像的首选方法。如果存在，该属性必须是一个 图像解码提示。此属性的 缺少值默认值 和 无效值默认值 都是 auto 状态。
HTMLImageElement/fetchPriority
fetchpriority 属性是一个 获取优先级属性。它的目的是在 获取 图像时设置 优先级。
loading 属性是一个 延迟加载属性。它的目的是指示加载视窗外的图像的策略。
当 loading 属性的状态更改为 Eager 状态时，用户代理必须运行以下步骤
如果 resumptionSteps 为 null，则返回。
调用 resumptionSteps。
< img src = "1.jpeg" alt = "1" >
< img src = "2.jpeg" loading = eager alt = "2" >
< img src = "3.jpeg" loading = lazy alt = "3" >
< div id = very-large ></ div > <!-- Everything after this div is below the viewport -->
< img src = "4.jpeg" alt = "4" >
< img src = "5.jpeg" loading = lazy alt = "5" > 在上面的例子中，图像按以下顺序加载
1.jpeg、2.jpeg、4.jpeg图像会立即加载并延迟窗口的加载事件。
3.jpeg由于图像在视窗中，因此在已知布局后加载，但是它不会延迟窗口的加载事件。
5.jpeg图像仅在滚动到视窗中时加载，并且不会延迟窗口的加载事件。
鼓励开发人员通过 width 和 height 属性为延迟加载的图像指定首选宽高比，即使 CSS 设置了图像的宽度和高度属性，也是为了防止图像加载后页面布局发生偏移。
给定 insertedNode 的 img HTML 元素插入步骤 为
给定 removedNode 和 oldParent 的 img HTML 元素移除步骤 为
不得将 img 元素用作布局工具。特别是，不应使用 img 元素来显示透明图像，因为此类图像很少传达意义，也很少为文档添加任何有用的内容。
img 元素表示的内容取决于 src 属性和 alt 属性。
src 属性，并且将 alt 属性设置为空字符串该图像要么是装饰性的，要么是对其余内容的补充，与文档中其他一些信息冗余。
如果图像 可用 且用户代理已配置为显示该图像，则该元素 表示 该元素的图像数据。
否则，该元素 表示 任何内容，并且可以从渲染中完全省略。用户代理可能会向用户提供有关存在但已从渲染中省略的图像的通知。
src 属性，并且将 alt 属性设置为非空值该图像是内容的关键部分；alt 属性为图像提供文本等效项或替换。
src 属性，但没有 alt 属性该图像可能是内容的关键部分，并且没有可用的图像文本等效项。
在符合标准的文档中，缺少 alt 属性表示图像为内容的关键部分，但在生成图像时没有可用的图像文本替换。
如果图像 可用 且用户代理已配置为显示该图像，则该元素 表示 该元素的图像数据。
如果图像的 src 属性值为空字符串，则该元素 表示 任何内容。
否则，用户代理应该显示某种指示器，表明有一个图像没有被渲染，并且如果用户请求，或者如果配置了，或者当需要提供上下文信息以响应导航时，可以提供图像的标题信息，推导方式如下。
如果图像具有 title 属性，其值不是空字符串，则返回该属性的值。
如果图像是一个 figure 元素的后代，该元素具有一个子元素 figcaption，并且忽略 figcaption 元素及其后代，figure 元素没有 流动内容 后代，除了 元素间空白 和 img 元素，则返回第一个这样的 figcaption 元素的内容。
不返回任何内容。(没有标题信息)。
src 属性未设置，并且 alt 属性设置为空字符串，或者 alt 属性根本没有设置该元素 代表 没有任何内容。
alt 属性不代表建议性信息。用户代理不得以与 title 属性内容相同的方式呈现 alt 属性的内容。
用户代理可能始终为用户提供显示任何图像或阻止显示任何图像的选项。用户代理还可以应用启发式方法来帮助用户在用户无法看到图像时使用图像，例如由于视力障碍或因为他们使用没有图形功能的文本终端。这样的启发式方法可以包括例如对图像中找到的文本进行光学字符识别 (OCR)。
虽然鼓励用户代理修复缺少 alt 属性的情况，但作者不应依赖此类行为。 提供文本作为图像替代的要求 在下面详细说明。
如果存在，img 元素的内容将被忽略，用于渲染目的。
如果存在，usemap 属性可以指示图像具有关联的 图像地图。
当 ismap 属性用于一个元素上，该元素是具有 href 属性的 a 元素的后代时，该属性的存在表示该元素提供对服务器端图像地图的访问。这会影响相应 a 元素上的事件处理方式。
ismap 属性是一个 布尔属性。该属性不得在没有祖先 a 元素且具有 href 属性的元素上指定。
usemap 和 ismap 属性与 source 元素一起使用时，可能会导致令人困惑的行为，这些元素在 picture 元素中指定了 media 属性。
所有当前引擎都支持。
所有当前引擎都支持。
所有当前引擎都支持。
alt、 src、 srcset 和 sizes IDL 属性必须 反映 同名内容属性。
所有当前引擎都支持。
crossOrigin IDL 属性必须 反映 crossorigin 内容属性， 仅限于已知值。
所有当前引擎都支持。
useMap IDL 属性必须 反映 usemap 内容属性。
所有当前引擎都支持。
HTMLImageElement/referrerPolicy
所有当前引擎都支持。
referrerPolicy IDL 属性必须 反映 referrerpolicy 内容属性， 仅限于已知值。
所有当前引擎都支持。
decoding IDL 属性必须 反映 decoding 内容属性， 仅限于已知值。
所有当前引擎都支持。
loading IDL 属性必须 反映 loading 内容属性， 仅限于已知值。
fetchPriority IDL 属性必须 反映 fetchpriority 内容属性， 仅限于已知值。
image.width [ = value ]所有当前引擎都支持。
image.height [ = value ]所有当前引擎都支持。
这些属性返回图像的实际渲染尺寸，如果尺寸未知，则返回 0。
它们可以被设置，以更改相应的内容属性。
image.naturalWidth所有当前引擎都支持。
image.naturalHeightHTMLImageElement/naturalHeight
所有当前引擎都支持。
这些属性返回图像的自然尺寸，如果尺寸未知，则返回 0。
image.complete所有当前引擎都支持。
如果图像已完全下载或未指定图像，则返回 true；否则，返回 false。
image.currentSrc所有当前引擎都支持。
返回图像的 绝对 URL。
image.decode()所有当前引擎都支持。
此方法导致用户代理 解码 图像 并行，返回一个承诺，在解码完成时完成。
如果图像无法解码，则承诺将被 "EncodingError" DOMException 拒绝。
image = new Image([ width [, height ] ])所有当前引擎都支持。
IDL 属性 width 和 height 必须返回图像的渲染宽度和高度，以 CSS 像素 为单位，如果图像正在 渲染；否则返回图像的 密度校正自然宽度和高度，以 CSS 像素 为单位，如果图像具有 密度校正自然宽度和高度 并且 可用 但未 渲染；否则返回 0，如果图像 不可用 或没有 密度校正自然宽度和高度。 [CSS]
在设置时，它们必须表现得好像它们 反映 了同名内容属性。
IDL 属性 naturalWidth 和 naturalHeight 必须返回图像的 密度校正后的自然宽度和高度，单位为 CSS 像素，如果图像具有 密度校正后的自然宽度和高度 且 可用，否则返回 0。 [CSS]
由于图像的 密度校正后的自然宽度和高度 会考虑其元数据中指定的任何方向，因此 naturalWidth 和 naturalHeight 反映了应用任何旋转（以正确定向图像所需的）后的尺寸，与 'image-orientation' 属性的值无关。
complete 获取器的步骤如下
如果以下任何一项为真
则返回 true。
返回 false。
currentSrc IDL 属性必须返回 img 元素的 当前请求 的 当前 URL。
decode() 方法在被调用时必须执行以下步骤
令 promise 为一个新的 Promise。
将一个微任务排队 以执行以下步骤
这样做是因为 更新图像数据 也发生在微任务中。因此，为了使以下代码
img. src = "stars.jpg" ;
img. decode(); 能正确解码 stars.jpg，我们需要将任何处理延迟一个微任务。
如果以下任何一项为真
则使用一个 "EncodingError" DOMException 拒绝 promise。
否则，并行 等待以下情况之一发生，并执行相应的操作
img 元素的 节点文档 停止 完全激活img 元素的 当前请求 发生变化或被修改img 元素的 当前请求 的 状态 变为 损坏使用一个 "EncodingError" DOMException 拒绝 promise。
img 元素的 当前请求 的 状态 变为 完全可用解码 图像。
如果不需要为该图像执行解码（例如，因为它是一个矢量图形），则使用 undefined 解析 promise。
如果解码失败（例如，由于无效的图像数据），则使用一个 "EncodingError" DOMException 拒绝 promise。
如果解码过程成功完成，则使用 undefined 解析 promise。
用户代理应该确保解码后的媒体数据至少在 更新渲染 的下一个成功步骤结束之前保持可用。这是 API 契约的重要组成部分，应该尽可能避免违反。(通常，只有在需要清除解码后的图像数据以释放低内存的情况下，或者当图像太大而无法在此期间保持解码形式时，才会违反此规则。)
动画图像只有在所有帧加载后才会变为 完全可用。因此，即使实现可以在此之前解码第一帧，但上述步骤不会这样做，而是会等到所有帧都可用。
返回 promise。
如果没有 decode() 方法，加载 img 元素并将其显示的过程可能类似于以下内容
const img = new Image();
img. src = "nebula.jpg" ;
img. onload = () => {
document. body. appendChild( img);
};
img. onerror = () => {
document. body. appendChild( new Text( "Could not load the nebula :(" ));
}; 但是，这会导致明显的帧丢失，因为在将图像插入 DOM 后发生的绘制会在主线程上进行同步解码。
这可以使用 decode() 方法重写成以下形式
const img = new Image();
img. src = "nebula.jpg" ;
img. decode(). then(() => {
document. body. appendChild( img);
}). catch (() => {
document. body. appendChild( new Text( "Could not load the nebula :(" ));
}); 这种后一种形式避免了原始形式中的帧丢失，因为它允许用户代理 并行 解码图像，并且只在解码过程完成后将其插入 DOM（从而导致其被绘制）。
由于 decode() 方法试图确保解码后的图像数据至少可用一帧，因此它可以与 requestAnimationFrame() API 结合使用。这意味着它可以与确保所有 DOM 修改都作为 动画帧回调 批量在一起的编码风格或框架一起使用。
const container = document. querySelector( "#container" );
const { containerWidth, containerHeight } = computeDesiredSize();
requestAnimationFrame(() => {
container. style. width = containerWidth;
container. style. height = containerHeight;
});
// ...
const img = new Image();
img. src = "supernova.jpg" ;
img. decode(). then(() => {
requestAnimationFrame(() => container. appendChild( img));
}); 提供了一个用于创建 HTMLImageElement 对象的传统工厂函数（除了 DOM 中的工厂方法，例如 createElement()）：Image(width, height)。在被调用时，传统的工厂函数必须执行以下步骤
令 document 为 当前全局对象 的 关联的 Document。
返回 img。
同一张图像可能根据上下文具有不同的适当替代文本。
在以下每种情况下，都使用相同的图像，但每次的 alt 文本都不同。该图像为瑞士日内瓦州卡鲁日市镇的徽章。
这里将其用作补充图标
< p > I lived in < img src = "carouge.svg" alt = "" > Carouge.</ p > 这里将其用作代表该镇的图标
< p > Home town: < img src = "carouge.svg" alt = "Carouge" ></ p > 这里将其用作镇上文本的一部分
< p > Carouge has a coat of arms.</ p >
< p >< img src = "carouge.svg" alt = "The coat of arms depicts a lion, sitting in front of a tree." ></ p >
< p > It is used as decoration all over the town.</ p > 这里将其用作一种方法来支持类似的文本，其中描述与图像一起提供，而不是作为图像的替代品
< p > Carouge has a coat of arms.</ p >
< p >< img src = "carouge.svg" alt = "" ></ p >
< p > The coat of arms depicts a lion, sitting in front of a tree.
It is used as decoration all over the town.</ p > 这里将其用作故事的一部分
< p > She picked up the folder and a piece of paper fell out.</ p >
< p >< img src = "carouge.svg" alt = "Shaped like a shield, the paper had a
red background, a green tree, and a yellow lion with its tongue
hanging out and whose tail was shaped like an S." ></ p >
< p > She stared at the folder. S! The answer she had been looking for all
this time was simply the letter S! How had she not seen that before? It all
came together now. The phone call where Hector had referred to a lion's tail,
the time Maria had stuck her tongue out...</ p > 这里在发布时不知道图像是什么，只知道它是一种徽章，因此无法提供替代文本，而是只在 title 属性中提供简短的图像标题。
< p > The last user to have uploaded a coat of arms uploaded this one:</ p >
< p >< img src = "last-uploaded-coat-of-arms.cgi" title = "User-uploaded coat of arms." ></ p > 理想情况下，作者会找到一种方法来提供真正的替代文本，即使在这种情况下也是如此，例如，询问上一个用户。不提供替代文本会使文档更难使用，对于无法查看图像的人来说尤其如此，例如盲人用户，或带宽非常低的用户或按字节付费的用户，或被迫使用纯文本网页浏览器的用户。
以下是一些更多示例，显示了同一张图片在不同上下文中的使用，每次都有不同的适当替代文本。
< article >
< h1 > My cats</ h1 >
< h2 > Fluffy</ h2 >
< p > Fluffy is my favorite.</ p >
< img src = "fluffy.jpg" alt = "She likes playing with a ball of yarn." >
< p > She's just too cute.</ p >
< h2 > Miles</ h2 >
< p > My other cat, Miles just eats and sleeps.</ p >
</ article > < article >
< h1 > Photography</ h1 >
< h2 > Shooting moving targets indoors</ h2 >
< p > The trick here is to know how to anticipate; to know at what speed and
what distance the subject will pass by.</ p >
< img src = "fluffy.jpg" alt = "A cat flying by, chasing a ball of yarn, can be
photographed quite nicely using this technique." >
< h2 > Nature by night</ h2 >
< p > To achieve this, you'll need either an extremely sensitive film, or
immense flash lights.</ p >
</ article > < article >
< h1 > About me</ h1 >
< h2 > My pets</ h2 >
< p > I've got a cat named Fluffy and a dog named Miles.</ p >
< img src = "fluffy.jpg" alt = "Fluffy, my cat, tends to keep itself busy." >
< p > My dog Miles and I like go on long walks together.</ p >
< h2 > music</ h2 >
< p > After our walks, having emptied my mind, I like listening to Bach.</ p >
</ article > < article >
< h1 > Fluffy and the Yarn</ h1 >
< p > Fluffy was a cat who liked to play with yarn. She also liked to jump.</ p >
< aside >< img src = "fluffy.jpg" alt = "" title = "Fluffy" ></ aside >
< p > She would play in the morning, she would play in the evening.</ p >
</ article >