HTML/CSS Flashcards
To better learn the terminology of HTML and CSS
An individual component of an HTML document or web page
Element
Piece of HTML code that specifies the creation of an element. All elements have at least one of these, and many have a second one as well. (Begins with a less-than symbol and ends with a greater-than symbol)
Tag
A modifier of an HTML element type. It either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them.
Attribute
Hypertext Markup Language. A standardized system for tagging text files to put content onto a web page.
HTML
An instruction to the web browser about what version of HTML the page is written in. Must be the very first thing on the HTML page.
DOCTYPE
An HTML attribute used to identify a specific element in the document. Should be unique - no other element in the document should have the same one of these, and any element should only have one of these.
id
An HTML attribute that specifies one or more names for an element. Does not need to be unique - many elements can have the same one of these and any given element can have many of these. Most commonly used in conjunction with a CSS stylesheet for applying styles to elements.
class
HTML attribute that specifies the source the element should look to. Used in script and img tags.
src
HTML attribute that specifies the hyperlink reference the element should look to. Used in a and link tags.
href
Form element that is one of the building blocks for gathering user input
input
The attribute and value for input boxes that allows a user to put characters into the input box. Limited to a single-line sized input box.
input type=’text’
An attribute and value in an input box that only allows number entries.
input type=’number’
Attribute in an input box that allows text entry. Pulls up the phone dial pad on mobile devices, which is easier for pure number entries.
input type=’tel’
Attribute in an input box that allows text entry. Pulls up the email keyboard on mobile devices, which is easier for email entries.
input type=’email’
Circle-shaped input. Used to select one option from a list (e.g. “Select the one that applies”)
input type=’radio’
Square-shaped input. Used to select multiple options from a list (e.g. “Select all that apply”)
input type=’checkbox’
Attribute that helps an input box be formatted for date inputs. Can pop up an HTML calendar for selecting a date.
input type=’date’
Attribute in an input tag that makes it a button for submitting a form element with all of its data. “value” attribute specifies the text of the button.
input type=’submit’
This tag is identical to input type=”submit” when inside a form. Outside a form, just displays a button element that you must enable with JavaScript to do anything special.
button
Specifies a form for gathering data from a user. Alone, ____ doesn’t display anything on the page, but can alter the way other elements inside the form act (such as the button element)
form
______ ______ elements normally start (and end) with a new line, when displayed in a browser. Examples: h1, p, ul, etc.
Block level
_____ elements are normally displayed without line breaks and take up as little space as possible on the page. Examples: b, a, img, span
Inline
The generic term for all types of names and addresses that refer to objects on the World Wide Web.
URL (Uniform Resource Locater) - This is one type of URI (Uniform Resource Identifier)
Element that defines sound or music content
audio
Element that defines video or movie content
video
The generic term for the CSS code that specifies which elements in the document a style should be applied to
selector
CSS selector that selects all matching elements by tag name; designated with tag name alone. E.g. p {...} selects all paragraphs in the document.
element selector
Selects the first element in the document with the specified id attribute; designated with the # followed by the id. E.g. #first-name {...}
id selector
Selects all elements in the document with the specified class name; designated with a dot . followed by the class name. E.g. .menu-item
class selector
Matches all elements that are descendants of a specified element.
descendent selector
Traversing
a technique that allows you to apply styling to children elements of an element marked by an id or class. Example: //CSS #main h1 { color: white; } //HTML
Home
<== this element gets selected
Elements that functionally act the same as div tags, but with easier to read names useful for organizational purposes. Ex: header, nav, article, footer, etc…
HTML 5 Semantic Elements
The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box. By adding a width property, you can change the way it is laid out.
Inline-Block Element
Combines two selectors to select an element that is a direct, immediate child of another element. Does not select children of children (grandchildren) or any further-nested descendants.
direct child selector
Element
An individual component of an HTML document or web page
Tag
Piece of HTML code that specifies the creation of an element. All elements have at least one of these, and many have a second one as well. (Begins with a less-than symbol and ends with a greater-than symbol)
Attribute
A modifier of an HTML element type. It either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them.
HTML
Hypertext Markup Language. A standardized system for tagging text files to put content onto a web page.
DOCTYPE
An instruction to the web browser about what version of HTML the page is written in. Must be the very first thing on the HTML page.
id
An HTML attribute used to identify a specific element in the document. Should be unique - no other element in the document should have the same one of these, and any element should only have one of these.
class
An HTML attribute that specifies one or more names for an element. Does not need to be unique - many elements can have the same one of these and any given element can have many of these. Most commonly used in conjunction with a CSS stylesheet for applying styles to elements.
src
HTML attribute that specifies the source the element should look to. Used in script and img tags.
href
HTML attribute that specifies the hyperlink reference the element should look to. Used in a and link tags.
input
Form element that is one of the building blocks for gathering user input
input type=’text’
The attribute and value for input boxes that allows a user to put characters into the input box. Limited to a single-line sized input box.
input type=’number’
An attribute and value in an input box that only allows number entries.
input type=’tel’
Attribute in an input box that allows text entry. Pulls up the phone dial pad on mobile devices, which is easier for pure number entries.
input type=’email’
Attribute in an input box that allows text entry. Pulls up the email keyboard on mobile devices, which is easier for email entries.
input type=’radio’
Circle-shaped input. Used to select one option from a list (e.g. “Select the one that applies”)
input type=’checkbox’
Square-shaped input. Used to select multiple options from a list (e.g. “Select all that apply”)
input type=’date’
Attribute that helps an input box be formatted for date inputs. Can pop up an HTML calendar for selecting a date.
input type=’submit’
Attribute in an input tag that makes it a button for submitting a form element with all of its data. “value” attribute specifies the text of the button.
button
This tag is identical to input type=”submit” when inside a form. Outside a form, just displays a button element that you must enable with JavaScript to do anything special.
form
Specifies a form for gathering data from a user. Alone, ____ doesn’t display anything on the page, but can alter the way other elements inside the form act (such as the button element)
Block level
______ ______ elements normally start (and end) with a new line, when displayed in a browser. Examples: h1, p, ul, etc.
Inline
_____ elements are normally displayed without line breaks and take up as little space as possible on the page. Examples: b, a, img, span
URL (Uniform Resource Locater) - This is one type of URI (Uniform Resource Identifier)
The generic term for all types of names and addresses that refer to objects on the World Wide Web.
audio
Element that defines sound or music content
video
Element that defines video or movie content
selector
The generic term for the CSS code that specifies which elements in the document a style should be applied to
element selector
CSS selector that selects all matching elements by tag name; designated with tag name alone. E.g. p {...} selects all paragraphs in the document.
id selector
Selects the first element in the document with the specified id attribute; designated with the # followed by the id. E.g. #first-name {...}
class selector
Selects all elements in the document with the specified class name; designated with a dot . followed by the class name. E.g. .menu-item
descendent selector
Matches all elements that are descendants of a specified element.
a technique that allows you to apply styling to children elements of an element marked by an id or class. Example: //CSS #main h1 { color: white; } //HTML
Home
<== this element gets selected
Traversing
HTML 5 Semantic Elements
Elements that functionally act the same as div tags, but with easier to read names useful for organizational purposes. Ex: header, nav, article, footer, etc…
Inline-Block Element
The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box. By adding a width property, you can change the way it is laid out.
direct child selector
Combines two selectors to select an element that is a direct, immediate child of another element. Does not select children of children (grandchildren) or any further-nested descendants.
