記事に付属するキーワードやタグを表示したい

ニュースサイトやブログサイトで、記事ページにキーワードやカテゴリ、タグなどを表示したいとき<a>タグを使用するのが一般的です。HTML構造をできるだけシンプルにするため、<a>タグに直接パディングやボーダーなどのCSSプロパティを適用するのがポイントです。<a>タグのテキストリンクを四角く囲むためプロパティには、marginプロパティ、borderプロパティ、paddingプロパティ、backgroundプロパティなどを使用します。※<a>タグには原則として上下マージンが設定できないので、マージンは隣り合うタグとタグの間にスペースを設けるために使用します。

サンプル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
    <meta charset="uft-8"><!-文字コードを指定->
    <style>
      
      .tags a{
        margin: 0 5px 0 0;
        padding: 3px 20px;
        background:#ececec;
        border: 1px solid #b3b3b3;
        border-radius: 3px;
        font-size:12px;
        text-decoration:none;
        color: #4c4c4c;
      }
      .tags a:hover{
        background:#fcfcfc;
      }
     
    </style>
  </head> 
  <body>
    <p class="tags">
      <a href="#">C#</a>
      <a href="#">VB</a>
      <a href="#">HTML</a>
      <a href="#">CSS</a>
      <a href="#">JavaScript</a>
    </p>
   </body>
</html>

実行結果

カテゴリー:WEB