HTML Flashcards
HTML flashcards
Where do you put non-visible content about the HTML document?
In the head element.
However - the title element within the head element will be visible at the top of the browser or in the browser tab.
Where do you put visible content about the HTML document?
In the body element.
Where do the head and body tags go in a valid HTML document?
In the html element located beneath the doctype declaration. The <html> element is the root element.
What is the purpose of a <!DOCTYPE> declaration, and where does it go?
Ensures that the browser renders the document as HTML and follows HTML specifications. <!DOCTYPE html> specifically means that the document is an HTML5 document. The declaration goes at the very top of the document.
Give five examples of HTML element tags.
- body
- head
- title
- line break:
<br/>(empty tag with no closing tag) - span
- extra- - horizontal rule: hr (empty tag with no closing tag)
- anchor: a (with href attribute and file path)
- p
- div
-
<img/>(empty tag with no closing tag) - `<meta></meta> (empty tag with no closing tag)
What is the purpose of HTML attributes?
To provide more information about the contents of the associated element. It is comprised of an attribute name and a corresponding value. Attributes are always specified in the opening or start tag. Attributes usually come in name and value pairs, ex: name=”value”
Give an example of an HTML entity (escape character).
Ampersand: & (ampersand symbol)amp;
-extra-
Trademark: ™ (ampersand symbol)trade;
All end with semicolon.
How do block-level elements affect the document flow?
Breaks the document flow and creates line breaks between neighboring elements, starts on a new line.
Block-level elements take up the entire horizontal space of its parent element by default, and the vertical space needed for its contents.
How do inline elements affect the document flow?
The elements will appear to continue on the same line as neighboring elements. Inline elements take up the least amount of space available bounded by the tags defining the element, instead of breaking the flow of the content. Any height and width properties will have no effect.
What are the default width and height of a block-level element?
All of the horizontal space available within its parent element (container), and the vertical space needed for the height of its contents.
What are the default width and height of an inline element?
An inline element does not start on a new line and only takes up as much width and height as necessary, bounded by the tags defining the element.
What is the difference between an ordered list and an unordered list in HTML?
Ordered lists are numbered or in sequence (A-Z) and unordered lists are not numbered and use bullet points
Is an HTML list a block element or an inline element?
The list and list items are both block-level elements.
What HTML tag is used to link to another website?
Anchor tag with an href attribute.
What is an absolute URL?
An absolute URL starts with the domain name for that site and can be followed by the path to a specific page. Used for external website links.
What is a relative URL?
A URL that links to other pages within the same site, you do not need to specify the domain name in the URL.
How do you indicate the relative link to a parent directory?
../file-name
How do you indicate the relative link to a child directory?
Href attribute should contain ../../ preceding the file name and type enclosed in double quotes. child-folder-name/file-name
How do you indicate the relative link to a grandparent directory?
Href attribute should contain ../../ preceding the file name and type enclosed in double quotes. <a href="../../file-name.type"
use ../` for each generation of directories.
How do you indicate the relative link to the same directory?
Href attribute should simply contain the file name and type enclosed in double quotes. <a href="file-name.type"></a>
What is the purpose of an HTML form element?
To obtain information and data from users via a structured set of elements.
Give five examples of form control elements.
form, fieldset, legend, textarea, label
-extra-
button, and input
Give three examples of type attributes for HTML input elements.
Radio, button, checkbox,
-extra-
image, submit, text
Is an HTML element a block element or an inline element?
Inline, and that is why we have to insert them into a div.
What are the six primary HTML elements for creating tables?
Table, thead, th, tr, td, tbody
What purpose do the thead and tbody elements serve?
The tbody element encapsulates a set of table rows indicating that they are the body of the table. The thhead element defines a set of rows as the head of the columns of the table.
Both, along with tfoot, provide useful semantic information that can be used when rendering for either screen or printer as well as for accessibility purposes.
Give two examples of data that would lend itself well to being displayed in a table.
Financial data and reports, schedules, game scores, inventory control.
Why do two div elements “vertically stack” on one another by default?
Because they are block elements and are vertically-based, by default fill 100% of the horizontal space available, and always start on a new line.
What tags are necessary for a complete HTML Skeleton?
<!DOCTYPE>, <HTML></>, <head></>, <meta></> meta data like character set (UTF-8)<title></> inside the head, and <body></>, which is inside the <HTML> tag.
What attribute defines extra info about an element that appears as a tooltip?
The title attribute.
How many heading elements are in HTML?
There are 6 Heading elements in HTML, and the browser automatically adds a margin before and after the heading. There must only be one <H1> heading per HTML document.
What are the required attributes for an <img> tag?
src - specifies the path to the image, whether absolute or relative
alt - specifies the alternative text describing the image
What is a <map> element
The <map> tag is used to define an image map. An image map is an image with clickable areas.
The required name attribute of the <map> element is associated with the <img>’s usemap attribute (must have a hashtag I think) and creates a relationship between the image and the map.
The <map> element contains a number of <area> elements, that define the clickable areas in the image map with attributes like shape, coords, alt, and href.
What type of content belongs within the <head> of an HTML document?
Content that doesn’t get displayed on the webpage, but that’s used for machine processing like <meta> content, <title> content, `<link></link>’ content like stylesheets, and scripts.
How do you open a link in a new browser window?
Add a target attribute with a value of “_blank” to the anchor <a> element.
What is a hyperlink?
A hyperlink, or simply a link, is a digital clickable reference to data that a user can follow by clicking or tapping the linked hypertext.
A hyperlink can point to a web resource, such as a whole document or to a specific element within a document.
In HTML, the link is created within an anchor element with an href attribute that indicates the link’s destination URI.
How do block, inline, and inline-block property values differ?
Block-level elements take up just enough vertical space needed to fit its contents, but always start on a new line and take up all of the available horizontal space as it can by default.
Inline elements take up just enough vertical and horizontal space it needs to fit its contents, and no more. You cannot adjust the height and width properties on inline elements.
Inline-block elements are formatted as as inline element, in that by default it only takes up the vertical and horizontal space needed to fits it’s content, but you can apply height and width values if you’d like.
Give some examples of block-level elements.
- div
- ul
- li
- p
Give some examples of inline elements.
- span
- input
- strong
Give some examples of inline-block elements.
- button
- textarea and select in chrome.
