簡単！HTMLだけでできるWebページ10選
【初心者向けまとめ】
初心者が最初に触れることの多い言語といえばHTML。
「CSSやJavaScriptをまだ知らないけど、何か作ってみたい！」という人向けに、
HTMLだけで作れるシンプルなWebページ例を10個まとめました。
1. 自己紹介ページ
<!DOCTYPE html>
<html>
<head><title>自己紹介</title></head>
<body>
<h1>こんにちは！</h1>
<p>名前：山田太郎</p>
<p>趣味：読書とプログラミング</p>
</body>
</html>
初心者が最初に作る定番。
2. シンプルなリンク集
<!DOCTYPE html>
<html>
<head><title>リンク集</title></head>
<body>
<h1>おすすめサイト</h1>
<ul>
<li><a href="https://qiita.com">Qiita</a></li>
<li><a href="https://github.com">GitHub</a></li>
</ul>
</body>
</html>
お気に入りサイトをまとめるだけでも立派なページです。
3. 画像ギャラリー
<!DOCTYPE html>
<html>
<head><title>画像ギャラリー</title></head>
<body>
<h1>旅行写真</h1>
<img src="photo1.jpg" alt="海">
<img src="photo2.jpg" alt="山">
</body>
</html>
画像を並べるだけでギャラリー風に。
4. 簡単な日記ページ
<!DOCTYPE html>
<html>
<head><title>日記</title></head>
<body>
<h1>今日の出来事</h1>
<p>今日はHTMLを勉強しました。</p>
</body>
</html>
毎日更新すれば立派なブログなります。
5. お問い合わせフォーム（送信はできない）
<!DOCTYPE html>
<html>
<head><title>お問い合わせ</title></head>
<body>
<h1>お問い合わせ</h1>
<form>
名前: <input type="text"><br>
メール: <input type="email"><br>
メッセージ: <textarea></textarea><br>
<input type="submit" value="送信">
</form>
</body>
</html>
送信機能はサーバーが必要ですが、見た目だけならHTMLでOK。
6. シンプルな表（テーブル）
<!DOCTYPE html>
<html>
<head><title>表</title></head>
<body>
<h1>成績表</h1>
<table border="1">
<tr><th>名前</th><th>点数</th></tr>
<tr><td>山田</td><td>90</td></tr>
<tr><td>佐藤</td><td>80</td></tr>
</table>
</body>
</html>
表を作るだけでデータ管理ページに。
7. シンプルなナビゲーション
<!DOCTYPE html>
<html>
<head><title>ナビゲーション</title></head>
<body>
<h1>メニュー</h1>
<nav>
<a href="index.html">ホーム</a> |
<a href="about.html">自己紹介</a> |
<a href="contact.html">お問い合わせ</a>
</nav>
</body>
</html>
複数ページを作ればサイトっぽくなります
8. シンプルなニュースページ
<!DOCTYPE html>
<html>
<head><title>ニュース</title></head>
<body>
<h1>最新ニュース</h1>
<article>
<h2>HTMLを勉強しよう</h2>
<p>初心者でも簡単にWebページが作れます。</p>
</article>
</body>
</html>
記事風に書くだけでニュースサイト風に。
9. シンプルなリストページ
<!DOCTYPE html>
<html>
<head><title>買い物リスト</title></head>
<body>
<h1>買い物リスト</h1>
<ol>
<li>牛乳</li>
<li>パン</li>
<li>卵</li>
</ol>
</body>
</html>
番号付きリストで整理してみましょう。
10. シンプルなプロフィールカード
<!DOCTYPE html>
<html>
<head><title>プロフィール</title></head>
<body>
<h1>プロフィール</h1>
<p><strong>名前:</strong> 山田太郎</p>
<p><strong>職業:</strong> エンジニア</p>
<p><strong>趣味:</strong> プログラミング</p>
</body>
</html>
名刺代わりに使えます。
まとめ
HTMLだけでも十分に「Webページらしいもの」が作れます。
CSSやJavaScriptを学ぶ前に、まずはHTMLで遊んでみてください。
小さなページを積み重ねることで、自然とWeb制作の基礎が身につきます。
次はCSSを少し加えてデザインを整えるステップに進むとさらに楽しくなります。