HTML主要コード一覧表

以下にHTMLの基本的なタグと要素を表形式でまとめました。

タグ	説明	使用例
<html>	HTML文書の開始と終了を定義	<html>...</html>
<head>	メタ情報を含むヘッダー部分	<head>...</head>
<title>	ページのタイトル	<title>ページタイトル</title>
<body>	文書の本文部分	<body>...</body>
<h1> ～ <h6>	見出し（レベル1～6）	<h1>大見出し</h1>
<p>	段落	<p>テキスト段落</p>
<a>	ハイパーリンク	<a href="URL">リンクテキスト</a>
<img>	画像の挿入	<img src="画像.jpg" alt="代替テキスト">
<div>	ブロックレベル要素のグループ化	<div>...</div>
<span>	インライン要素のグループ化	<span>...</span>
<ul>	順序なしリスト	<ul><li>項目</li></ul>
<ol>	順序付きリスト	<ol><li>項目</li></ol>
<li>	リスト項目	<li>リスト項目</li>
<table>	テーブル	<table>...</table>
<tr>	テーブル行	<tr>...</tr>
<td>	テーブルセル	<td>セル内容</td>
<form>	フォーム	<form>...</form>
<input>	入力フィールド	<input type="text">
<button>	ボタン	<button>クリック</button>
<br>	改行	<br>

基本的なHTML文書の構造例：

html

1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>ページタイトル</title>
6</head>
7<body>
8    <h1>メインタイトル</h1>
9    <p>これは段落です。</p>
10    <div>
11        <img src="image.jpg" alt="画像">
12        <a href="https://example.com">リンク</a>
13    </div>
14</body>
15</html>

よく使用される属性：

class: CSSのクラス名を指定
id: 要素の一意の識別子
style: インラインCSS
src: 画像やスクリプトのソースURL
href: リンク先URL
alt: 画像の代替テキスト
type: 入力フィールドの種類
name: フォーム要素の名前
value: フォーム要素の値

他のプロンプトもチェック

GPTs
キャラクター作成
顔面偏差値測定ツール
▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 あなたの顔写真を送付するだけで顔面偏差値を数字で出力してくれます。各項目別に点数付けしてくれて、顔の強みや特徴まで分析してくれるツール。客観的評価を知りたい方はぜひ使ってみてください。
6
2
3.04K
10.9K
Tam-BizAI編集長
GPTs
チャットボット
AIQ~Chat GPTを利用したIQテストツール~
5つの質問であなたのIQを測定します。
0
1
33
345
Tam-BizAI編集長
マーケティング一般
推奨モデル - ChatGPT
世界最大級のSNSマーケティングAI！！ - Claude3.5Sonnet推奨！
SNSマーケティングをします！！
2
0
10
115
ピエロ7000
音楽
推奨モデル - ChatGPT
モノや生き物の視点で綴るポエム～ 🌸花が語るロマンス、猫が感じる愛🐾～ SunoAIで歌詞にも！
物や生き物の視点を通して感情豊かなポエムを創り出す、クリエイティブなプロンプトです。SunoAIを使って歌詞としても活用できる魅力的なテキストを作り出します。使い方: テーマと視点を選択: あなたが描きたいテーマ（例: 人間模様、季節、夢、はかない恋、など）と、そのテーマを表現する視点（例: 飼い猫、古い時計、海の波、庭に飛ぶ蝶、など）を選んで入力してください。こんな方におすすめ: ・新しい視点から詩や歌詞を作りたい方・詩を歌詞としても使いたいクリエイターの方・感情を深く表現する詩や歌詞を求める方・SunoAIを活用して、詩を音楽に変えたい方あなたの創造力が、日常の風景に新たな命を吹き込みます。 ---------- 😊少しでも気に入っていただけましたら、お気に入り（❤マーク）をクリックしていただけると、とても励みになりますので、ぜひお願いいたします。 😊また、「いつか使ってみよう」と思っている方も、お気に入りに登録しておくと、いつでもマイページからすぐにご利用いただけます。 😊感想など、お気軽にコメントください。
0
0
8
62
VEP

Makedown形式について解説してくれるAI！！

HTML主要コード一覧表

コメント 0

他のプロンプトもチェック