Using HTML Tags

Question 1

Declare the document as HTML (not a tag but looks like one)

Answer 1

&lt!DOCTYPE html>

All HTML documents must start with a declaration. The declaration is not an HTML tag. It is an “information” to the browser about what document type to expect. So it doesn’t need an closing tag. The ! and uppercase DOCTYPE is important, especially for older browsers. The html is not case sensitive.

Question 2

Set the headings of an HTML page to give SEO something to pay attention to https://medium.com/swlh/html-heading-tags-best-practices-78a85f63df47

Answer 2

&lth1> &lt/h1> … &lth6>&lt/h6>

Question 3

What are 4 rules for using HTML heading numbers?

Answer 3

Don’t use h1,h2,h3 because you like the size of the font. Use CSS to change the size of the font.

Every page should only have one h1, the main subject of the content.

Higher numbers are subsections

Don’t jump from h2 to h4 as a subheading. This can confused screen readers. Go from h2 to h3.

Question 4

Define a paragraph in HTML

Answer 4

&ltp>&lt/p>

Everything with the tags is ONE paragraph.

It does some text editing. Browsers automatically add a single blank line before and after each element. They also seem to remove extra spaces. (resetting CSS style sheets does not prevent this)

Ex:

&ltp>

Ipsom etc.

Ipsom e e e

etc.

&lt/p>

Will be structured like this: “Ipsom etc. Ipsom e e e etc.”

Question 5

Add comments in HTML code

Answer 5

&lt!– Comment here –>

Question 6

Help SEO and search engines find the main content on your page

Answer 6

&ltmain> &lt/main>

&ltmain> doesn’t affect the DOM’s concept of the structure of the page. It’s strictly informative.

Question 7

What are 3 rules for the &ltmain> element?

Answer 7

1. The content inside the element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms
2. There must not be more than one element in a document.
3. The element must NOT be a descendant of other elements that give alternative semantic meaning , , , , or element.

Question 8

Add an image

Have a backup in case that image fails

When do you use a backup?

If you don’t need an alt, what should you code?

Answer 8

&ltimg src=”pic_trulli.jpg(url or file path)” alt=”Italian Trulli”>
img - self closing image element
src - for the image location source
alt - alt text

Use a backup when the image is a button or otherwise has important information for the functioning of the page. If it’s just aesthetic you don’t need alt. If the page already describes its absence, don’t use the tag.
If not needed, have it go to an empty string: alt=””

Question 9

Create a link to external web page or another location

Answer 9

&lta href=”http:\website.com”> text &lt/a>

Question 10

Describe the broad attributes of the anchor tag

Answer 10

There’s the link element HREF=”link”

And the text/image that will link to that link within the opening and closing a tags

Question 11

Create an internal link to another section of the page. For example a “Jump to bottom” link

Answer 11

The link:
(needs a #)
&lta href=”#contacts-header”>Contacts&lt/a>

The Destination:
(should not have a #)
&lth2 id=”contacts-header”>Contacts&lt/h2>

Question 12

Make an anchor tag link open in another tab

Answer 12

target=”_blank”
&lta href=”link” target=”_blank”> - works with internal links to sections on the page &lta href=”link”> - leave blank to open in same tab

Question 13

Create a dead link. A link that just links to the current page

Answer 13

&lta href=”#”>

Question 14

make an image a link to something

Answer 14

Put the image inside the anchor element

&lta href=”http://website.com”> img src=”https://www.bit.ly/fcc-relaxing-cat”> &lt/a>

Question 15

Describe the broad attributes of HTML lists

Answer 15

Ordered lists have are set with &ltol>. Because they have different symbols for each, the type of symbol is defined with ype=”1”, a, A, i, or I.
Unordered lists are set with &ltul>. They have the same symbol for each. The style is defined with CSS: style=”list-style-type:circle” or square or disc.

Question 16

Create an unordered list (a list with bullet points) What happens if you don’t include the outer tags?

Answer 16

&ltul>
&ltli> cheese &lt/li>
&ltli> milk &lt/li>
&lt/ul>

will look like:

• milk
• cheese

Without the outer tags, the list items don’t get indented and formatted

Question 17

Create an ordered list ( a list with numbers)

Answer 17

&ltol>
&ltli> cheese &lt/li>
&ltli> milk &lt/li>
&lt/ol>

will look like:

1. milk
2. cheese

Question 18

Create an ordered list with: numbers uppercase letters lowercase letters uppercase roman numerals lowercase roman numberals

Answer 18

Example: 
&ltol type="1">
 &ltli>Coffee&lt/li> 
&ltli>Tea&lt/li> 
&ltli>Milk&lt/li> 
&lt/ol> 

type=”1” The list items will be numbered with numbers (default)
type=”A” The list items will be numbered with uppercase letters
type=”a” The list items will be numbered with lowercase letters
type=”I” The list items will be numbered with uppercase roman numbers
type=”i” The list items will be numbered with lowercase roman numbers

Question 19

Create an unordered list with: open circle closed circle (usually the default) squares

Answer 19

&ltul style="list-style-type:circle">
  &ltli>Coffee&lt/li>
  &ltli>Tea&lt/li>
  &ltli>Milk&lt/li>
&lt/ul>

&ltul style="list-style-type:disc">
  &ltli>Coffee&lt/li>
  &ltli>Tea&lt/li>
  &ltli>Milk&lt/li>
&lt/ul>

&ltul style="list-style-type:square">
  &ltli>Coffee&lt/li>
  &ltli>Tea&lt/li>
  &ltli>Milk&lt/li>
&lt/ul>’