HTML Basics Flashcards Preview

TL2 - Intro to HTML > HTML Basics > Flashcards

Flashcards in HTML Basics Deck (35):
1

What does HTML stand for?

Hyper Text Markup Language

2

Is HTML a full fledged programming language?

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.

3

What does a11y or A11Y stand for?

Accessibility ( in regards to programming)

4

What is programming with A11Y in mind?

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

5

What are Google Chrome Developer Tools?

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.

6

What is an element in HTML?

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

7

What is an Attribute in HTML?

Attributes are for setting properties on an HTML element

8

What is an Attribute in HTML?

Attributes are for setting properties on an HTML element

9

What are self-closing tags?

Most HTML elements require an opening/closing tag structure,

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

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

This paragraph has an image:

.

10

Attributes - more about

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.

11

Whats are HTML and CSS used for?

HTML is about structuring content while CSS

12

Ex: HREF coded out

13

HTML attributes look like what?

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

14

Elements- Anchors

usually some website url will be the contents

15

What are Tags?

Used to mark of the beginning and ending to an element

16

Ex: Tag structure

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

17

How is a closing tag coded out?

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

18

How is an opening tag coded out?

(< ... >)

19

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

()()

20

What is the element used for?

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

21

HTML vs. CSS

HTML tells the browser what content to represent, while CSS tells the browser how that content should appear.

22

What is "commenting out code"?


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

Shortcut for commenting code in your codebody

Shortcuts:

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

24

Ex: Commenting Code structure

25

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

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

ex:

This is a normal paragraph




The second paragraph element will not render.

26

What is Semantic HTML?

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

What is Semantic HTML?

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

Why is semantic HTML so important?

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

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.

    B.

    C.

Answer:

A.
    unordered list.

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

30

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

Technically, yes,
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
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
to direct page structure:



These are a few of my favorite things:


pizza

cats

vs. HTML code using Semantic HTML :

These are a few of my favorite things:



  • pizza

  • cats

  • coding

  • chocolate

  • coffee



Both work, but Semantic HTML is always better to use.

31

Basic HTML Elements I should know









32

Resource: List of all HTML elements

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

tiny: https://tinyurl.com/mozhtmlelementslist

33

Resource: How the Web Works

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

34

Resource: How the Web Works in One Easy Lesson

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

35

Practice Resource:Intro & Semantic HTML

"Getting to Know HTML"

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