HTML5

Question 1

Say Hello to HTML Elements

Answer 1

<h1>Hello</h1>

-> That’s an HTML element (An HTML element is written using a start tag and an end tag, and with the content in between).

Most HTML elements have an opening tag and a closing tag.
Opening tags look like this:

<h1>

Closing tags look like this:

</h1>

The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.

Question 2

Headline with the h2 Element

Answer 2

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, while h2 elements are generally used for subheadings. There are also h3, h4, h5 and h6 elements to indicate different levels of subheadings.

It is not recommended that you use headings just to make the text big or bold, because search engines use headings to index the web page structure and content.

Question 3

Inform with the Paragraph Element

Answer 3

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>

Browsers automatically add an empty line before and after a paragraph.

Note: As a convention, all HTML tags are written in lowercase, for example <p></p> and not <p></p>.

Question 4

Fill in the Blank with Placeholder Text

Answer 4

Web developers traditionally use lorem ipsum text as placeholder text. The lorem ipsum text is randomly scraped from a famous passage by Cicero of Ancient Rome.

Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.

Question 5

Comment out/Uncomment HTML

Answer 5

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 start with

Question 6

Introduction to HTML5 Elements

Answer 6

HTML5 introduces more descriptive HTML tags. These include main, header, footer, nav, video, article, section and others.

These tags give a descriptive structure to your HTML, make your HTML easier to read, and 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.

Example usage, a main element with two child elements nested inside it:

<h1>Hello World</h1>

<p>Hello Paragraph</p>

Forms

• The Web Forms 2.0 specification allows for creation of more powerful forms and more compelling user experiences.
• Date pickers, color pickers, and numeric stepper controls have been added.
• Input field types now include email, search, and URL.
• PUT and DELETE form methods are now supported.

Integrated API (Application Programming Interfaces)

• Drag and Drop
• Audio and Video
• Offline Web Applications
• History
• Local Storage
• Geolocation
• Web Messaging

Question 7

Add Images to Your Website

Answer 7

You can add images to your website by using the img element, and point to a specific image’s URL (“uniform resource locators”) using the src attribute.

An example of this would be:

<img></img>

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></img>

Loading images takes time. Using large images can slow down your page, so use them with care.

By default, the <img></img> element uses the inherit dimensions of its image file.

The width attribute sets an explicit dimension for the image. There’s a corresponding height attribute, as well. Setting only one of them will cause the image to scale proportionally, while defining both will stretch the image. Dimension values are specified in pixels, and you should never include a unit (e.g., width=’75px’ would be incorrect).

The width and height attributes can be useful, but it’s usually better to set image dimensions with CSS so you can alter them with media queries.

Question 8

Link to External Pages with Anchor Elements

Answer 8

You can use a (anchor) elements to link to content outside of your web page.

a elements need a destination web address called an href attribute*. They also need anchor text. Here’s an example:

<a>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.

Note: Links can be either absolute or relative.

• In the same way that an element adds meaning to the content it contains, an HTML “attribute” adds meaning to the element it’s attached to.
  The “value” of the attribute in either single or double quotation marks.

Question 9

Link to Internal Sections of a Page with Anchor Elements

Answer 9

a (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.

Below is an example of an internal anchor link and its target element:

<a>Contacts</a>
…

<h2>Contacts</h2>

When users click the Contacts link, they’ll be taken to the section of the webpage with the Contacts header element.

Note: the target=”_blank” attribute in the anchor tag causes the linked document to open in a new window tab. A visited link is underlined and purple.
By default, most browsers replace the current page with the new one.

Question 10

Nest an Anchor Element within a Paragraph

Answer 10

You can nest links within other text elements.

<p>
Here's a <a> link to www.freecodecamp.org</a> for you to follow.
</p>

Let’s break down the example. Normal text is wrapped in the p element:

<p> Here's a ... for you to follow. </p>

Next is 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. The value _blank specifies to open the link in a new tab. The href is an anchor tag attribute that contains the URL address of the link:

<a> … </a>

The text, link to www.freecodecamp.org, within the a element is called anchor text, and will display the link to click:

<a>link to freecodecamp.org</a>

The final output of the example will look like this:

Here’s a link to www.freecodecamp.org for you to follow.

Question 11

Make Dead Links Using the Hash Symbol

Answer 11

Sometimes you want to add a elements to your website before you know where they will link.

This is also handy when you’re changing the behavior of a link using JavaScript, which we’ll learn about later.

Question 12

Turn an Image into a Link

Answer 12

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><img></img></a>

Remember to use # as your a element’s href property in order to turn it into a dead link.

Question 13

Create a Bulleted Unordered List

Answer 13

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 </li></ul>.

For example:

<ul><li>milk</li><li>cheese</li></ul>

would create a bullet point style list of milk and cheese.

The HTML specification defines strict rules about what elements can go inside other elements. In this case, <ul> elements should only contain <li> elements, which means you should never ever write something like this:

<ul><p>Add a "ul" element (it stands for unordered list)</p> </ul>

Instead, you should wrap that paragraph with </li><li> tags:

<ul><li><p>Add a "ul" element (it stands for unordered list)</p></li></ul>

</li></ul>

Question 14

Create an Ordered List

Answer 14

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 are closed with the </li></ol> tag.

For example:

<ol><li>Garfield</li><li>Sylvester</li></ol>

would create a numbered list of Garfield and Sylvester.

Step-by-step procedures like recipes, instructions, and even tables of contents are good candidates for ordered lists, while <ul> lists are better for representing item inventories, product features, pro/con comparisons, and navigational menus.</ul>

Question 15

Create a Text Field

Answer 15

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:

Note that input elements are self-closing.

Question 16

Add Placeholder Text to a Text Field

Answer 16

Placeholder text is what is displayed in your input element before your user has inputted anything.

You can create placeholder text like so:

Note: Remember that input elements are self-closing.

Question 17

Create a Form Element

Answer 17

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 attribute on your form element.

For example:

The method attribute specifies the HTTP method (GET or POST) to be used when forms are submitted (see below for description):

When you use GET, the form data will be visible in the page address.

Use POST if the form is updating data, or includes sensitive information (passwords).
POST offers better security because the submitted data is not visible in the page address.

To take in user input, you need the corresponding form elements, such as text fields. The element has many variations, depending on the type attribute. It can be a text, password, radio, URL, submit, etc.

The example below shows a form requesting a username and password:

<br></br>

The name attribute specifies a name for a form.

After the form is submitted, the data should be processed on the server using a programming language, such as PHP.

Question 18

Add a Submit Button to a Form

Answer 18

Let’s add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form’s action attribute.

Here’s an example submit button:

this button submits the form

Question 19

Use HTML5 to Require a Field

Answer 19

You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.

For example, if you wanted to make a text input field required, you can just add the attribute required within your input element, like this:

Question 20

Create a Set of Radio Buttons

Answer 20

You can use radio buttons for questions where you want the user to only give you one answer out of multiple options.

Radio buttons are a type of input.

Each of your radio buttons can be nested within its own label element. By wrapping an input element inside of a label element it will automatically associate the radio button input with the label element surrounding it.

All related radio buttons should have the same name attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.

Here’s an example of a radio button:

Indoor

It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the related input element. For example:

Indoor

We can also nest the input element within the label tags:

Indoor

Question 21

Create a Set of Checkboxes

Answer 21

Forms commonly use checkboxes for questions that may have more than one answer.

Checkboxes are a type of input.

Each of your checkboxes can be nested within its own label element. By wrapping an input element inside of a label element it will automatically associate the checkbox input with the label element surrounding it.

All related checkbox inputs should have the same name attribute.

It is considered best practice to explicitly define the relationship between a checkbox input and its corresponding label by setting the for attribute on the label element to match the id attribute of the associated input element.

Here’s an example of a checkbox:

Loving

Question 22

Use the value attribute with Radio Buttons and Checkboxes

Answer 22

When a form gets submitted, the data is sent to the server and includes entries for the options selected. Inputs of type radio and checkbox report their values from the value attribute.

For example:

Indoor

Outdoor

Here, you have two radio inputs. When the user submits the form with the indoor option selected, the form data will include the line: indoor-outdoor=indoor. This is from the name and value attributes of the “indoor” input.

If you omit the value attribute, the submitted form data uses the default value, which is on. In this scenario, if the user clicked the “indoor” option and submitted the form, the resulting form data would be indoor-outdoor=on, which is not useful. So the value attribute needs to be set to something to identify the option.

Question 23

Check Radio Buttons and Checkboxes by Default

Answer 23

You can set a checkbox or radio button to be checked by default using the checked attribute.

To do this, just add the word checked to the inside of an input element. For example:

Question 24

Nest Many Elements within a Single div Element

Answer 24

The div element, also known as a division element, is a general purpose container for other elements.

The div element is probably the most commonly used HTML element of all.

Just like any other non-self-closing element, you can open a div element with <div> and close it on another line with </div>.

Question 25

Declare the Doctype of an HTML Document

Answer 25

The challenges so far have covered specific HTML elements and their uses. However, there are a few elements that give overall structure to your page, and should be included in every HTML document.

At the top of your document, you need to tell the browser which version of HTML your page is using. HTML is an evolving language, and is updated regularly. Most major browsers support the latest specification, which is HTML5. However, older web pages may use previous versions of the language.

You tell the browser this information by adding the tag on the first line, where the … part is the version of HTML. For HTML5, you use .

The ! and uppercase DOCTYPE is important, especially for older browsers. The html is not case sensitive.

Next, the rest of your HTML code needs to be wrapped in html tags. The opening goes directly below the line, and the closing goes at the end of the page, wrapping up everything else.

Here’s an example of the page structure. Your HTML code would go in the space between the two html tags.

Note: Everything in an HTML document is surrounded by the tag.

The character encoding (charset) declaration is also simplified:

Note: The default character encoding in HTML5 is UTF-8.

Question 26

Define the Head and Body of an HTML Document

Answer 26

You can add another level of organization in your HTML document within the html tags with the head and body elements. Any markup with information about your page would go into the head tag. Then any markup with the content of the page (what displays for a user) would go into the body tag.

The body tag follows the head tag.
All visual-structural elements are contained within the body tag.
Headings, paragraphs, lists, quotes, images, and links are just a few of the elements that can be contained within the body tag.

Metadata elements, such as link, meta, title, and style, typically go inside the head element (contains all of the non-visual elements that help make the page work.).

(max. 160 characters including spaces)

(keywords for search engines)

Here’s an example of a page’s layout:

HTML file names should end in either .html or .htm.

index. html name of the html file of default, indicates the homepage.
style. css frequent name of css file, others: main.css, general.css, default.css, index.css…

Question 27

Welcome to HTML!

Answer 27

HTML stands for HyperText Markup Language.

Unlike a scripting or programming language that uses scripts to perform functions, a markup language uses tags to identify content.

Question 28

The Tag

Answer 28

To place a title on the tab describing the web page, add a element to your head section:

first page

This is a line of text.

The title element is important because it describes the page and is used by search engines, in fact, browsers display this in the tab for your page, and Google displays it in search engine results.