HTML & HTML5

Headline with the h2 Element

The *h2 element* you will be adding in this step will add a *level two heading* to the web page. This element tells the browser about the *structure* of your website. *h1 elements* are often used for *main headings*, *h2 elements* are generally used for *subheadings*. There are also *h3, h4, h5 and h6 elements* to indicate different levels of *subheadings*. Add an *h2 tag* that says "CatPhotoApp" to create a second HTML element below your "Hello World" h1 element. 1. <h1>Hello World</h1> 2. *<h2>CatPhotoApp</h2>*

Fill in the Blank with Placeholder Text

Web developers use *lorem ipsum text* as placeholder text. The 'lorem ipsum' text is randomly scraped from a famous passage by Cicero of Ancient Rome. Since we're building a CatPhotoApp, let's use something called *kitty ipsum text*. Replace the text inside your *p element* with the first few words of this *kitty ipsum text*: Kitty ipsum dolor sit amet 1. <h1>Hello World</h1> 2. 3. <h2>CatPhotoApp</h2> 4. 5. *<p>Kitty ipsum dolor</p>*

Link to Internal Sections of a Page with Anchor Elements

*Anchor elements* can also be used to create *internal links* to jump to different sections within a webpage. To create an *internal link*, you assign a link's *href* attribute to a hash symbol *#* plus the value of the *id* attribute for the element that you want to *internally link* to, usually further down the page. You then need to add the *same id attribute* to the element you are linking to. An *id is an attribute* that uniquely describes an element. An example of an *internal anchor* link and its target element: *<a href="#contacts-header">Contacts</a>* ... <*h2 id="contacts-header">Contacts</h2>* When users click the Contacts link, they'll be taken to the section of the webpage with the Contacts header element. Change your *external link* to an *internal link* by changing the *href attribute* to *"#footer"* and the text from *"cat photos"* to *"Jump to Bottom".* Remove the *target="_blank"* attribute from the anchor tag since this causes the linked document to open in a new window tab. Then add an *id attribute* with a value of *"footer"* to the *<footer> element* at the bottom of the page. *BEFORE* 1. <h2>CatPhotoApp</h2> 2. <main> 3. 4. *<a href="http://freecatphotoapp.com" target="_blank">cat photos</a>* 5. 6. <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> 7. 8. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere.</p> 9. <p>Purr jump eat the grass rip the couch.</p> 10. <p>Meowwww loved it.</p> 11. <p>Intently stare at the same spot poop.</p> 12. 13. </main> 14. 15. *<footer>Copyright Cat Photo App</footer>* *AFTER* 1. <h2>CatPhotoApp</h2> 2. <main> 3. 4. *<a href="#footer">Jump to Bottom</a>* 5. 6. <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> 7. 8. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere.</p> 9. <p>Purr jump eat the grass rip the couch.</p> 10. <p>Meowwww loved it.</p> 11. <p>Intently stare at the same spot poop.</p> 12. 13. </main> 14. 15. *<footer id="footer">Copyright Cat Photo App</footer>*

Uncomment HTML

*Commenting* is a way that you can leave comments for other developers within your code *without affecting* the resulting output that is displayed to the end user. Commenting is also a convenient way to make code inactive without having to delete it entirely. Comments in HTML starts with *<!--, and ends with a -->* Uncomment your *h1, h2* and *p elements*. ​ *WITH COMMENT* 1. *<!--* 2. <h1>Hello World</h1> 3. 4. <h2>CatPhotoApp</h2> 5. 6. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> 7. *-->* *WITHOUT COMMENT* *1.* 2. <h1>Hello World</h1> 3. 4. <h2>CatPhotoApp</h2> 5. 6. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> *7.* *UNCOMMENTING the elements will allow them to show to the ending viewer.*

Introduction to HTML5 Elements

*HTML5* introduces more descriptive HTML tags. These include *header, footer, nav, video, article, section* and others. These tags make your HTML easier to read, and also help with Search Engine Optimization *(SEO)* and accessibility. The *main* HTML5 tag helps search engines and other developers find the main content of your page. Create a second *p element* after the existing p element with the following kitty ipsum text: Purr jump eat the grass *Before adding the MAIN element* 1. <h2>CatPhotoApp</h2> 2. 3. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> *After adding the MAIN element* 1. <h2>CatPhotoApp</h2> 2. *<main>* 3. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles 5. chase the red dot, hairball run catnip eat the grass sniff.</p> 4. <p>Purr jump eat the grass rip the couch scratched sunbathe</p> 5. *</main>* *Notice that when you WRAP the two p's with the MAIN element it is on a another line, not included the p elements.* The second p doesnt ​need a 2 as well.

Add Placeholder Text to a Text Field

*Placeholder text* is what is displayed in your *input element before* your user has inputted anything. You can create placeholder text like so: *<input type="text" placeholder="this is placeholder text">* Set the *placeholder* value of your *text input* to "cat photo URL". 1. <h2>CatPhotoApp</h2> 2. <main> 3. <p>Click here to view more <a href="#">cat photos</a>.</p> 4. 5. <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a> 6. 7. <p>Things cats love:</p> 8. <ul> 9. <li>cat nip</li> 10. <li>laser pointers</li> 11. <li>lasagna</li> 12. </ul> 13. <p>Top 3 things cats hate:</p> 14. <ol> 15. <li>flea treatment</li> 16. <li>thunder</li> 17. <li>other cats</li> 18. </ol> 19. *<input type="text" placeholder="cat photo url">* 20. </main>

Inform with the Paragraph Element

*p elements* are the preferred element for *paragraph text* on websites. p is short for "paragraph". You can create a paragraph element like this: <p>I'm a p tag!</p> Create a *p element* below your h2 element, and give it the text "Hello Paragraph". 1. <h1>Hello World</h1> 2. <h2>CatPhotoApp</h2> 3. *<p>Hello Paragraph</p>*

Create a Bulleted Unordered List

HTML has a special element for creating *unordered lists,* or bullet point style lists. *Unordered lists* start with an opening *<ul> element*, followed by any *number* of *<li> elements*. Finally, unordered lists close with a *</ul>* For example: *<ul> <li>milk</li> <li>cheese</li> </ul>* would create a bullet point style list of "milk" and "cheese". Remove the last two *p elements* and create an *unordered list* of three things that cats love at the bottom of the page. 1. <h2>CatPhotoApp</h2> 2. <main> 3. <p>Click here to view more <a href="#">cat photos</a>.</p> 4. 5. <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a> 6. 7. *<ul>* 8. *<li>Milk</li>* 9. *<li>Love</li>* 10. *<li>String</li>* 11. *</ul>* 12. </main>

Create an Ordered List

HTML has another special element for creating *ordered lists*, or numbered lists. *Ordered lists* start with an opening *<ol> element*, followed by any *number of <li>* elements. Finally, ordered lists close with a *</ol>* For example: *<ol> <li>Garfield</li> <li>Sylvester</li> </ol>* would create a numbered list of "Garfield" and "Sylvester". Create an ordered list of the top 3 things cats hate the most. 1. <h2>CatPhotoApp</h2> 2. <main> 3. <p>Click here to view more <a href="#">cat photos</a>.</p> 4. 5. <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a> 6. 7. *<ul>* 8. *<li>Milk</li>* 9. *<li>Love</li>* 10. *<li>String</li>* 11. *</ul>* <ol> <li>people</li> <li>dogs</li> <li>water</li> </ol> </main>

HTML Elements

Most HTML elements have an opening tag and a closing tag. Opening tags look like this: *<h1>* Closing tags look like this: *</h1>* A *ELEMENT*..*>*... <h>Hello World</h>

Create a Text Field

Now let's create a *web form*. *Input elements* are a convenient way to get input from your user. You can create a *text input* like this: *<input type="text">* Note that input elements are self-closing. Create an input element of type text below your lists. 1. <h2>CatPhotoApp</h2> 2. <main> 3. <p>Click here to view more <a href="#">cat photos</a>.</p> 4. 5. <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a> 6. 7. <p>Things cats love:</p> 8. <ul> 9. <li>cat nip</li> 10. <li>laser pointers</li> 11. <li>lasagna</li> 12. </ul> 13. <p>Top 3 things cats hate:</p> 14. <ol> 15. <li>flea treatment</li> 16. <li>thunder</li> 17. <li>other cats</li> 18. </ol> 19. *<input type="text">* 20. </main>

Delete HTML Elements

Our phone doesn't have much vertical space. Remove the unnecessary elements so we can start building our CatPhotoApp. Delete your *h1 element* so we can simplify our view. *Before​* 1. *<h1>Hello World</h1>* 2. <h2>CatPhotoApp</h2> 3. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> *After* 1. 2. <h2>CatPhotoApp</h2> 3. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

Comment out HTML

Remember that in order to *start a comment*, you need to use *<!--* and to end a comment, you need to use *-->* Here you'll need to *end* the comment before your *h2* element begins. Comment out your *h1 element* and your *p element*, but not your h2 element. *Before you LEAVE h2 OUT of the comment* 1. *<!-- 2. <h1>Hello World</h1> 3. 4. <h2>CatPhotoApp</h2> 5. 6. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> 7. -->* *Because the COMMENTS START BEFORE h1 and ends after it and STARTS BEFORE p and ends, h1 and p do not show on the page* *With only h1 and p commented out* 1. <!-- 2. <h1>Hello World</h1> 3. --> 4. *<h2>CatPhotoApp</h2>* 5. <!-- 6. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> 7. --> *Now only h2 SHOWS on the page.* Notice that h2 is a subtittl​e.

Make Dead Links Using the Hash Symbol

Sometimes you want to add *a elements* to your website *before* you know where they will link. The current value of the *href* attribute is a link that points to *"http://freecatphotoapp.com"*. Replace the href attribute value with a *#*, also known as a hash symbol, to create a *dead link*. For example: *href="#"* *BEFORE* 1. <h2>CatPhotoApp</h2> 2. <main> 3. <p>Click here to view more <a *href="http://freecatphotoapp.com"* target="_blank">cat photos</a>.</p> 4. 5. <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> 6. 7. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> 8. <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p> 9. </main> *AFTER* 1. <h2>CatPhotoApp</h2> 2. <main> 3. <p>Click here to view more <a *href="#"* target="_blank">cat photos</a>.</p> 4. 5. <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> 6. 7. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> 8. <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p> 9. </main>

Nest an Anchor Element within a Paragraph

You can *nest links* within other *text elements*. <p> Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow. </p> Break down the example: Normal text is wrapped in the *p element*: *<p> Here's a ... for you to follow. </p>* The anchor element *<a>* (which requires a closing tag </a>): *<a> ... </a>* *target* is an anchor tag attribute that specifies *where* to open the link and the value *"_blank"* specifies to open the link in a new tab *href* is an anchor tag attribute that contains the URL address of the link: *<a href="http://freecodecamp.org"> ... </a>* The text, *"link to freecodecamp.org"*, within the anchor element called *anchor text*, will display a link to click: *<a href=" ... ">link to freecodecamp.org</a>* The final output of the example will look like this: Here's a link to *freecodecamp.org* for you to follow. Now *nest* your existing *a element* within a new *p element* (just after the existing main element). The new paragraph should have text that says *"View more cat photos"*, where *"cat photos*" is a *link*, and the rest of the text is plain text. *BEFORE* 1. <h2>CatPhotoApp</h2> 2. <main> 3. 4. <a href="http://freecatphotoapp.com" target="_blank">cat photos</a> 5. ********* 6. <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> 7. 8. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> 9. <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p> 10. </main> *AFTER* 1. <h2>CatPhotoApp</h2> 2. <main> 3. 4. <a href="http://freecatphotoapp.com" target="_blank">cat photos</a> 5. *<p>View more<a target="_blank" href="http://freecatphotoapp.com"> cat photos</a> for you to follow.</p>* 6. <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> 7. 8. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> 9. <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p> 10. </main>

Add Images to Your Website

You can add images to your website by using the *img element*, and point to a specific image's *URL* using the *src attribute*. Example: *<img src="https://www.your-image-source.com/your-image.jpg">* Note that *img elements* are *self-closing*. All *img elements* must have an *alt* attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load. Note: If the image is purely decorative, using an empty alt attribute is a best practice. Ideally the alt attribute should not contain special characters unless needed. Let's add an alt attribute to our *img* example above: <img src="https://www.your-image-source.com/your-image.jpg" *alt="Author standing on a beach with two thumbs up."*> Let's try to add an image to our website: Insert an *img tag*, before the *h2 element*. Now set the *src* attribute so that it points to this url: https://bit.ly/fcc-relaxing-cat Dont ​​forget to give your image an *alt* text. 1. *<img src="https://bit.ly/fcc-relaxing-cat" alt="Relaxing Cat">* 2. <h2>CatPhotoApp</h2> 3. <main> 4. 5. 6. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> 7. <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p> 8. </main>

Create a Form Element

You can build web forms that actually *submit data* to a server using nothing more than pure HTML. You can do this by *specifying an action* on your *form element*. For example: *<form action="/url-where-you-want-to-submit-form-data"></form>* Nest your text field inside a form element, and add the action="/submit-cat-photo" attribute to the form element.

Turn an Image into a Link

You can make elements into *links* by *nesting* them within an *a element*. *Nest* your *image* within an *a element*. Here's an example: *<a href="#">*<img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera.">*</a>* Remember to use *#* as your *a element's href* property in order to turn it into a *dead link*. Place the existing *image element* within an *anchor element*. Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link. *BEFORE* 1. <h2>CatPhotoApp</h2> 2. <main> 3. <p>Click here to view more <a href="#">cat photos</a>.</p> 4. 5. *<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">* 6. 7. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> 8. <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p> 9. </main> *AFTER* 1. <h2>CatPhotoApp</h2> 2. <main> 3. <p>Click here to view more <a href="#">cat photos</a>.</p> 4. 5. <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> 6. *<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>* 7. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> 8. <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p> 9. </main>

Link to External Pages with Anchor Elements

You can use *anchor elements* to link to content *outside* of your web page. anchor elements need a destination *web address* called an *href attribute*. They also need anchor text. Here's an example: *<a href="https://freecodecamp.org">this links to freecodecamp.org</a>* Then your browser will display the text "this links to freecodecamp.org" as a link you can click. And that link will take you to the web address https://www.freecodecamp.org. Create an *a element* that links to http://freecatphotoapp.com and has "cat photos" as its *anchor text*. 1. <h2>CatPhotoApp</h2> 2. <main> 3. *<a href="http://freecatphotoapp.com">cat photos</a>* 4. 5. 6. <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> 7. 8. <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> 9. <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p> 10. </main>