スキルアップを始める!

【HTMLテンプレート】シンプルなテンプレート

HTML(エイチティーエムエル)
HTML(エイチティーエムエル)
この記事は約3分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

HTMLのテンプレート

以下はHTMLの基本的なテンプレートです。

<!DOCTYPE html>
<html>

<head>
  <title>{タイトル}</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="{CSSファイル}">
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">{リンク1}</a></li>
        <li><a href="#">{リンク2}</a></li>
        <li><a href="#">{リンク3}</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>{見出し}</h1>
    <p>{本文}</p>
    <img src="{画像ファイル}" alt="{画像の説明}">
  </main>
  <footer>
    <p>{フッター}</p>
  </footer>
  <script src="{JavaScriptファイル}"></script>
</body>

</html>

このテンプレートには、基本的なHTML要素が含まれています。!DOCTYPE htmlはHTML5の文書タイプを指定します。html要素はHTML文書のルート要素です。

head要素には、ページのタイトル、文字コードなどのメタデータが含まれます。body要素には、ページの実際のコンテンツが含まれます。

h1、h2、pなどの要素は、見出しや段落などのテキストコンテンツを表します。

必要に応じて、title、meta、link、script要素などを追加してください。

[rml_read_more]

HTMLのテンプレート2

シンプルなパターンです。

<!DOCTYPE html>
<html>

<head>
  <title>タイトル</title>
  <meta charset="UTF-8">
</head>

<body>
<p>Hello!</p>
</body>

</html>

必要に応じてカスタマイズください。

URLをコピーしました!