1. TOP
  2. HTMLの基本
  3. HTML タグ
  4. CSS プロパティ
  5. 特殊文字コード

HTML TAG

よく使うHTMLタグ

基本構造・HEAD 内

!DOCTYPE html ドキュメントタイプを宣言する
Defines the document type
html

HTML文書であることを宣言する
<html>~</html>
The <html> tag tells the browser that this is an HTML document.

<html>タグとlang属性
日本語のWEBサイトは <html lang="ja">
英語:"en" ベトナム:"vi"  インドネシア:"id"  ネパール:"ne"
スリランカ:"en" 中国語:"zh"  ヒンディー語:"hi"  その他

head 文書のヘッダ情報を表す。ブラウザーには表示されない。
検索エンジン用説明文やCSSファイルへのリンク、ページタイトルを記述
<head>~</head>
The <head> element is a container for all the head elements.
The <head> element can include a title for the document, scripts, styles, meta information, and more.
meta 言語や説明文などページの情報
<meta>~ ※空要素(終了タグなし)
Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
title ページタイトル
<title>~</title>
The <title> tag is required in all HTML documents and it defines the title of the document.
link 参照する外部ファイル、主にCSSファイルを読み込む時につかう。
<link>~ ※空要素(終了タグなし)
The <link> tag defines a link between a document and an external resource.
The <link> tag is used to link to external style sheets.
body html文書のコンテンツ。この中に書かれたものがブラウザーに表示される。
<body>~</body>
Defines the document's body
The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

参考ページ:HTMLの基本とCSS「HEADに入れるTAG」


コンテンツ 内

h1~h6 見出し(heading)
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading. <h6> defines the least important heading.
p ひとつの段落(paragraph)であることを表す
The <p> tag defines a paragraph.
img 画像(image)を表示。表示する画像ファイルはsrc属性(srcはsourceの略)で指定
<img src="images/flower.jpg" width="150" height="120" alt="花"/>
※空要素(終了タグなし)
The <img> tag defines an image in an HTML page.
The <img> tag has two required attributes: src and alt.
In HTML the <img> tag has no end tag.
a リンクを貼る。リンク先はhref属性(hrefはHypertext Referenceの略)で指定
<a href="../index.html">トップページへ</a>
※空要素(終了タグなし)
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
ul 番号のない箇条書きリスト
The <ul> tag defines an unordered (bulleted) list.
Use the <ul> tag together with the <li> tag to create unordered lists.
ol 番号付き箇条書きリスト
The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
Use the <li> tag to define list items.
li リストの各項目
The <li> tag defines a list item.
br 改行
※空要素(終了タグなし)
Defines a single line break
The <br> tag is an empty tag which means that it has no end tag.
hr 横線をひく(Horizontal Rule)
※空要素(終了タグなし)
The <hr> tag defines a thematic break in an HTML page
strong 強調する。
Defines important text
blockquote 引用文
The <blockquote> tag specifies a section that is quoted from another source.
span 意味のもたないインライン要素。CSSで一部分のみ装飾するときに使う
The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.
audio 音声のデータを埋め込むときに使う
The <audio> tag defines sound, such as music or other audio streams.
video 動画のデータを埋め込むときに使う
The <video> tag specifies video, such as a movie clip or other video streams.
script 文書にスクリプトを埋め込む
The <script> tag is used to define a client-side script (JavaScript).

テキスト表現

font フォントの種類・大きさ・色を指定する
The <font> tag specifies the font face, font size, and color of text.
b テキストを太字にする
Defines bold text
u テキストに下線(アンダーライン)を引く
The <u> tag represents some text that should be stylistically different from normal text, such as misspelled words or proper nouns in Chinese.
mark 文字にマーカー
The <mark> tag defines marked text.
Use the <mark> tag if you want to highlight parts of your text.
s 打ち消し線を引く(strike)
The <s> tag specifies text that is no longer correct, accurate or relevant.

表(テーブル)

table テーブル(表)を作成する
The <table> tag defines an HTML table.
An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements.
tr 横方向の一行を定義する
The <tr> tag defines a row in an HTML table.
th 見出しセルを作成する
The <th> tag defines a header cell in an HTML table.
td データセルを作成する
The <td> tag defines a standard cell in an HTML table.
thead ヘッダ行を定義する
The <thead> tag is used to group header content in an HTML table.
tfoot フッタ行を定義する
The <tfoot> tag is used to group footer content in an HTML table.
tbody ボディ部分を定義する
The <tbody> tag is used to group the body content in an HTML table.
caption テーブル(表)にタイトルをつける
The <caption> tag defines a table caption.

フォーム

form 入力・送信フォームを作成する
The <form> tag is used to create an HTML form for user input.
input type="submit フォームの送信ボタン・リセットボタンを作成する
Defines a submit button
input type="text" 一行テキストボックスを作成する
Default. Defines a single-line text field
input type="radio" ラジオボタンを作成する
Defines a radio button
input type="checkbox チェックボックスを作成する
Defines a checkbox
select セレクトボックスを作成する
The <select> element is used to create a drop-down list.
option セレクトボックスの選択肢を指定する
The <option> tags inside the <select> element define the available options in the list.
textarea 複数行の入力フィールドを作成する
The <textarea> tag defines a multi-line text input control.
label フォーム部品と項目名(ラベル)を関連付ける
The <label> tag defines a label for a <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea> element.

グループ分け用ブロック要素

header ページ上部にある要素。ロゴやページタイトル、メインナビゲーションを囲む
The <header> element represents a container for introductory content or a set of navigational links.
nav メインのナビゲーションメニュー
The <nav> tag defines a set of navigation links.
article ページ内の記事となる部分。小さい記事をまとめる
The <article> tag specifies independent, self-contained content.
section 一つのテーマをもったグループ。小さい記事
The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
main ページのメインコンテンツ
The <main> tag specifies the main content of a document.
aside 本文ではない補足情報
The <aside> tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.
footer ページ下部にある要素。コピーライトやSNSリンクなどを含んでいる
The <footer> tag defines a footer for a document or section.
div 意味を持たないブロック要素
The <div> tag defines a division or a section in an HTML document.
The <div> element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.