clarified head wording and expanded with metadata example

ChanChar · ChanChar · commit fc3da89f3e41 · 2015-09-05T22:14:25.000-07:00
diff --git a/sites/en/frontend/HTML_structure.step b/sites/en/frontend/HTML_structure.step
@@ -10,7 +10,7 @@ overview do
 
 ## The HTML tag and Doctype
 
-The line `<!DOCTYPE html>` is called the doctype, and it tells the browser which flavor of HTML you're using. `<!DOCTYPE html>` tells your browser you're using HTML5, the latest version of HTML. 
+The line `<!DOCTYPE html>` is called the doctype, and it tells the browser which flavor of HTML you're using. `<!DOCTYPE html>` tells your browser you're using HTML5, the latest version of HTML.
 
 (You may see older doctypes out there that are longer and a lot more complicated, from when people
 used various HTML and XHTML versions, but those are annoying, and you can usually just
@@ -24,25 +24,50 @@ The `<html>` encloses all the rest of your page, and states unequivocally, "Here
   source_code :html, <<HTML
 <!DOCTYPE html>
 <html>
-  <head>Invisible, Important Stuff</head>
-  <body>Actual Visible Content</body>
+  <head>
+    <!-- Important invisible details will go here! -->
+  </head>
+  <body>
+    Actual Visible Content
+  </body>
 </html>
 HTML
   message <<-MARKDOWN
 
 ### The Head
 
-The head contains information _about_ the document, including:
+The head contains information about the metadata (data that describes data), including:
 
-* what language or character set you're using
-* what the page title should be
-* what CSS and JavaScript files to include (and where they are)
+What language or character set you're using: `<meta charset="utf-8">`
 
-Information in the `<head>` section is __not__ displayed. 
+What the page title should be: `<title>HTML!</title>`
+
+What CSS and JavaScript files to include (and where they are):
+
+`<link rel="stylesheet" href="style.css">`
+
+Information in the `<head>` section should __not__ be displayed on your browser.
 
 It can also contain metadata tags that can tell a search engine or another
 program more about the file, like who wrote it or what keywords are relevant.
 
+  MARKDOWN
+  source_code :html, <<HTML
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>HTML: Head</title>
+    <link rel="stylesheet" href="mystyle.css">
+
+    <meta charset="utf-8">
+    <meta name="keywords" content="HTML, CSS, JavaScript, Meta">
+    <meta name="description" content="Learning HTML, CSS, & JS one step at a time.">
+  </head>
+</html>
+HTML
+  message <<-MARKDOWN
+
+
 ### The Body
 
 The Body contains the actual content of your file, the things you'll want your users
@@ -80,4 +105,3 @@ When you refresh your browser, you should see the title on the tab in Chrome.
 end
 
 next_step "basic_CSS"
-
