HTML Basics Flashcards

1
Q

What does HTML stand for?

A

Hyper Text Markup Language

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Is HTML a full fledged programming language?

A

No. It is a limited languge in that its used to “mark up” content for web browsers. In other words, it tells browsers what kind of data they are dealing with.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What does a11y or A11Y stand for?

A

Accessibility ( in regards to programming)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is programming with A11Y in mind?

A

Programming with the usability of different types of end users in mind ( sighted vs unsighted, etc).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What are Google Chrome Developer Tools?

A

Tools that can be used to inspect and modify the HTML on any site. See a feature on a site you like and wonder how it’s implemented? Developer Tools makes this (and much more) possible.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is an element in HTML?

A

To generalize, an HTML element usually consists of some content (could be plain text or additional HTML elements) wrapped by opening and closing tags.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is an Attribute in HTML?

A

Attributes are for setting properties on an HTML element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is an Attribute in HTML?

A

Attributes are for setting properties on an HTML element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are self-closing tags?

A

Most HTML elements require an opening/closing tag structure,

Yet, some are self-closing and do not have inner content.

ex: <img></img> element- its used to embed images in an html doc, needs no inner content or closing tag.

<p>This paragraph has an image: <img></img></p>

.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Attributes - more about

A

Some attributes, like class and id, are valid on almost any HTML element.

We present them now because they are core HTML attributes that can be used on all but a handful of elements (specifically, they can’t be used on: , , , , or ).

Other attributes are specific to a particular element. The href attribute on our anchor element above is specific to anchor elements.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Whats are HTML and CSS used for?

A

HTML is aboutstructuringcontent while CSS

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Ex: HREF coded out

A

<a>avlink</a>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

HTML attributes look like what?

A

HTML attributes consist of a name and a value enclosed in quotes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Elements- Anchors

A

<a> </a><a></a> usually some website url will be the contents

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What are Tags?

A

Used to mark of the beginning and ending to an element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Ex: Tag structure

A

Both opening and closing tags consist of angle brackets and the tag name (< … >), with closing tags distinguished by a forward slash ( …>).

17
Q

How is a closing tag coded out?

A

Closing tags are distinguished by a forward slash ( …>).

18
Q

How is an opening tag coded out?

A

(< … >)

19
Q

What does an full open/close tag sequence look like>?

A

()()

20
Q

What is the <img></img> element used for?

A

To embed images in an HTML document.It has no inner content and doesn’t require a closing tag

21
Q

HTML vs. CSS

A

HTML tells the browserwhatcontent to represent, while CSS tells the browserhowthat content should appear.

22
Q

What is “commenting out code”?

A

Developers commonly need to add what are called comments to code.

A code comment is a line of text that is used to document some feature or oddity of a given piece of code for fellow project collaborators.
ex:

Commenting out code is also common way of temporarily disabling code, often times for the purpose of debugging.

23
Q

Shortcut for commenting code in your codebody

A

Shortcuts:

Windows: Ctrl + /
Mac: Mac Square symbol + /

24
Q

Ex: Commenting Code structure

A
25
Q

Can an element be placed inside of line of commented code?

A

Yes. If an element that is placed inside the line of commented code, that element will not be rendered on the page

ex:

<p>This is a normal paragraph</p>

The second paragraph element will not render.

26
Q

What is Semantic HTML?

A

when you’re choosing an HTML element to wrap content, you should choose the one that most clearly aligns with the meaning of your content.

27
Q

What is Semantic HTML?

A

Semantic HTML is a principle that says when you’re choosing an HTML element to wrap content, you should choose the one that most clearly aligns with the meaning of your content.

28
Q

Why is semantic HTML so important?

A

Semantic HTML is always preferable because the names of the HTML elements we choose help browsers, web-crawlers, screen readers, and project collaborators to better understand our content.

29
Q

If you wanted to denote a list on your webpage and using the principle of Semantic HTML, which element would be best for use:

A. <ul>
B. <div>
C. <p></p></div></ul>

A

Answer:

A.<ul> unordered list.

This element most closely resembles the content we want on the page which is a list. </ul>

30
Q

Can <div> be used as a catchall element instead of using the closest semantic element in my HTML coding?</div>

A

Technically, yes,<div> can be used.

However it is always best to use Semantic HTML because it is the easiest to delineate. Code that is composed entirely of <div> code snippets is less obvious and thereby can be harder to read and interpreted by browsers, web crawlers, screen readers and project collaborators.

EX: HTML code using <div> to direct page structure:

    <div class="paragraph">These are a few of my favorite things:</div>
    <div class="unordered-list">
      <div class="list-item">pizza</div>
      <div class="list-item">cats

vs. HTML code using Semantic HTML :

<p>These are a few of my favorite things:</p>
<ul>
  <li>pizza</li>
  <li>cats</li>
  <li>coding</li>
  <li>chocolate</li>
  <li>coffee</li>
</ul>

Both work, but Semantic HTML is always better to use.</div></div></div></div></div>

31
Q

Basic HTML Elements I should know

A

<div>

<p>
</p><ul>

<a></a></ul></div>

32
Q

Resource: List of all HTML elements

A

https: //developer.mozilla.org/en-US/docs/Web/HTML/Element
tiny: https://tinyurl.com/mozhtmlelementslist

33
Q

Resource: How the Web Works

A

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works

34
Q

Resource: How the Web Works in One Easy Lesson

A

http://mkcohen.com/how-the-web-works-in-one-easy-lesson

35
Q

Practice Resource:Intro & Semantic HTML

A

“Getting to Know HTML”

https://learn.shayhowe.com/html-css/getting-to-know-html/