# Unit 2 HTML Codes By Lesson

**URL:** <https://forum.code.org/t/unit-2-html-codes-by-lesson/8414>\
**Category:** Unit and Lesson Discussion\
**Tags:** csd-unit-2, csd-unit-2-lesson-3\
**Created:** [July 9, 2017, 4:13am UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414 "2017-07-09T04:13:03Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![slooowlearner](https://avatars.discourse-cdn.com/v4/letter/s/f475e1/32.png) [@slooowlearner](https://forum.code.org/u/slooowlearner)\
**Post date:** [July 9, 2017, 4:13am UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/1 "2017-07-09T04:13:03Z")

</div>

This is the “cheat sheet” I created to keep track of HTML Codes in Unit 2. I have filled in explanations in simple student friendly terms. I am new to coding! If you find I have misrepresented a code or left something out, please let me know. I have also added the section for attributes to my list. Diane Neville, Gulfstream Academy, Hollywood, Florida

[Coding Unit 2 HTML.docx](https://forum.code.org/uploads/short-url/velUaJeBVWAP0elQOZivkkB7X8x.docx) (97.8 KB)

---

<div class="post-metadata">

**Author:** ![melanie\_kalmar](https://avatars.discourse-cdn.com/v4/letter/m/dbc845/32.png) [@melanie\_kalmar](https://forum.code.org/u/melanie_kalmar)\
**Post date:** [July 13, 2017, 5:35pm UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/2 "2017-07-13T17:35:19Z")

</div>

Hi slooowlearner -

Everything looks pretty good - though I have a comment Lesson 4:Headers

Lesson 4: Headers

\<h1\>\</h1\> -headers are used to organize the main ideas of the web  
page. They come in 6 different sizes  
from h1 the biggest to h6 the smallest. **_These are found within\<head\>_**

Actually the\<head\> is an element container for metadata (data  
about data) and is placed between the \<html\> tag and the \<body\> tag.  
HTML metadata is data about the HTML document. Metadata is not displayed. [w3schools](http://www.w3schools.com))

Anything typed in the head of the web page will not be seen by the viewer - except the \<title\> That being the title of the web page.

h1…h6 are headings that are bolded and are used in the \<body\> of the web page.

Hope this helps - w3schools is a really good resource as well.

Good Luck to you - practice as much as you can and coding web pages will become fun - I love it!

~Melanie

---

<div class="post-metadata">

**Author:** ![gtwrobel](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/gtwrobel/32/3576_2.png) [@gtwrobel](https://forum.code.org/u/gtwrobel)\
**Post date:** [July 14, 2017, 12:16am UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/3 "2017-07-14T00:16:19Z")

</div>

Hey @slooowlearner this is a pretty nifty resource. The difference between **head** , **header** , and **heading** is a bit tricky and as you note, we made a mistake when writing the curriculum. In the spirit of this document, here’s how I’d explain the difference in a kid-friendly way.

**Heading:** `<h1>`,`<h2>`,…`<h6>`, are used to make titles for different sections of your document. `<h1>` is the largest heading and `<h6>` is the smallest.

**Head:** `<head>` contains information _about_ the webpage but most of it will never be visible to someone who visits it. This information helps a computer better understand what’s in your web page and how it works.

**Header:** `<header>` contains elements that appear on the top of many pages in your site, like a site name, logo, and navigation links. _Note: This tag does exist in HTML but is not explicitly taught in CS Discoveries_

In the curriculum we made the mistake of referring to headings as “headers”. We’ve got plans in the works to fix the issue but in the meantime I just want to make sure we don’t cause more confusion.

My biggest advice would be to ignore the `<header>` tag for now. We don’t actually use it in the curriculum and you don’t need it to complete any of the projects. Kids should use the `<h1>...<h6>` tags a lot to add titles to different portions of their websites. The `<head>` tag is in every project already but kids use it relatively rarely, for example to add a title to your page, or as you’ll see in Chapter 2, to link your HTML and CSS.

Like I mentioned the mistake’s on our end for the header-vs-heading naming confusion and we’re working to fix it. In the meantime do let us know if you have more questions. Also thanks for so willingly sharing your resources!

Cheers,  
GT

---

<div class="post-metadata">

**Author:** ![lsegen](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/lsegen/32/2057_2.png) [@lsegen](https://forum.code.org/u/lsegen)\
**Post date:** [July 14, 2017, 4:11pm UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/4 "2017-07-14T16:11:52Z")

</div>

Tangentially, here’s a resources made by a HS student. She used it while teaching elementary and middle school students HTML and CSS, gradually revealing subsequent page over each session.

[http://leifsegen.com/csa/wp-content/uploads/2017/05/lctc.docx](http://leifsegen.com/csa/wp-content/uploads/2017/05/lctc.docx)

Of note is that she included tips on how to do animation with CSS.

---

<div class="post-metadata">

**Author:** ![slooowlearner](https://avatars.discourse-cdn.com/v4/letter/s/f475e1/32.png) [@slooowlearner](https://forum.code.org/u/slooowlearner)\
**Post date:** [July 14, 2017, 4:30pm UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/5 "2017-07-14T16:30:06Z")

</div>

Thank you for adding this resource. I am not yet at the point that I understand all of it, but I am hoping to get there. D, Neville

---

<div class="post-metadata">

**Author:** ![keetech](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/keetech/32/1560_2.png) [@keetech](https://forum.code.org/u/keetech)\
**Post date:** [July 15, 2017, 5:40am UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/6 "2017-07-15T05:40:34Z")

</div>

**Hello** World

---

<div class="post-metadata">

**Author:** ![gtwrobel](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/gtwrobel/32/3576_2.png) [@gtwrobel](https://forum.code.org/u/gtwrobel)\
**Post date:** [July 15, 2017, 10:50pm UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/7 "2017-07-15T22:50:49Z")

</div>

Hello @keetech this is the world do you copy? 😄

In all seriousness though welcome to the forums and if you have any questions please don’t hesitate to ask!

---

<div class="post-metadata">

**Author:** ![keetech](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/keetech/32/1560_2.png) [@keetech](https://forum.code.org/u/keetech)\
**Post date:** [July 16, 2017, 2:05am UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/8 "2017-07-16T02:05:20Z")

</div>

Hello World is a traditional first program. 😬

I wrote it in html

---

<div class="post-metadata">

**Author:** ![chadkm](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/chadkm/32/2815_2.png) [@chadkm](https://forum.code.org/u/chadkm)\
**Post date:** [August 28, 2017, 12:54am UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/9 "2017-08-28T00:54:34Z")

</div>

I wanted to add to this conversation, particularly on the `<head>` tag. It was stated that the content in the `<head>` section won’t show. I would change that to _shouldn’t_ show. However, most browsers will adapt to code mistakenly placed in the head section and process the errant code anyhow. For example:  
`

# I'm so happy to have a page
` May still show on the page as
# I'm so happy to have a page
even though the student placed the h1 tag in the head instead of the body tag.

This can be confusing to new learners. It isn’t a crisis, but when looking at student code and troubleshooting, I thought it would be good to help people be aware of this loophole in browsers.

---

<div class="post-metadata">

**Author:** ![gtwrobel](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/gtwrobel/32/3576_2.png) [@gtwrobel](https://forum.code.org/u/gtwrobel)\
**Post date:** [August 29, 2017, 7:12pm UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/10 "2017-08-29T19:12:41Z")

</div>

I’m circling back to this discussion to let you all know that based on the feedback we received here on the forum and in-person with other teachers we prioritized correcting the language in Unit 2 so that we correctly refer to h1-h6 tags as “headings”, and not “headers”. Hopefully that will help alleviate some confusion, but please keep coming here with questions and feedback.

Cheers,  
GT

---

<div class="post-metadata">

**Author:** ![mmathews](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/mmathews/32/4419_2.png) [@mmathews](https://forum.code.org/u/mmathews)\
**Post date:** [September 14, 2017, 3:19pm UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/11 "2017-09-14T15:19:45Z")

</div>

I just taught this lesson yesterday. The headings are indeed referred to as headings now.

 ![](https://us1.discourse-cdn.com/flex016/uploads/codeorgforum/original/2X/5/595702d1debf171e1c17292c12580472ac117235.png)  
Thank you.

---

<div class="post-metadata">

**Author:** ![kammie.dill](https://avatars.discourse-cdn.com/v4/letter/k/eb8c5e/32.png) [@kammie.dill](https://forum.code.org/u/kammie.dill)\
**Post date:** [March 1, 2018, 12:39pm UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/12 "2018-03-01T12:39:06Z")

</div>

What version of HTML does Web Lab use?

---

<div class="post-metadata">

**Author:** ![karenma](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/karenma/32/4924_2.png) [@karenma](https://forum.code.org/u/karenma)\
**Post date:** [March 2, 2018, 2:03am UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/13 "2018-03-02T02:03:47Z")

</div>

Not sure, I will forward this on to the team.

---

<div class="post-metadata">

**Author:** ![gtwrobel](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/gtwrobel/32/3576_2.png) [@gtwrobel](https://forum.code.org/u/gtwrobel)\
**Post date:** [March 6, 2018, 11:28pm UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/14 "2018-03-06T23:28:30Z")

</div>

Hey @kammie.dill it should be HTML5. Is there a specific tag you were hoping to use or having trouble with?

---

<div class="post-metadata">

**Author:** ![lnewson](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/lnewson/32/3061_2.png) [@lnewson](https://forum.code.org/u/lnewson)\
**Post date:** [March 9, 2018, 9:02pm UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/15 "2018-03-09T21:02:17Z")

</div>

Hello World, I will begin Unit 2 after Spring Break. I’m not too fond of presenting HTML, mainly because I need to learn it before teaching to my students. Need all the help I can get.

Linda

---

<div class="post-metadata">

**Author:** ![bradleywellsashley](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/bradleywellsashley/32/522_2.png) [@bradleywellsashley](https://forum.code.org/u/bradleywellsashley)\
**Post date:** [March 12, 2018, 2:51pm UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/16 "2018-03-12T14:51:24Z")

</div>

Dr. LNewson,

Code Studio is a good help, but I would also look at other resources to see different points of view that will help you understand and you could approach it differently for your students. Popular HTML trainers include [Dash from General Assembly](https://dash.generalassemb.ly/), [Codecademy](https://www.codecademy.com/learn/learn-html) and [Khan Academy](https://www.khanacademy.org/computing/computer-programming/html-css).

Let me know if these help!  
Brad

---

<div class="post-metadata">

**Author:** ![jold](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jold/32/5811_2.png) [@jold](https://forum.code.org/u/jold)\
**Post date:** [March 12, 2018, 7:50pm UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/17 "2018-03-12T19:50:14Z")

</div>

I think this is one of the benefits of the curriculum from [code.org](http://code.org). There is so much more student creating and working and less of the teacher presenting. Go with it, you can be the authentic lead learner!

---

<div class="post-metadata">

**Author:** ![kammie.dill](https://avatars.discourse-cdn.com/v4/letter/k/eb8c5e/32.png) [@kammie.dill](https://forum.code.org/u/kammie.dill)\
**Post date:** [March 16, 2018, 3:12pm UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/18 "2018-03-16T15:12:36Z")

</div>

Thanks! There was no specific tag that I was having trouble with. I just kept seeing the note “doesn’t work with HTML5” on the W3Schools page. I just wanted to make sure that I didn’t tell my students to try something that wasn’t going to work with the version we are using.

---

<div class="post-metadata">

**Author:** ![lnewson](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/lnewson/32/3061_2.png) [@lnewson](https://forum.code.org/u/lnewson)\
**Post date:** [March 27, 2018, 2:52pm UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/19 "2018-03-27T14:52:28Z")

</div>

Yes, it helped, thanks.  
LNewson

---

<div class="post-metadata">

**Author:** ![kpa0746](https://avatars.discourse-cdn.com/v4/letter/k/838e76/32.png) [@kpa0746](https://forum.code.org/u/kpa0746)\
**Post date:** [October 20, 2018, 9:15pm UTC](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414/20 "2018-10-20T21:15:11Z")

</div>

It helped. Great! Makes my life easier.

[Next page](https://forum.code.org/t/unit-2-html-codes-by-lesson/8414.md?page=2)
