HTML4.01dで書かれた参考書のコードをHTML5に書き換えながら勉強しています。私のコードを正しく修正していただけませんか。

HTML4.01dで書かれた参考書のコードをHTML5に書き換えながら勉強しています。私のコードを正しく修正していただけませんか。書き換えたコードは正しく表示されています。
段組みのやり方がよくないような気がしています。直した方がいいところを教えてください。
お願いいたします。

HTML4.01
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5<title>Herb Kitchen</title>
6<link href="css/base.css" rel="stylesheet" type="text/css">
7<link href="css/6-1.css" rel="stylesheet" type="text/css">
8</head>
9
10<body>
11<div class="pagebody">
12  <div class="header">
13    <h1><a href="#">Herb Kitchen</a></h1>
14  </div>
15  <div class="nav">
16    <ul>
17      <li><a href="#">News</a></li>
18      <li id="now"><a href="#">Food</a></li>
19      <li><a href="#">Drink</a></li>
20      <li><a href="#">Goods</a></li>
21      <li><a href="#">Column</a></li>
22    </ul>
23  </div>
24  <div class="f-box">
25    <div class="section">
26      <h2>オリジナルレシピ</h2>
27      <p>ハーブを使ったカンタンで美味しいオリジナル料理のレシピをご紹介します。ハーブを使ったカンタンで美味しいオリジナル料理のレシピをご紹介します。</p>
28      <div class="article">
29        <h3>タコのカルパッチョ</h3>
30        <p><img src="images/salad.jpg" alt="タコのカルパッチョの画像">ハーブは西洋料理で使われるものばかりではありません。葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。ハーブは西洋料理で使われるものばかりではありません。ハーブは西洋料理で使われるものばかりではありません。<br>
31          葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。ハーブは西洋料理で使われるものばかりではありません。葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。ハーブは西洋料理で使われるものばかりではありません。</p>
32      </div>
33      <div class="article">
34        <h3>しらすのペペロンチーノ</h3>
35        <p><img src="images/pasta.jpg" alt="しらすのペペロンチーノの画像">ハーブは西洋料理で使われるものばかりではありません。葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。ハーブは西洋料理で使われるものばかりではありません。葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。<br>
36          葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。ハーブは西洋料理で使われるものばかりではありません。葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。 </p>
37      </div>
38    </div>
39    <div class="aside">
40      <h2>最新記事</h2>
41      <ul>
42        <li><a href="#">バジルに虫がついたら</a></li>
43        <li><a href="#">風邪に効くハーブ</a></li>
44        <li><a href="#">ハーブフェア開催!</a></li>
45        <li><a href="#">ローズヒップティー</a></li>
46      </ul>
47      <h2>人気レシピ</h2>
48      <ul>
49        <li><a href="#">しらすのペペロンチーノ</a></li>
50        <li><a href="#">ハーブピザ</a></li>
51        <li><a href="#">夏野菜のジェノベーゼ</a></li>
52        <li><a href="#">タコのカルパッチョ</a></li>
53        <li><a href="#">エスニックサラダ</a></li>
54      </ul>
55      <h2>人気商品</h2>
56      <ul>
57        <li><a href="#">イタリアンハーブmix</a></li>
58        <li><a href="#">オーガニックミント</a></li>
59        <li><a href="#">電動グラインダー</a></li>
60        <li><a href="#">フレッシュハーブセット</a></li>
61        <li><a href="#">エスニックmix</a></li>
62      </ul>
63    </div>
64  </div>
65  <div id="footer">
66    <address>
67    Copy Right <a href="#">Herb Kitchen</a> Co.,Ltd. Since 2004
68    </address>
69  </div>
70</div>
71</body>
72</html>
73

HTML5
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>Herb Kitchen</title>
6    <link href="css/base.css" rel="stylesheet">
7    <link href="css/6-1-126p.css" rel="stylesheet">
8</head>
9
10<body>
11<div class="pagebody">
12  <header>
13    <h1><a href="#">Herb Kitchen</a></h1>
14  </header>
15  <nav>
16    <ul>
17      <li><a href="#">News</a></li>
18      <li id="now"><a href="#">Food</a></li>
19      <li><a href="#">Drink</a></li>
20      <li><a href="#">Goods</a></li>
21      <li><a href="#">Column</a></li>
22    </ul>
23  </nav>
24    
25  <div class="f-box">
26    <section>
27      <h2>オリジナルレシピ</h2>
28      <p>ハーブを使ったカンタンで美味しいオリジナル料理のレシピをご紹介します。</p>
29      <article>
30        <h3>タコのカルパッチョ</h3>
31        <p><img src="images/salad.jpg" 
32                alt="タコのカルパッチョの画像">
33            ハーブは西洋料理で使われるものばかりではありません。
34            葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。
35        </p>
36      </article>
37        
38      <article>
39        <h3>しらすのペペロンチーノ</h3>
40        <p><img src="images/pasta.jpg" alt="しらすのペペロンチーノの画像">ハーブは西洋料理で使われるものばかりではありません。葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。ハーブは西洋料理で使われるものばかりではありません。葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。<br>
41          葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。ハーブは西洋料理で使われるものばかりではありません。葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。 </p>
42      </article>
43    </section>
44    <aside>
45      <h2>最新記事</h2>
46      <ul>
47        <li><a href="#">バジルに虫がついたら</a></li>
48        <li><a href="#">風邪に効くハーブ</a></li>
49        <li><a href="#">ハーブフェア開催!</a></li>
50        <li><a href="#">ローズヒップティー</a></li>
51      </ul>
52      <h2>人気レシピ</h2>
53      <ul>
54        <li><a href="#">しらすのペペロンチーノ</a></li>
55        <li><a href="#">ハーブピザ</a></li>
56        <li><a href="#">夏野菜のジェノベーゼ</a></li>
57        <li><a href="#">タコのカルパッチョ</a></li>
58        <li><a href="#">エスニックサラダ</a></li>
59      </ul>
60      <h2>人気商品</h2>
61      <ul>
62        <li><a href="#">イタリアンハーブmix</a></li>
63        <li><a href="#">オーガニックミント</a></li>
64        <li><a href="#">電動グラインダー</a></li>
65        <li><a href="#">フレッシュハーブセット</a></li>
66        <li><a href="#">エスニックmix</a></li>
67      </ul>
68    </aside>
69  </div>
70    
71  <footer>
72    Copy Right <a href="#">Herb Kitchen</a> Co.,Ltd. Since 2004
73  </footer>
74  
75</div>
76</body>
77</html>
78

css
1@charset "utf-8";
2.pagebody {
3	width:800px;
4	margin:auto;
5}
6.f-box {
7	
8	display:flex;
9}
10section {
11	box-sizing:border-box;
12	width:600px;
13	padding:10px;
14}
15
16article {
17    
18}
19
20
21aside {
22	box-sizing:border-box;
23	width:200px;
24	padding:10px;
25}
26
27footer {
28    text-align: center;
29}

yoshinavi

2019/03/08 06:34

＞段組みのやり方がよくないような気がしています。　→　どこが良くないと思うのか？どうしたいのか？の部分がありませんので、「低評価」をもっと付けられる可能性があります。また、「HTML4.01」時代の参考書は基本的に「CSS3」が対象ではありません。これから作成していくのであれば、「HTML5」「CSS3」に基づいて記述された参考書を「基本」とするべきかと思います。

退会済みユーザー

2019/03/08 06:40

いつもお世話になっております。Kousuke_Shibuyaさんに教えていただいたURL でチェックしたら、 ”よくできました”と出たので安心しました。独学なので不安だったので質問してみました。

yoshinavi

2019/03/08 07:16

目指す方向にもよりますが、文法的な「正誤」は気になるところだと思います。しかし、「文法が正しい」＝「良いサイト」ではありません。文法は『正しいに越したことはない』のですが、捉われ過ぎるのも、良くない場合もあります。例）「Kosuke_Shibuya」さんのリンク先に「yahoo! JAPAN」を入れてみてください。検索結果での上位サイトでも「文法的な点数」は低いのも多く、一般的なwebサイトにおいては「最重要」でないのも事実です。どのブラウザからでも、意図するデザインが表現できていれば「OK」なのです。 (^^;)

退会済みユーザー

2019/03/08 10:42

まだよちよちなので、少しづつ勉強します。