コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > HTML > こんなことできるって知ってた？HTMLだけでできること21選

こんなことできるって知ってた？HTMLだけでできること21選

HTML

21 HTML Tips You Must Know About

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

リンクの作成

クリック可能なメール、電話、SMSのリンク作成は次の通りです。

<!-- メールリンク -->
<a href="mailto:name@example.com"> メールを送信 </a>

<!-- 電話リンク -->
<a href="tel:+1234567890"> お電話ください </a>

<!-- SMSリンク -->
<a href="sms:+1234567890"> SMSを送信 </a>

展開・折りたたみ可能なコンテンツ

展開・折りたたみ可能なコンテンツを Web ページに含めたい場合は、<details> と <summary> タグを使用できます。

<details> タグは非表示のコンテンツのコンテナを作成し、<summary> タグではそのコンテンツの表示/非表示を切り替えるクリック可能なラベルを提供します。

<details>
  <summary>クリックして展開</summary>
  <p>このコンテンツは展開または折りたたみ可能です。</p>
</details>

意味のあるHTML要素の活用

ウェブサイトでは意味のある要素を非意味要素よりも選択してください。これにより、コードに意味が持たされ、構造、アクセシビリティ、SEO が改善されます。

フォーム要素のグループ化

<fieldset> タグを使用して、フォーム内の関連する要素をグループ化できます。<fieldset> タグの中で <legend> タグを使えば、<fieldset> のタイトルを定義できます。

これにより、より効率的でアクセシビリティの高いフォームを作成できます。

<form>
   <fieldset>
      <legend>個人情報</legend>
      <label for="firstname">名前:</label>
      <input type="text" id="firstname" name="firstname" />
      <label for="email">メールアドレス:</label>
      <input type="email" id="email" name="email" />
      <label for="contact">連絡先:</label>
      <input type="text" id="contact" name="contact" />
      <input type="button" value="送信" />
   </fieldset>
</form>

ドロップダウンメニューの拡張

<select> HTML タグ内で <optgroup> タグを使えば、関連するオプションをグループ化できます。

大規模なドロップダウンメニューや長いオプションリストがある場合に使えます。

<select>
   <optgroup label="フルーツ">
      <option>リンゴ</option>
      <option>バナナ</option>
      <option>マンゴー</option>
   </optgroup>
   <optgroup label="野菜">
      <option>トマト</option>
      <option>ブロッコリー</option>
      <option>ニンジン</option>
   </optgroup>
</select>

動画の表示改善

<video> 要素で poster 属性を使うと、ユーザーが動画を再生するまでポスターイメージを表示できます。

<video controls poster="image.png" width="500">
  <source src="video.mp4" type="video/mp4 />
</video>

複数選択のサポート

<input> および <select> 要素で multiple 属性を使えば、ユーザーが一度に複数の値を選択/入力できるようになります。

<input type="file" multiple />
<select multiple>
    <option value="java">Java</option>
    <option value="javascript">JavaScript</option>
    <option value="typescript">TypeScript</option>
    <option value="rust">Rust</option>
</select>

テキストの上付き・下付き表示

<sub> と <sup> 要素を使えば、それぞれテキストを下付き、上付きで表示できます。

ダウンロードリンクの作成

<a> 要素で download 属性を使えば、リンク先のリソースをダウンロードするように指定できます。

<a href="document.pdf" download="document.pdf"> PDFをダウンロード </a>

相対リンクのベースURLの定義

<base> タグを使えば、Web ページ内のすべての相対 URL のベース URL を定義できます。

これは、Web ページ内のすべての相対 URL の共通の開始点を作成したい場合に便利で、ナビゲーションやリソースのロードを簡単にします。

<head>
   <base href="https://shefali.dev" target="_blank" />
</head>
<body>
   <a href="/blog">ブログ</a>
   <a href="/get-in-touch">お問い合わせ</a>
</body>

画像の読み込み制御

<img> 要素の loading 属性を使えば、ブラウザが画像をどのように読み込むかを制御できます。この属性には "eager" 、"lazy" 、"auto" の 3 つの値があります。

<img src="picture.jpg" loading="lazy">

翻訳機能の管理

translate 属性を使えば、要素のコンテンツをブラウザの翻訳機能で翻訳するかどうかを指定できます。

<p translate="no">
  このテキストは翻訳されません。
</p>

入力文字数の上限設定

maxlength 属性を使えば、入力フィールドでユーザーが入力できる最大文字数を設定できます。

<input type="text" maxlength="4">

入力文字数の下限設定

minlength 属性を使えば、入力フィールドでユーザーが入力しなければならない最小文字数を設定できます。

<input type="text" minlength="3">

コンテンツの編集の有効化

contenteditable 属性を使えば、要素のコンテンツを編集可能かどうかを指定できます。

これにより、ユーザーはその要素内のコンテンツを修正できるようになります。

<div contenteditable="true">
   このコンテンツを編集できます。
</div>

スペルチェックの制御

<input> 要素、contenteditable 要素、<textarea> 要素で spellcheck 属性を使えば、ブラウザによるスペルチェックを有効化または無効化できます。

<input type="text" spellcheck="true"/>

アクセシビリティの確保

alt 属性は、画像が表示できない場合の代替テキストを指定します。

画像に分かりやすい alt 属性を含めることで、アクセシビリティと SEO が改善されます。

<img src="picture.jpg" alt="画像の説明">

リンクの動作ターゲットの定義

target 属性を使えば、クリックされたリンク先のリソースがどこで表示されるかを指定できます。

<!-- 同じフレームで開く -->
<a href="https://shefali.dev" target="_self">開く</a>

<!-- 新しいウィンドウまたはタブで開く -->
<a href="https://shefali.dev" target="_blank">開く</a>

<!-- 親フレームで開く -->
<a href="https://shefali.dev" target="_parent">開く</a>

<!-- ウィンドウ全体で開く -->
<a href="https://shefali.dev" target="_top">開く</a>

<!-- 指定したフレームで開く -->
<a href="https://shefali.dev" target="framename">開く</a>

追加情報の提供

title 属性を使えば、ユーザーが要素の上にマウスカーソルを置いたときに、その要素に関する追加情報を提供できます。

<p title="世界保健機関">WHO</p>

特定のファイルタイプの受け入れ

accept 属性を使えば、サーバーが受け入れるファイルの種類を指定できます(ファイルタイプに対してのみ使用可能)。この属性は <input> 要素で使用します。

<input type="file" accept="image/png, image/jpeg" />

動画の読み込み最適化

<video> 要素で preload 属性を使えば、スムーズな再生のために動画ファイルを高速で読み込むことができます。

<video src="video.mp4" preload="auto">
   お使いのブラウザは video タグをサポートしていません。
</video>

©コハム