HTML5 Flashcards

1
Q

Explain HTML

A

Hypertext Markup Language

defines the structure and layout of content on web pages

uses a system of elements and tags

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

HTML vs XHTML

A

XHTML (Extensible Hypertext Markup Language) is a stricter, more XML-compliant version of HTML.

It requires well-formed and properly nested code, and tag names must be in lowercase.

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

Explain DOCTYPE

A

placed at the beginning of an HTML doc

specifies the HTML version being used

helps browsers render web pages correctly

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

Explain some new features of HTML5

A

*new semantic elements - header, nav, article
* new form elements
*native audio/video support
* canvas for drawing graphics
*improved offline support

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

<div> vs <span>
</span></div>

A

div
*block element used for grouping and structuring content

span
* inline element used for styling or applying scripts to a specific portion of text

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

Explain <meta></meta>

A

placed in the <head> section, it provides metadata about an HTML doc
*character set
*viewport settings
*description

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

Difference between <ol>, <ul>, and <dl>

A

*<ol> is used for ordered (numbered) lists.
*<ul> is used for unordered (bullet-point) lists.
*<dl> is used for definition lists, typically consisting of terms and their definitions.

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

Explain <a></a>

A

anchor tag used to create hyperlinks to:
* another webpage
*a file
*an email address
*any other URL

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

How do you open a link in a new tab or window?

A

Use the target=’_blank’ attribute within the <a> tag</a>

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

How do you create a link that starts a new email?

A

Use the href=’mailto:<address@email.com’> attribute in the <a> tag</a>

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

<strong> vs <em></em></strong>

A

<strong> = bold
<em> = italicized</em></strong>

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

Explain <iframe>

A

*iniline frame
*used to embed another HTML doc within the current doc
*typically used with videos, maps, or external content

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

Explain <form>

A

creates an HTML form that collects user input

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

<input></input> vs <input></input>

A

<input></input>
used for regular text input

<input></input>
used for input fields where the text is obscured (e.g., for passwords)

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

Purpose of <label> element in relation to <form></label>

A

Associates a text label with a form control

*improves accessibility
*allows users to click the label to focus on or activate the associated control

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

How do you disable a form element?

A

add the disabled attribute to the element tag

17
Q

Explain <select> and <option></option></select>

A

<select> creates a dropdown list</select>

<option> defines the options within the dropdown list</option>

18
Q

How do you include external stylesheets in an HTML doc?

A

use <link></link> tag within the <head> section

<head>
<link></link>
</head>

19
Q

How do you store custom data private to a page or application?

A

data- attribute
*embeds the custom data on HTML

<div></div>

20
Q

Explain HTML semantic elements

A

Convey the meaning of their content to both browsers and developers

<header>
<nav>
<article>
<section>
<footer>
</footer></section></article></nav></header>

21
Q

How do you make content editable?

A

Use the contenteditable attribute on the given element tag

22
Q

How to create responsive web design using HTML and CSS?

A

Use media queries in CSS to apply different styles based on the device’s characteristics (such as screen width).

Additionally, use flexible HTML layout techniques like fluid grids and flexible images.

23
Q

Explain <template></template>

A

Used to hold client-side content that should not be rendered when the page loads.

It provides a way to define reusable content that can be cloned and inserted into the DOM using JavaScript.

24
Q
A