Kai-Luen Liang

Question 1

h2 element

Answer 1

used as a headline element

Question 2

p element

Answer 2

paragraph element: used to write some text, information

Question 3

comments in HTML

Question 4

basic HTML elements: name some

Answer 4

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

Question 5

main tag

Answer 5

The main HTML5 tag helps search engines and other developers find the main content of your page.

Question 6

How do you add an image

Answer 6

like this:

<img></img>

Question 7

anchor <a></a>

Answer 7

<a>this links to freecodecamp.org</a>

Question 8

internal links

Answer 8

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.

<a>Contacts</a>
…

<h2>Contacts</h2>

Question 9

href=”#”

Answer 9

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 10

whats happening here?

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

Answer 10

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>

targe tis 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> … </a>

The text, “link to freecodecamp.org”, within the anchor element called anchor text, will display a link to click:
<a>link to freecodecamp.org</a>

Question 11

Turn an Image into a Link

Answer 11

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 12

a unordered bullet list

Answer 12

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

Question 13

Create a Text Field

Answer 13

Create a Text Field

input could be classified as a generic tag: indeed it is characterized by its attribute type, which can assume a range of different values and based on that value then input will be rendered as a different object.

A few example of different type values:

type value	code
text	
checkbox	
radio	
button	
…

Question 14

radio buttons

Answer 14

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 child input element

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.

Question 15

checkboxes:

Answer 15

label for …..input id= type= name=

Loving
Forms commonly use checkboxesfor questions that may have more than one answer.

Checkboxes are a type of input

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

All related checkbox inputs should have the same nameattribute.

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 lab elelement to match the id attribute of the associated input element.

Here’s an example of a checkbox:

Loving

Question 16

radio buttons, checkboxes, checked by default mode

Answer 16

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

Question 17

<div> </div>

Answer 17

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.

Question 18

declare

Answer 18

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 DOCTYPEis important, especially for older browsers. The htmlis not case sensitive.

Next, the rest of your HTML code needs to be wrapped in htmltags. The opening goes directly below the line, and the closing goes at the end of the page.

Here’s an example of the page structure:

Question 19

Define the Head and Body of an HTML Document

Answer 19

You can add another level of organization in your HTML document within the htmltags with the headand bodyelements. Any markup with information about your page would go into the headtag. Then any markup with the content of the page (what displays for a user) would go into the bodytag.

Metadata elements, such as link, meta, title, and style, typically go inside the headelement.

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