HTML is the code that gives a web page its content and structure. It consists of tags—short names inside angle brackets—that mark up page objects such as headings, paragraphs, lists, links, images, and sections. A browser reads those tags and displays the page; CSS handles much of the visual styling. section 2.2.1
A tag usually has an opening and closing form. For example, <h1>Welcome!</h1> marks a first-level heading, while <p>Text here</p> marks a paragraph. Change the text between matching tags to update content, but leave the tags in place so the browser can retain the intended structure. section 2.2.1 section 3.4
HTML commonly organizes a page into recognizable parts:
- A header can contain a logo, page title, and tagline. section 4.1
- A main element can hold sections of page content, each with headings, paragraphs, images, or other details. section 4.1
- A footer can include copyright information and social-media links. section 4.1
- A link tag in the page head can point the browser to a separate CSS file, such as styles.css. section 7.4.1
Add a new content section
To add another section, copy an existing <section>...</section> block in the HTML file, paste it where you want the new content, then edit its heading and paragraph text. Wrap each separate paragraph in its own <p> and </p> tags. section 6.4
Generated HTML is inert until saved in a file a browser can open. Copy the code into a text editor, save it as index.html in a project folder, open it in a browser to test it, and upload the folder to a web host when it is ready to publish. For multi-page sites, repeat the process for each page; for a complex page, generate and insert components separately. section 2.3.1 section 2.4 section 1.4.5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> ①
<title>Bread in the Bone</title>
<link href="https://fonts.googleapis.com/css2?
family=Lato:wght@700&family=Raleway:wght@400&
display=swap"rel="stylesheet"> ②
<link rel="stylesheet" href="styles.css"> ③
</head>
<body>
<header> ④
<nav> ④⑤
<ul> ④⑤
<li><a href="index.html">Home</a></li> ④⑤
<li><a href="history.html">History</a></li> ④⑤
<li><a href="culture.html">Culture</a></li> ④⑤
<li><a href="language.html">Language</a></li> ④⑤
</ul> ④⑤
</nav> ④⑤
<h1>Bread in the Bone</h1> ④⑥
<p> ⑦
A half-baked look at the history ⑦
and culture of bread ⑦
</p> ⑦⑧
</header> ⑧
<main> ⑨
<p> ⑨⑩
Welcome to Bread in the Bone, where I, a bread baker, a ⑨⑩
bread eater, and an unabashed bread nerd, try to make ⑨⑩
sense of the historical, cultural, and linguistic ⑨⑩
significance of that most humble of home staples: the loaf ⑨⑩
of bread. It's the greatest thing since, well, you know... ⑨⑩
</p> ⑨⑩
<p>This site is divided into three sections:</p> ⑨
<section> ⑪⑫
<h2>History</h2> ⑪⑫
<p> ⑪⑫
A potted and probably not very accurate history of ⑪⑫
bread, from its ancient origins to today's ancient ⑪⑫
grains. <a href="history.html">Check it out.</a> ⑪⑫
</p> ⑪⑫
</section> ⑪⑫
<section> ⑫
<h2>Culture</h2> ⑫
<p> ⑫
A remarkably shallow examination of the cultural ⑫
significance of bread, from its religious meanings ⑫
to its social uses. <a href="culture.html">Read it.</a> ⑫
</p> ⑫
</section> ⑫
<section> ⑫
<h2>Language</h2> ⑫
<p> ⑫
A not-all-that-deep dive into the linguistic roots ⑫
of bread, from its etymology to its varied metaphors. ⑫
<a href="language.html">Go there.</a> ⑫
</p> ⑫
</section> ⑫
</main> ⑫
<footer> ⑬
© 2023 Paul McFedries ⑬
</footer> ⑬
</body>
</html> ① Specifies the page character set ② Loads the page fonts from Google Fonts ③ Tells the web browser where to find the CSS code ④ Page header ⑤ Navigation element ⑥ Page title ⑦ Page tagline ⑧ Page header ⑨ Main element ⑩ Page introduction ⑪ Each section element has a heading, description, and link. ⑫ Main element ⑬ Page footer |
Inspect an annotated page skeleton to see HTML’s head, stylesheet link, header, navigation, links, and main content arranged together. section 7.4.1
