HTML Foundation Flashcards
1
Q
What is doctype and how is it written?
A
- In HTML, the doctype is the required “<!DOCTYPE html>” preamble found at the top of all documents.
- Its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the “<!DOCTYPE html>” doctype ensures that the browser makes a best-effort attempt at following the relevant specifications.
< !DOCTYPE html >
2
Q
How do you add references to scripts in your page?
A
The < script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code.
< script src="javascript.js"></script >
< script>
alert("Hello World!");
< /script>
3
Q
What is an area lable?
A
Its for text readers.
4
Q
What does HTML stand for and what does it mean?
A
HyperText Markup Language
- HyperText refers to pieces of text that can link to other pages or resources. (the first ever website had a lot of links)
- Markup Language - HTML Tags are used to create markup which tells the browser how to interpert and display components on the website.
5
Q
How many heading levels are there?
A
6 - h1 to h6
6
Q
How many heading levels are there?
A
6 - h1 to h6
7
Q
What is best practice when using multiple types of headings?
A
- Use only one < h1 > heading per page. This is the title of the page.
- Do not skip heading levels. Screen readers use headings to quickly skip through content on a page. Dont have < h1 >< /h1 >< h3>< /h3>< h4>< /h4>.
- You can nest headings in lists with lists to help screenreaders.
8
Q
What is the linebreak html element and what is good practice about using it?
A
< br >
- The purpose is to break a line of text into a new line.
- It is bad practice to add margins on br tags to create line spacing, rather use the line-height property that was designed for this purpose.
- It is not mean to to create spaces between paragrahps. For that ise the < p> element and use css margin property to create space.
- Creating parahraphs with < br> tags is problematic for screen reading technology.
9
Q
Why does it matter if you use good practice with HTML
A
- Many of the best practice recommendations are about accessiblity via screenreaders.
- Cross-browser and cross device compatibility relies on best practice being followed. Some browsers interpret certain things differently, so to be predictable its best to follow good practice.
- Predectibility for other developers. If you follow best practice others will know where to look and what to change.
10
Q
What is Quirks mode?
A
- web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer.
- When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web. Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites
- There are now three modes used by the layout engines in web browsers: quirks mode, limited-quirks mode, and no-quirks mode.
- In quirks mode, layout emulates behavior in Navigator 4 and Internet Explorer 5.
- This is essential in order to support websites that were built before the widespread adoption of web standards.
- In no-quirks mode, the behavior is (hopefully) the desired behavior described by the modern HTML and CSS specifications. In limited-quirks mode, there are only a very small number of quirks implemented.
11
Q
Why are some html elements self closing? Do they need the slash?
A
Self closing tags mean they do net have content like <br></br> or <br></br>
In HTML 5 a void element (one that does not have content) does not need a closing slash.
The slash at the end of the closing tag is an XHTML thing, but HTML 5 does not require it.
12
Q
What is the horizontal rule tag, best practice and attributes applicable?
A
< hr> Represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
HR is not actually meant for styling, its more semantic. For actually lines use CSS.
Besides the global attributes you can also use the following:
align Deprecated Non-standard
Sets the alignment of the rule on the page. If no value is specified, the default value is left.
color Deprecated Non-standard
Sets the color of the rule through color name or hexadecimal value.
noshade Deprecated Non-standard
Sets the rule to have no shading.
size Deprecated Non-standard
Sets the height, in pixels, of the rule.
width Deprecated Non-standard
Sets the length of the rule on the page through a pixel or percentage value.
13
Q
What is an HTML attribute?
A
Its information in the html element that tells the browser how to interpret it. e.g. < hr size=”3” >
14
Q
What are global attributes?
A
Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.
The list can be found here - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
15
Q
How do you write a comment in HTML?
A
< !– comment here – >
16
Q
Write the HTML Boilerplate.
A
17
Q
what is the < html lang="eng" >< /html> tag
A
- This is the HTML root element and represents the root/top level of an HTML document.
- ALL other elements are decendants of this element.
- Its permitted content is a
<head>element followed by a<body>element. - The lang attributed will tell screen readers how to interpet the website.
- HTML 5 does not require the HTML tag, but its good for adding the lang tag or styling.
18
Q
What is the <head> element?
A
- The Document Metadata (Header) element. It follows the
<html>element. - Contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
- It does not display in the browser.
19
Q
What is the <title> element?
A
- Written
<title></title>. - Defines the title that is shown in the title bar.
- It only contains text and is always in the head lement.
- Page titles are important for SEO.
20
Q
What is the <link>element?
A
- Written
<link>. - The External Resource Link element.
- Its a self closing tag.
- It specifies the relationship between the current html document and an external source. Commonly used to link stylesheets.
- To link an external stylesheet write
<link href="main.css" rel=stylesheet"> - To link a favicon write
<link rel ="icon" href="favicon.ico"> - There are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile platforms.
21
Q
What is the <style> element and its best practice?
A
- The
<style>element must be included inside the<head>of the document. In general, it is better to put your styles in external stylesheets and apply them using<link>elements. - If you include multiple
<style> and <link>elements in your document, they will be applied to the DOM in the order they are included in the document — make sure you include them in the correct order, to avoid unexpected cascade issues. - In the same manner as
<link> elements, <style>elements can include media attributes that contain media queries, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width.
22
Q
What are media queries?
A
- Introduced in CSS3
- Media queries are not limited to CSS. They can be used in other languages such as JavaScript and HTML. However, CSS is the most common language used for media queries
- Media queries allow you to apply CSS styles depending on a device’s general type or other characteristics such as screen resolution or browser viewport width.
Media queries are used for the following:
- To conditionally apply styles with the CSS @media and @import at-rules.
- To target specific media for the <style>, <link></link>, <source></source>, and other HTML elements with the media= attribute.
- To test and monitor media states using the Window.matchMedia() and EventTarget.addEventListener() methods.</style>
23
Q
What is the <meta> element and what special attributes can it have?
A
- The
<meta>HTML element represents metadata that cannot be represented by other HTML meta-related elements, like<base>, <link>, <script>, <style> or <title>. - If the name attribute is set, the
<meta>element provides document-level metadata, applying to the whole page. - If the
http-equivattribute is set, the<meta>element is a pragma directive, providing information equivalent to what can be given by a similarly-named HTTP header. - If the
charsetattribute is set, the<meta>element is a charset declaration, giving the character encoding in which the document is encoded. - If the
itempropattribute is set, the<meta>element provides user-defined metadata.*
24
Q
What is meant by opening and closing tag?
A
- Its the element -
<html>is the opening tag and</html>is the closing tag. - This is only applicable for elements that aren’t self containing.
25
Where is the best section to include scripts in an HTML document?
T.L.D.R. put it inside the `` tag with defer attribute, or even better make your script type='module'.
``
When the browser loads HTML and comes across a` ` tag, it can’t continue building the DOM. It must execute the script right now. The same happens for external scripts `:` the browser must wait for the script to download, execute the downloaded script, and only then can it process the rest of the page.
That leads to two important issues:
Scripts can’t see DOM elements below them, so they can’t add handlers etc.
If there’s a bulky script at the top of the page, it “blocks the page”. Users can’t see the page content till it downloads and runs.
* If async is present: The script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing completes)
* If defer is present (and not async): The script is downloaded in parallel to parsing the page, and executed after the page has finished parsing, but before firing DOMContentLoaded.
* If neither async or defer is present: The script is downloaded and executed immediately, blocking parsing until the script is completed
26
What is the `rel` attribute in HTML and common values?
The rel attribute defines the relationship between a linked resource and the current document. Valid on `, , , and
27
What is a block level element and some examples?
HTML elements historically were categorized as either "block-level" elements or "inline-level" elements. Since this is a presentational characteristic it is nowadays specified by CSS in the Flow Layout.
A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a "block".
Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes.
* div
* headers
* form
* hr
* footer
* h1-h6
* Lists and List Items
* Table
28
How does a block level element differ from in-line element?
**Content model**
* Generally, block-level elements may contain inline elements and (sometimes) other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
**Block Level Default Formatting**
* By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.
* In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.
* In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).
* The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
**In Line Default Formatting**
* In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block.
* Horizontal margins, borders, and padding are respected between these boxes.
* The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned.
* The rectangular area that contains the boxes that form a line is called a line box.
29
`` vs `` tag and` ` vs ``
``
is the "stress" tag. It tells the browser to emphasis items. `` italisizes, but its mostly "styling.
Same as` ` vs ``
Its better practice to use ` `and ``
Not exactly. The `` element is for content that is of greater importance, while the ` `element is used to draw attention to text without indicating that it's more important.
` `vs ` - ` is to change the emphasis of reading text. So its like saying "I *loooove* cake"
30
What is the image tag and what important attributes should it include?
```
![]()
```
* alt is meant to give screenreaders a description.
* Its a self closing tag.
31
What types of images are supported?
1. APNG (Animated Portable Network Graphics) — Good choice for lossless animation sequences (GIF is less performant)
2. AVIF (AV1 Image File Format) — Good choice for both images and animated images due to high performance.
3. GIF (Graphics Interchange Format) — Good choice for simple images and animations.
4. JPEG (Joint Photographic Expert Group image) — Good choice for lossy compression of still images (currently the most popular).
5. PNG (Portable Network Graphics) — Good choice for lossless compression of still images (slightly better quality than JPEG).
6. SVG (Scalable Vector Graphics) — Vector image format. Use for images that must be drawn accurately at different sizes.
7. WebP (Web Picture format) — Excellent choice for both images and animated images
32
How to link a favicon?
``
33
URI vs URL
**URI: Uniform Resource Identifier (URI)** is a string of characters used to identify a name or a resource on the Internet. Such identification enables interaction with representations of the resource over a network (typically the World Wide Web) using specific protocols.
* is a sequence of characters that distinguishes one resource from another.
* URI containing a scheme name, authority, path, query and fragment. A URI does not need to contain all these components. All it needs is a scheme name and a file path, which can be empty.
**URL: In computing, a Uniform Resource Locator (URL)** is a subset of the Uniform Resource Identifier (URI) that specifies where an identified resource is available and the mechanism for retrieving it.
* RL might contain ftp:// or https://. This tells you that the resource can be located and accessed via File Transfer Protocol (FTP) or Hypertext Transfer Protocol Secure (HTTPS).
You’ll notice that these look similar to the URI examples mentioned above. That’s because they contain many of the same components, including path and query.
However, a URL contains unique components, such as protocol and domain, as well. In the last URL example, “https://” is the protocol. “Offers” is the subdomain, and “hubspot.com” the domain name. “How-to-run-seo-audit” is the path, and the question mark and everything after makes up the query.
34
What is the DOMContentLoaded event?
The DOMContentLoaded event fires when the HTML document has been completely parsed, and all deferred scripts `(