目次
1,はじめに
2,HTMLでよく使うタグ
3,最後に
1,はじめに
この記事はSLP KBIT Advent Calender2021の18日目の記事です。
ここでは、私がWordPressでHTMLを勉強していてよく使ったタグについてまとめていこうと思います。
その他のタグについての詳細はこちらのサイトから。
2,HTMLでよく使うタグ
HTMLとは、HyperText Markup Languageの略で、ウェブページを作成するために開発されたプログラミング言語です。
(DOCTYPE宣言。
Document Type Definition(DTD)の略で、そのページがHTMLで書かれていることをブラウザに認識させる。)
<!DOCTYPE html>
(DOCTYPE宣言のすぐ後に記述する。このタグで囲まれた部分がHTMLで書かれた文章であることを表す。
このタグ内にlang="jaを書くことでWebページの言語を日本語に設定できる。)
<html></html>
head.html
<!--このタグで囲った中に、そのページについての情報を記述する。ブラウザには表示されない。-->
<head></head>
<!--文字コードを「UTF-8」に指定する。文字化けを防ぐ。-->
<meta charset="utf-8">
<!--ページのタイトルを指定する。
ここで指定したタイトルがページのタイトルだけでなくブラウザのタブとしても表示される。-->
<title>ここにタイトルを記述</title>
<!--そのページについての説明をする。
検索したときにページのタイトルと共に表示される。-->
<meta name="description" content="ここに説明を書く">
<!--レスポンシブ対応で用いる。-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--imgフォルダ内にあるfavicon.icoをファビコンとして読み込む。-->
<link rel="shortcut icon" href="img/favicon.ico">
<!--ress.cssというファイルをインターネットからスタイルシートに読み込み、適用する。
「ress.css」はデフォルトで適用されているcssを(効率よくブラウザ間の最小限の誤差だけ)リセットしてくれるファイル-->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<!--cssフォルダにあるstyle.cssをスタイルシートに読み込み、適用する。-->
<link rel="stylesheet" href="css/style.css">
タグの詳しい説明
| タグ | 意味 | 属性 | 意味 |
|---|---|---|---|
| meta | その文書に関する情報（メタ情報）を指定 必ず～間に記述 |
name属性 | メタデータの名前を指定 |
| content属性 | メタデータの値などを指定 | ||
| charset属性 | HTML文書の文字エンコーディングを指定 | ||
| title | その文書に文書にタイトルを付ける | ||
| link | 関連する文書ファイルを指定する | href属性 | リンクする外部リソースのURL（必須属性） |
| rel属性 | 現在のファイルとリンク先の外部ファイルとの関係性を表すキーワード（必須属性） |
body.html
<!--このタグで囲った中に、表示したいコンテンツを記述する。-->
<body></body>
<!--イントロダクションやナビゲーショングループであることを示す。-->
<header></header>
<!--メインコンテンツであることを示す。-->
<main></main>
<!--直近のセクションのフッタであることを示す。
フッタには、誰が書いたのか、関連文書へのリンク、著作権などのセクションに関する情報が含まれる。-->
<footer></footer>
3,最後に
今回はよく使うHTMLのタグをまとめてみました。
最後まで読んでいただき、ありがとうございます。
少しでも参考になれば嬉しいです。
WordPressの勉強にオススメのサイトはこちら
・code-step(模写の練習サイト): https://code-step.com
・progate(いろんなプログラミング言語の練習サイト): https://prog-8.com/
・YATのblog(WordPressでのテーマ開発を学べるサイト): https://wp.yat-net.com/?p=5970#theme08