NEL Laboratory

Learning Innovation.

個人的HTML文法メモ

個人的文法メモ

個人的に利用するHTML文法をコピペできるようにまとめておく記事です。

Advertisement
目次

基本記述

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8"> <!-- 文字コード指定 -->
	<link rel="icon" href="iconpath.png"> <!-- アイコン指定 -->

	<title>タイトル</title> <!-- タイトル -->
</head>

<body>
	<header>
		<!-- ヘッダー処理 -->
	</header>

	<main>
		<!-- メイン処理 -->
	</main>

	<footer>
		<!-- フッター処理 -->
	</footer>

</body>

</html>

基本的に私はこの基礎記述から作っています。

改行

<br>

<br>をつけることで改行されます。

見出し

<h1>レベル1見出し</h1>
<h2>レベル2見出し</h2>
<h3>レベル3見出し</h3>
<h4>レベル4見出し</h4>
<h5>レベル5見出し</h5>
<h6>レベル6見出し</h6>

上から順に重要度が下がってきます。

段落

<p>文章</p>

文をひとかたまりとして段落区切りができます。

長文を書くときは段落で区切り、段落内での改行には<br>を利用しましょう。

ヘアライン

<hr>

区切り線を挿入することができます。

画像表示

<img src="imagepath.png" alt="altテキスト">

altテキストは無くても良いですが、画像が表示されない場合やテキスト読み上げに利用されるのでできるだけ記述しておきましょう。

範囲

<div></div>
<span></span>

divはブロックレベル要素としてグループ化することができます。

spanはインライン要素としてグループ化することができます。

リンク

<a href="https://nellab.net/" target="_blank" rel="noopener">NEL Laboratory</a>

target=”_blank”を追加することで新しいタブで開かせることができます。

target=”_blank”の脆弱性を回避する

rel=”noopener”を追加することでtarget=”_blank”の脆弱性を回避することができます。

リスト

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ul>

<ol>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ol>

ulでリスト、olで番号付きリストになります。

リストの中にリストを記述することでリストを階層化することも可能です。

CSSファイル読み込み

<link rel="stylesheet" href="csspath.css">

CSSファイルを読み込んでくる処理です。

基本的にはhead内に記述しますが、body内でもOKです。

JavaScriptファイル読み込み

<script type="text/javascript" src="jspath.js"></script>

JavaScriptファイルを読み込んでくる処理です。

Advertisement

文字装飾などはCSSで行うことにします。

個人的CSS文法メモ