Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

html

Name: html
Author: mindrally

セマンティックなHTMLマークアップ、ドキュメント構造、フォーム、アクセシビリティ属性、およびモダンなHTMLのベストプラクティスに関するガイドラインを提供します。適切なHTML要素の選択やアクセシブルなマークアップの実装時に活用できます。

description の原文を見る

Guidelines for semantic HTML markup, document structure, forms, accessibility attributes, and modern HTML best practices

SKILL.md 本文

HTML開発ガイドライン

コア原則

セマンティックHTMLを記述してアクセシビリティとSEOを向上させる
各要素を意図した目的に適切に使用する
適切なドキュメント構造と階層を確保する
ARIAロールと属性を必要に応じて使用してアクセシビリティを優先する

セマンティック要素

ドキュメント構造

<header> を導入コンテンツとナビゲーションに使用する
<main> をプライマリコンテンツに使用する（ページごとに1つ）
<footer> をフッターコンテンツに使用する
<nav> をナビゲーションセクションに使用する
<aside> を周辺関連コンテンツに使用する

コンテンツセクション

<article> を独立した配布可能なコンテンツに使用する
<section> をコンテンツのテーマ別グループ化に使用する
適切な見出しの階層構造を使用する（<h1> から <h6>）
ページごとに1つの <h1> のみ使用し、メインテーマを表現する

テキストコンテンツ

<p> を段落に使用する
<ul>, <ol>, <dl> をリストに適切に使用する
<blockquote> を引用に使用する
<figure> と <figcaption> をイラストレーションに使用する

インタラクティブ要素

ボタンとリンク

<button> をナビゲートしないクリック可能なアクションに使用する
<a> をURLにナビゲートするリンクに使用する
リンクに常に href 属性を含める
クリック可能な要素に <div> や <span> を使用しない

フォーム

<form> を action と method 属性を適切に設定して使用する
for 属性を使用してラベルをインプットに関連付ける
適切なインプットタイプを使用する（email, tel, number など）
<fieldset> と <legend> で関連インプットをグループ化する
検証属性（required, pattern, min, max）を含める

メディア要素

画像

画像に常に alt 属性を含める
情報提供画像に対して説明的なalt テキストを使用する
装飾画像に空の alt="" を使用する
レスポンシブ画像に srcset と sizes を使用する
レイアウトシフトを防ぐために width と height を含める

ビデオとオーディオ

キャプションとトランスクリプトを提供する
互換性のために複数のソース形式を含める
ビデオサムネイルに poster 属性を使用する
自動再生がユーザー体験に与える影響を考慮する

アクセシビリティ（ARIA）

ARIAを使用するタイミング

ネイティブHTMLセマンティクスが不十分な場合にARIAを使用する
可能な場合はARIAより優先してネイティブHTML要素を使用する
ARIA属性がアクテュアル要素の動作と一致していることを確認する

一般的なARIA属性

aria-label はアクセシブル名に使用する
aria-describedby は追加の説明に使用する
aria-hidden は装飾要素に使用する
aria-expanded は展開可能なセクションに使用する
aria-live は動的コンテンツ更新に使用する

ランドマーク

ランドマークロールを使用してページリージョンを定義する
すべてのコンテンツがランドマーク内にあることを確認する
セマンティック要素が利用できない場合のみ role="main", role="navigation" などを使用する

ベストプラクティス

ドキュメントメタ

適切な <!DOCTYPE html> 宣言を含める
<html> 要素に言語属性を設定する
レスポンシブデザイン用のviewportメタタグを含める
SEO用に適切なメタタグを使用する

コード品質

W3C バリデータを使用してHTMLを検証する
一貫したインデンテーションを保つ
すべてのタグを適切に閉じる（セルフクロージングを含む）
要素名と属性に小文字を使用する

非推奨要素

スタイリングに <font>, <center>, <b>, <i> を避ける
ビジュアルプレゼンテーションにはCSSを使用する
セマンティック強調に <strong> と <em> を使用する

HTMX統合

HTMXでインタラクティビティを使用する場合：

サーバーリクエストに hx-get, hx-post 属性を使用する
hx-target を活用して更新対象を指定する
hx-swap を使用してコンテンツの挿入方法を制御する
重要なアクション向けに hx-confirm を実装する
完全なリフレッシュなしでURL更新に hx-push-url を使用する

Bootstrap統合

Bootstrapを使用する場合：

レイアウトにBootstrapのグリッドシステムを活用する
適切なマークアップ構造でBootstrapコンポーネントを使用する
コンポーネントに必要なARIA属性を含める
間隔とタイポグラフィにBootstrapのユーティリティクラスを使用する
Bootstrapクラスを使用してカスタムCSSを最小化する

パフォーマンス

DOM深度と複雑性を最小化する
スクリプトを適切に defer または async で読み込む
ビューフォルド下の画像に loading="lazy" を使用する
<link rel="preload"> で重要リソースをプリロードする

ライセンス: Apache-2.0(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: mindrally
リポジトリ: mindrally/skills
ライセンス: Apache-2.0
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/mindrally/skills / ライセンス: Apache-2.0