HTML/CSS Flashcards
(70 cards)
1
Q
What is Semantic HTML?
A
Semantic HTML is the use of HTML tags that provide a clear purpose of the content’s role within a webpage.
They make your website code more understandable for both developers and search engines.
For example, <header>is a semantic HTML tag. It encloses the header section (introductory content) at the top of the page.
Examples:
<h1></h1>
<nav></nav>
<ul></ul>
<footer></footer>
2
Q
What is Non-Semantic HTML?
A
Non-semantic HTML tags are generic and primarily used for styling and layout purposes.
Non-semantic HTML tags don’t convey any specific meaning about the content itself.
Examples:
<div></div>
<span></span>
<a></a>
3
Q
Explain how HTML, CSS, and JavaScript work together?
A
- he browser starts by reading and parsing the HTML from top-to-bottom to create the DOM tree (It is a representation of the HTML content structure where each element is a node in the DOM tree. Each element, attribute, and text becomes an object in the DOM tree that can be accessed and manipulated by JavaScript later on.)
- Then it reads/parses the CSS file and constructs a CSSOM (CSS Object Model), it organizes it into a hierarchical structure.
- The DOM and the CSSOM are merged into a Render Tree, which contains only visible elements with their applied styles.
- Then the browser determines the exact position of each visible element based on the Render Tree and paints it on the browser screen pixel by pixel.
- Lastly, JavaScript is parsed and executed separately through the
. JavaScript can modify the DOM, change CSS, and fetch new content dynamically. When this happens, the browser may need to recalculate the layout and repaint parts of the screen.
4
Q
What is HTTP? What are other HTTP types that are out there?
A
What is HTTP?
HTTP (Hypertext Transfer Protocol) is a form of data communication between the web browsers and servers. It is built off of TCP/IP on the application-layer protocol. It transports web pages, media, and other resources.
Model type:
HTTP operates on a request-response model: the client sends requests to servers, which then responds with the requested data. The protocol is stateless, meaning each request is independent of any previous requests.
Method Types:
HTTP supports different types of methods to interact with resources: (GET, POST, PUT, DELETE, etc.)
Security:
HTTPS uses encryption to protect data in transit.
5
Q
What are the ways to add images to html? Be specific!
Example: Explaining how to add to the src attribute.
A
- <img></img> element
- <Picture> element for responsive design
</Picture> - CSS background-image on an element
- Inline SVG: embed SVG into HTML
- <object> for svg or external files
</object> - <embed></embed>for embedding svg’s
- <iframe> Embedding images for another site.
</iframe> - Data URL (base64-encoded image)
6
Q
What are HTML attributes? Can you give an example?
A
The information inside an html element defining rules for it.
Example,
href=””,
src=””,
style=””,
type=””,
etc
7
Q
What is the difference between <div> and <span>?</span>
A
<div> is a block-level element for grouping and structuring larger sections of a webpage.
<span> is an inline element for styling or manipulating a small portion of text within a larger block of content.
</span></div>
8
Q
What is the purpose of the <head> tag in HTML?
A
To provide meta data and background information for the HTML file.
9
Q
What is block-level and inline in HTML? What are some common block-level and inline elements in HTML?
A
A block-level takes up a full width of its parent container by default. It starts a new line and pushes the next elements down.
An Inline element only takes up as much width as necessary. It does not start a new line. It stays within flow of the surrounding text.
10
Q
What is the difference between <strong> and <b>, <em> and <i>?</i></em></b></strong>
A
The difference between the two is that <strong> is a semantic element for search engines. Whereas <b> is just a regular, non-semantic element. They both embolden the text.</b></strong>
The same with <em> and <i> with italicizing the text. <em> which stands for emphasis, is a semantic element whereas <i> is not.</i></em></i></em>
11
Q
If you have a nested div within a div and they both have an id or class, how do you change the inner div?
A
With CSS selectors. You would tag the inner div with its id name, since it is unique. The parent div could have the same class. With that id name selected, you can change the inner div.
12
Q
What is CSS and why is it used?
A
CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a web page written in HTML or XML.
CSS is used to enhance the visual appearance and user experience of web pages through responsive design, layout, colors, fonts, etc.
13
Q
What are the different types of CSS? (Inline, Internal, External)
A
Inline: Is CSS written within the individual elements <> in the HTML file
Internal: Is writing it in the head of the HTML structure
External: Is linking an external CSS file to the HTML file to style it.
14
Q
What is the difference between id and class in CSS?
A
An id is unique per HTML document file and is used to identify a single element.
A class is used to identify multiple elements with the same class. Is used to apply the same styling or behavior to multiple elements.
15
Q
What’s the difference between relative, absolute, fixed, and sticky positioning?
A
16
Q
How does the float property work?
A
17
Q
What does the z-index property do in CSS?
A
18
Q
How does the Internet work?
A
The Internet works through a global network of interconnected computers and servers, communicating via standardized protocols. Data is broken into packets and routed through various network nodes using the Internet Protocol (IP). These packets travel across different physical infrastructures, including fiber optic cables, satellites, and wireless networks.
19
Q
What is Domain Name System (DNS)?
A
DNS is crucial for the functioning of the Internet, enabling users to access websites and services using memorable names instead of numerical IP addresses.
The system uses a tree-like structure with root servers at the top, followed by top-level domain servers (.com, .org, etc.), second-level domain (usually the website or organization name), and local DNS servers.
20
Q
What is the Box Model?
A
The fundamental concept that describes how elements are rendered on a webpage. Every HTML element is treated as a rectangular box, and the box model defines how the size of this box is calculated, including content, padding, border, and margin.
21
Q
What is HTML?
A
HTML stands for HyperText Markup Language. It structures web content and allows the inclusion of text, images, links, and other elements on the screen.
22
Q
What are HTML tags?
A
HTML tags are the building blocks of HTML. They are used to create elements and structure content on a web page. Tags are enclosed in angle brackets, For example, <p> for a paragraph. Most tags come in pairs: an opening tag <p> and a closing tag </p>.
23
Q
What is the basic structure of an HTML document?
A
<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: The root element of the document.
<head>:Contains meta-information about the document, such as the title and links to stylesheets.
<title>: Specifies the title of the document, displayed in the browser’s title bar.
<body>:Contains the content of the document, such as text, images, and other elements.
</body></title></head></html>
24
Q
What is the purpose of a DOCTYPE declaration in HTML5?
A
The DOCTYPE declaration in HTML5 is used to specify the document type and version of HTML that the web page is written in.
25
What is the difference between an element and a tag in HTML?
A tag is a part of HTML syntax used to define elements. Tags are enclosed in angle brackets, e.g.,
.
An element consists of a start tag, content, and an end tag. For example,
This is a paragraph.
is a paragraph element.
26
What are attributes in HTML?
Attributes provide additional information about HTML elements. They are included within the opening tag and usually come in name-value pairs, like name=”value”.
For example, in Link, href (hypertext reference) is an attribute specifying the URL of the link.
27
How do you create a hyperlink in HTML?
To create a hyperlink, use the (anchor) tag with the href attribute specifying the URL.
28
What are other ways to create a hyperlink in HTML?
-Through a form’s action attribute
- Through the use of buttons
- Through the tag for attaching stylesheets and resources
- window.location
-
- Using an image as a hyperlink
- Using inside of
29
What is a Hypertext?
A hypertext is text that contains links (called hyperlinks) to other text, documents, or resources. Unlike regular text, hypertext allows users to navigate between different pieces of information by clicking on links.
30
What is the tag used for?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <title> tag defines the title of the HTML document, which appears in the browser’s title bar or tab. It’s placed within the <head> section.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='31' id='card-576381977'>
<div class='header'>
31
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the <img> tag in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <img> tag is used to embed images in an HTML document.
The src=”” is the image file path name and the alt=”” is the alternative description of the image when the image isnt loaded.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='32' id='card-576382066'>
<div class='header'>
32
</div>
<div class='card-face question'>
<div class='question-content'>
What is the difference between block-level and inline elements in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
-Block-level elements: These elements start on a new line and take up the full width available. Examples include <div>, <p>, and <h1> to <h6>.
- Inline elements: These elements do not start on a new line and only take up as much width as necessary. Examples include <span>,<a>, and <img>.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='33' id='card-576382431'>
<div class='header'>
33
</div>
<div class='card-face question'>
<div class='question-content'>
How do you create a list in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
- Ordered List: Creates a numbered list using the <ol> tag.
- Unordered List: Creates a bulleted list using the <ul> tag.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='34' id='card-576382659'>
<div class='header'>
34
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the <br> tag?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
<br /> tag: inserts a line break in the text, moving the content after the tag to a new line. It’s an empty tag and doesn’t require a closing tag.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='35' id='card-576382824'>
<div class='header'>
35
</div>
<div class='card-face question'>
<div class='question-content'>
How do you create a hyperlink that opens in a new tab?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
To open a link in a new tab, use the target attribute with the value _blank:
<a href="https://www.example.com" target="_blank">Visit Example</a>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='36' id='card-576382941'>
<div class='header'>
36
</div>
<div class='card-face question'>
<div class='question-content'>
What is the <title> tag used for?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <title> tag defines the title of the HTML document, which appears in the browser’s title bar or tab. It’s placed within the <head> section.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='37' id='card-576383024'>
<div class='header'>
37
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the <meta> tag?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <meta> tag provides information about the HTML document, such as character set, author, description, and keywords to create better user experiences, SEO, accessibility, and control search engine behavior. It’s placed within the <head> section.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='38' id='card-576383075'>
<div class='header'>
38
</div>
<div class='card-face question'>
<div class='question-content'>
How do you specify the character encoding for an HTML document?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The character encoding is specified using a <meta> tag within the <head> section:
<meta charset="UTF-8">
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='39' id='card-576383163'>
<div class='header'>
39
</div>
<div class='card-face question'>
<div class='question-content'>
What is the difference between <head> and <body> tags?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
<head>: Contains meta-information about the document, such as the title, character set, and links to stylesheets and scripts.
<body>: Contains the actual content of the document that is displayed in the browser, such as text, images, and links.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='40' id='card-576383311'>
<div class='header'>
40
</div>
<div class='card-face question'>
<div class='question-content'>
What is the difference between the <b> and <strong> tags?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Both tags display text in bold, but <strong> indicates that the text is of strong importance, providing semantic meaning, while <b> does not convey any extra importance.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='41' id='card-576383440'>
<div class='header'>
41
</div>
<div class='card-face question'>
<div class='question-content'>
How do you embed a video in HTML5?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
HTML5 provides the <video> tag to embed videos:
controls: Adds video controls like play, pause, and volume.
source: Specifies the video file and its format.
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='42' id='card-576383608'>
<div class='header'>
42
</div>
<div class='card-face question'>
<div class='question-content'>
How do you create an email link in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
To create a link that opens the user’s default email client with a new message, use the mailto: scheme:
<a href="mailto:example@example.com">Send Email</a>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='43' id='card-576383724'>
<div class='header'>
43
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the <noscript> tag in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <noscript> defines alternative content to be displayed if the user’s browser does not support JavaScript or if JavaScript is disabled.
<noscript>
<p>JavaScript is not enabled in your browser.</p>
</noscript>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='44' id='card-576384201'>
<div class='header'>
44
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the action attribute in an HTML form?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The action attribute specifies the URL to which the form data will be submitted when the form is submitted.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='45' id='card-576384260'>
<div class='header'>
45
</div>
<div class='card-face question'>
<div class='question-content'>
What is the difference between the "id" and "class" attributes in HTML5?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
id attribute
- Each `id` must be **unique** within a document.
- Used to identify a **single** element.
class attribute
- Multiple elements can have the **same** class.
- Used to apply the **same styling or behavior** to multiple elements.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='46' id='card-576384388'>
<div class='header'>
46
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the "alt" attribute in HTML5?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
To provide an alternative text or image or resource when the original source cannot be loaded.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='47' id='card-576384453'>
<div class='header'>
47
</div>
<div class='card-face question'>
<div class='question-content'>
How do you create a numbered list in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Use the <ol> (ordered list) tag, with each list item defined by <li>:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='48' id='card-576384522'>
<div class='header'>
48
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the <base> tag in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <base> tag specifies the base URL for all relative URLs in a document. It must be included inside the <head> section.
<base href="https://www.example.com/">
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='49' id='card-576384602'>
<div class='header'>
49
</div>
<div class='card-face question'>
<div class='question-content'>
How do you create a definition list in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Use the <dl> tag for the list, <dt> for each term, and <dd> for each definition:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='50' id='card-576384683'>
<div class='header'>
50
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the enctype attribute in an HTML form?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The enctype attribute specifies how form data should be encoded when submitting it to the server. It’s used with the method=”post” attribute.
<form action="/upload" method="post" enctype="multipart/form-data">
<!-- form elements -->
</form>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='51' id='card-576384751'>
<div class='header'>
51
</div>
<div class='card-face question'>
<div class='question-content'>
How do you create a hidden input field in an HTML form?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Use <input type=”hidden”> to create a hidden input field that stores data without displaying it to the user:
<input type="hidden" name="userID" value="12345">
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='52' id='card-576384833'>
<div class='header'>
52
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the <address> tag in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <address> tag is used to define contact information for the author or owner of a document or article.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='53' id='card-576384925'>
<div class='header'>
53
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the <address> tag in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <address> tag is used to define contact information for the author or owner of a document or article.
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='54' id='card-576385067'>
<div class='header'>
54
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the <canvas> element in HTML5?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <canvas> element provides a drawable region in the document that can be used to render graphics, such as charts, games, or other visual images, on the fly via scripting (usually JavaScript).
<canvas id="myCanvas" width="200" height="100"></canvas>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='55' id='card-576385225'>
<div class='header'>
55
</div>
<div class='card-face question'>
<div class='question-content'>
What is the difference between <i> and <em> tags?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Both provide italics styling but <i> is non-semantic, while <em> is semantic html which helps provide better accessibility and SEO. <em> stands for "Emphasis".
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='56' id='card-576385465'>
<div class='header'>
56
</div>
<div class='card-face question'>
<div class='question-content'>
What is the difference between <b> and <strong> tags?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Both provide bold styling but <b> is non-semantic, while <strong> is semantic html which helps provide better accessibility and SEO.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='57' id='card-576385582'>
<div class='header'>
57
</div>
<div class='card-face question'>
<div class='question-content'>
How do you specify multiple language versions of a webpage?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
To provide multiple language versions of a webpage, you can use the hreflang attribute in the <link> tag to specify the language of an alternate version. This helps search engines understand and serve the correct language version to users.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='58' id='card-576385662'>
<div class='header'>
58
</div>
<div class='card-face question'>
<div class='question-content'>
How can you include SVG graphics directly in an HTML document?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Scalable Vector Graphics (SVG) can be embedded directly within HTML using the <svg> tag. This allows for defining vector-based graphics that can scale without loss of quality.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='59' id='card-576385788'>
<div class='header'>
59
</div>
<div class='card-face question'>
<div class='question-content'>
What are data attributes in HTML, and how are they used?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Data attributes in HTML are custom attributes that start with data- and allow you to store extra information on HTML elements. They are often used to embed custom data that can be accessed via JavaScript.
<div data-user-id="12345" data-role="admin">User Info</div>
In JavaScript, you can access these attributes using the dataset property:
const div = document.querySelector('div');
console.log(div.dataset.userId); // Outputs: 12345
console.log(div.dataset.role); // Outputs: admin
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='60' id='card-576385975'>
<div class='header'>
60
</div>
<div class='card-face question'>
<div class='question-content'>
Explain the purpose of the <template> tag in HTML.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <template> tag is used to declare a fragment of HTML that is not to be rendered immediately when the page loads. Instead, it can be instantiated later using JavaScript. This is useful for client-side templating.
<template id="my-template">
<div class="card">
<h2></h2>
<p></p>
</div>
</template>
JavaScript can then be used to clone and insert the template content into the document.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='61' id='card-576386407'>
<div class='header'>
61
</div>
<div class='card-face question'>
<div class='question-content'>
How do you specify multiple language versions of a webpage?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
To provide multiple language versions of a webpage, you can use the hreflang attribute in the <link> tag to specify the language of an alternate version. This helps search engines understand and serve the correct language version to users.
<link rel="alternate" href="example.fr.html" hreflang="fr">
<link rel="alternate" href="example.es.html" hreflang="es">
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='62' id='card-576386608'>
<div class='header'>
62
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the <output> tag in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <output> tag represents the result of a calculation or user action. It’s typically used in conjunction with forms to display the outcome of user interactions.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='63' id='card-576386658'>
<div class='header'>
63
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the <output> tag in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <output> tag represents the result of a calculation or user action. It’s typically used in conjunction with forms to display the outcome of user interactions.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="0"> +
<input type="number" id="b" value="0">
= <output name="result" for="a b">0</output>
</form>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='64' id='card-576386764'>
<div class='header'>
64
</div>
<div class='card-face question'>
<div class='question-content'>
How can you make an HTML element editable in the browser?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
To make an HTML element editable directly in the browser, you can set the contenteditable attribute to true. This allows users to edit the content of the element in place.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='65' id='card-576386885'>
<div class='header'>
65
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the <datalist> tag in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <datalist> tag is used to provide a list of predefined options to an <input> element, typically used to offer autocomplete suggestions.
<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
When the user starts typing in the input field, the browser will display the options defined in the <datalist> that match the current input.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='66' id='card-576510001'>
<div class='header'>
66
</div>
<div class='card-face question'>
<div class='question-content'>
What is the order property in CSS? How does it work?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Order Property controls the visual order of items inside a flex container. It does not change the order in the HTML, only how items appear.
Default Order = 0 (All flex items have order: 0 by default).
Lower order appears first (Negative numbers move items to the front).
Higher order appears later (Bigger numbers move items to the back).
When to Use order?
✅ When you need to rearrange elements visually without modifying HTML.
✅ Useful for responsive designs where you want items to shift on different screen sizes.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='67' id='card-576510948'>
<div class='header'>
67
</div>
<div class='card-face question'>
<div class='question-content'>
What is the difference between align-self and align-items in CSS?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Align-items affects a whole container.
Align-self is for individual selectors.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='68' id='card-576512120'>
<div class='header'>
68
</div>
<div class='card-face question'>
<div class='question-content'>
Explain flex-flow property in CSS?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
It is a shorthand combination of flex-direction and flex-wrap.
Ex. flex-flow: row wrap
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='69' id='card-576512642'>
<div class='header'>
69
</div>
<div class='card-face question'>
<div class='question-content'>
What does align-content do in CSS?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
It sets how multiple lines (or rows) are spaced apart from eachother. It uses the same property values as align-items.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22725318&returnTo=%2Fpacks%2F22725318%2Fsubscribe&source=preview-card&subject=Tech+Interview+Prep' data-card-is-blurrable data-number='70' id='card-576513056'>
<div class='header'>
70
</div>
<div class='card-face question'>
<div class='question-content'>
What is the difference between align-content and align-items?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
align-content determines the spacing between lines
align-items determines how the items as a whole are aligned within the container.
</div>
</div>
</div>
</div>
</div>
</div>
<div class='flashcards-sidebar'>
<div class='sidebar-header'>
<div class='react-component' id='flashcards-search-bar'>
<div class='placeholder market-search-bar' id='flashcards-search-bar-placeholder'></div>
</div>
</div>
<div class='sidebar-content'>
<p class='deck-subject-heading'>
<a class="decks-in-subject-link" href="/packs/tech-interview-prep-22725318"><span class="pack-name">Tech Interview Prep</span> (4 decks)
</a></p>
<ul class='deck-list-items'>
<a class='deck-link selected' href='/flashcards/html-css-18264712/packs/22725318'>
<li class='deck-list-item'>HTML/CSS</li>
</a>
<a class='deck-link ' href='/flashcards/javascript-18277487/packs/22725318'>
<li class='deck-list-item'>JavaScript</li>
</a>
<a class='deck-link ' href='/flashcards/react-18277490/packs/22725318'>
<li class='deck-list-item'>React</li>
</a>
<a class='deck-link ' href='/flashcards/system-design-18277493/packs/22725318'>
<li class='deck-list-item'>System Design</li>
</a>
</ul>
</div>
</div>
</div>
<div id='tooltip-controller'></div>
<div data='{"packId":22725318,"source":"spaced-repetition-modal","subject":"Tech Interview Prep","resources":{"deckId":18264712,"packId":22725318},"returnTo":"/packs/22725318/subscribe"}' id='spaced-repetition-modal-controller'></div>
<div id='banner-controller'></div>
<div id='dialog-modal-controller'></div>
<div class='band band-footer'>
<div class='footer-main'>
<ul class='sections'>
<li class='section key-links'>
<p class='section-heading'>
Key Links
</p>
<ul class='options-list'>
<li class='option'>
<a id="footer-pricing-link" class="option-link" href="/pricing?paywall=upgrade">Pricing</a>
</li>
<li class='option'>
<a class="option-link" href="/companies">Corporate Training</a>
</li>
<li class='option'>
<a class="option-link" href="/teachers">Teachers & Schools</a>
</li>
<li class='option'>
<a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://itunes.apple.com/us/app/brainscape-smart-flashcards/id442415567?mt=8">iOS App</a>
</li>
<li class='option'>
<a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal">Android App</a>
</li>
<li class='option'>
<a class="option-link" target="_blank" rel="noopener" href="https://www.brainscape.com/faq">Help Center</a>
</li>
</ul>
</li>
<li class='section subjects'>
<p class='section-heading'>
Subjects
</p>
<ul class='options-list'>
<li class='option'>
<a class="option-link" href="/subjects/medical-nursing">Medical & Nursing</a>
</li>
<li class='option'>
<a class="option-link" href="/subjects/law">Law Education</a>
</li>
<li class='option'>
<a class="option-link" href="/subjects/foreign-languages">Foreign Languages</a>
</li>
<li class='option'>
<a class="option-link" href="/subjects-directory/a">All Subjects A-Z</a>
</li>
<li class='option certified-classes'>
<a class="option-link" href="/learn">All Certified Classes</a>
</li>
</ul>
</li>
<li class='section company'>
<p class='section-heading'>
Company
</p>
<ul class='options-list'>
<li class='option'>
<a class="option-link" href="/about">About Us</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" rel="nofollow noopener noreferrer" href="https://brainscape.zendesk.com/hc/en-us/articles/115002370011-Can-I-earn-money-from-my-flashcards-">Earn Money!</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="https://www.brainscape.com/academy">Academy</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="https://brainscapeshop.myspreadshop.com/all">Swag Shop</a>
</li>
<li class='option'>
<a target="_blank" rel="nofollow noopener" class="option-link" href="/contact">Contact</a>
</li>
<li class='option'>
<a target="_blank" rel="nofollow noopener" class="option-link" href="/terms">Terms</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="https://www.brainscape.com/academy/brainscape-podcasts/">Podcasts</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="/careers">Careers</a>
</li>
</ul>
</li>
<li class='section find-us'>
<p class='section-heading'>
Find Us
</p>
<ul class='social-media-list'>
<li class='option twitter-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://twitter.com/Brainscape"><img data-src="/pks/images/shared/twitterx-af917e8b474ed7c95a19.svg" alt="twitter badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option linkedin-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.linkedin.com/company/brainscape/"><img data-src="/pks/images/shared/linkedin-2f15819658f768056cef.svg" alt="linkedin badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option facebook-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.facebook.com/Brainscape"><img data-src="/pks/images/shared/facebook-1598a44227eabc411188.svg" alt="facebook badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option youtube-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.youtube.com/c/BrainscapeNY"><img data-src="/pks/images/shared/youtube-7f2994b2dc1891582524.svg" alt="youtube badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option pinterest-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.pinterest.com/brainscape/"><img data-src="/pks/images/shared/pinterest-04f51aa292161075437b.svg" alt="pinterest badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option tiktok-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.tiktok.com/@brainscapeu"><img data-src="/pks/images/shared/tiktok-644cf4608bd73fbbb24f.svg" alt="tiktok badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option insta-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.instagram.com/brainscape/"><img data-src="/pks/images/shared/insta-210cc2d059ae807961d2.svg" alt="insta badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
</ul>
<div class='get-the-app'>
<div class='qr-code'>
<img data-src="https://www.brainscape.com/assets/cms/public-views/shared/shortio-from-homepage.png" alt="QR code" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="130" height="130" />
</div>
<div class='app-badges'>
<div class='badge apple-badge'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://apps.apple.com/us/app/brainscape-smart-flashcards/id442415567"><img data-src="/pks/images/shared/apple-badge-b6e4f380fb879821d601.svg" alt="apple badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a>
</div>
<div class='badge android-badge'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img data-src="/pks/images/shared/android-badge-a2251833dc7f6ca8879c.svg" alt="android badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class='footer-blurb'>
Brainscape helps you reach your goals faster, through stronger study habits.
<br>
© 2025 Bold Learning Solutions. <a class="option-link" href="/terms">Terms and Conditions</a>
</div>
</div>
<script>
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
}
</script>
<script>
window.addEventListener('load', () => {
setTimeout(() => {
const script = document.createElement('script');
script.src = "/pks/js/public-deck-cards-page-d0410d84e8b38e8511bf.js";
script.defer = true;
document.body.appendChild(script);
}, 0);
});
</script>
<script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js" defer="defer"></script>
<script>
document.addEventListener("mainSharedready", () => {
GaHelper.setGaDimension("dimension1","No");
});
</script>
<script type='application/ld+json'>
{"@context":"https://schema.org/","@type":"Quiz","about":{"@type":"Thing","name":"HTML/CSS"},"hasPart":[{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is Semantic HTML?","acceptedAnswer":{"@type":"Answer","text":"Semantic HTML is the use of HTML tags that provide a clear purpose of the content's role within a webpage. They make your website code more understandable for both developers and search engines. For example, is a semantic HTML tag. It encloses the header section (introductory content) at the top of the page. Examples: "}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is Non-Semantic HTML?","acceptedAnswer":{"@type":"Answer","text":"Non-semantic HTML tags are generic and primarily used for styling and layout purposes. Non-semantic HTML tags don’t convey any specific meaning about the content itself. Examples: "}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Explain how HTML, CSS, and JavaScript work together?","acceptedAnswer":{"@type":"Answer","text":"1. he browser starts by reading and parsing the HTML from top-to-bottom to create the DOM tree (It is a representation of the HTML content structure where each element is a node in the DOM tree. Each element, attribute, and text becomes an object in the DOM tree that can be accessed and manipulated by JavaScript later on.) 2. Then it reads/parses the CSS file and constructs a CSSOM (CSS Object Model), it organizes it into a hierarchical structure. 3. The DOM and the CSSOM are merged into a Render Tree, which contains only visible elements with their applied styles. 4. Then the browser determines the exact position of each visible element based on the Render Tree and paints it on the browser screen pixel by pixel. 5. Lastly, JavaScript is parsed and executed separately through the . JavaScript can modify the DOM, change CSS, and fetch new content dynamically. When this happens, the browser may need to recalculate the layout and repaint parts of the screen."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is HTTP? What are other HTTP types that are out there?","acceptedAnswer":{"@type":"Answer","text":"What is HTTP? HTTP (Hypertext Transfer Protocol) is a form of data communication between the web browsers and servers. It is built off of TCP/IP on the application-layer protocol. It transports web pages, media, and other resources. Model type: HTTP operates on a request-response model: the client sends requests to servers, which then responds with the requested data. The protocol is stateless, meaning each request is independent of any previous requests. Method Types: HTTP supports different types of methods to interact with resources: (GET, POST, PUT, DELETE, etc.) Security: HTTPS uses encryption to protect data in transit."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What are the ways to add images to html? Be specific! Example: Explaining how to add to the src attribute.","acceptedAnswer":{"@type":"Answer","text":"- element - element for responsive design - CSS background-image on an element - Inline SVG: embed SVG into HTML - for svg or external files - for embedding svg's - Embedding images for another site. - Data URL (base64-encoded image)"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What are HTML attributes? Can you give an example?","acceptedAnswer":{"@type":"Answer","text":"The information inside an html element defining rules for it. Example, href=\"\", src=\"\", style=\"\", type=\"\", etc"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the difference between and ?","acceptedAnswer":{"@type":"Answer","text":" is a block-level element for grouping and structuring larger sections of a webpage. is an inline element for styling or manipulating a small portion of text within a larger block of content."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the purpose of the tag in HTML?","acceptedAnswer":{"@type":"Answer","text":"To provide meta data and background information for the HTML file."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is block-level and inline in HTML? What are some common block-level and inline elements in HTML?","acceptedAnswer":{"@type":"Answer","text":"A block-level takes up a full width of its parent container by default. It starts a new line and pushes the next elements down. An Inline element only takes up as much width as necessary. It does not start a new line. It stays within flow of the surrounding text."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the difference between and , and ?","acceptedAnswer":{"@type":"Answer","text":"The difference between the two is that is a semantic element for search engines. Whereas is just a regular, non-semantic element. They both embolden the text. The same with and with italicizing the text. which stands for emphasis, is a semantic element whereas is not."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"If you have a nested div within a div and they both have an id or class, how do you change the inner div?","acceptedAnswer":{"@type":"Answer","text":"With CSS selectors. You would tag the inner div with its id name, since it is unique. The parent div could have the same class. With that id name selected, you can change the inner div."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is CSS and why is it used?","acceptedAnswer":{"@type":"Answer","text":"CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a web page written in HTML or XML. CSS is used to enhance the visual appearance and user experience of web pages through responsive design, layout, colors, fonts, etc. "}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What are the different types of CSS? (Inline, Internal, External)","acceptedAnswer":{"@type":"Answer","text":"Inline: Is CSS written within the individual elements \u003c\u003e in the HTML file Internal: Is writing it in the head of the HTML structure External: Is linking an external CSS file to the HTML file to style it."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the difference between id and class in CSS?","acceptedAnswer":{"@type":"Answer","text":"An id is unique per HTML document file and is used to identify a single element. A class is used to identify multiple elements with the same class. Is used to apply the same styling or behavior to multiple elements."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"How does the Internet work?","acceptedAnswer":{"@type":"Answer","text":"The Internet works through a global network of interconnected computers and servers, communicating via standardized protocols. Data is broken into packets and routed through various network nodes using the Internet Protocol (IP). These packets travel across different physical infrastructures, including fiber optic cables, satellites, and wireless networks."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is Domain Name System (DNS)?","acceptedAnswer":{"@type":"Answer","text":"DNS is crucial for the functioning of the Internet, enabling users to access websites and services using memorable names instead of numerical IP addresses. The system uses a tree-like structure with root servers at the top, followed by top-level domain servers (.com, .org, etc.), second-level domain (usually the website or organization name), and local DNS servers."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the Box Model?","acceptedAnswer":{"@type":"Answer","text":"The fundamental concept that describes how elements are rendered on a webpage. Every HTML element is treated as a rectangular box, and the box model defines how the size of this box is calculated, including content, padding, border, and margin."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is HTML?","acceptedAnswer":{"@type":"Answer","text":"HTML stands for HyperText Markup Language. It structures web content and allows the inclusion of text, images, links, and other elements on the screen."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What are HTML tags?","acceptedAnswer":{"@type":"Answer","text":"HTML tags are the building blocks of HTML. They are used to create elements and structure content on a web page. Tags are enclosed in angle brackets, For example, for a paragraph. Most tags come in pairs: an opening tag and a closing tag ."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the basic structure of an HTML document?","acceptedAnswer":{"@type":"Answer","text":": Declares the document type and version of HTML. : The root element of the document. : Contains meta-information about the document, such as the title and links to stylesheets. : Specifies the title of the document, displayed in the browser’s title bar. : Contains the content of the document, such as text, images, and other elements."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the purpose of a DOCTYPE declaration in HTML5?","acceptedAnswer":{"@type":"Answer","text":"The DOCTYPE declaration in HTML5 is used to specify the document type and version of HTML that the web page is written in."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the difference between an element and a tag in HTML?","acceptedAnswer":{"@type":"Answer","text":"A tag is a part of HTML syntax used to define elements. Tags are enclosed in angle brackets, e.g., . An element consists of a start tag, content, and an end tag. For example, This is a paragraph. is a paragraph element."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What are attributes in HTML?","acceptedAnswer":{"@type":"Answer","text":"Attributes provide additional information about HTML elements. They are included within the opening tag and usually come in name-value pairs, like name=”value”. For example, in Link, href (hypertext reference) is an attribute specifying the URL of the link."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"How do you create a hyperlink in HTML?","acceptedAnswer":{"@type":"Answer","text":"To create a hyperlink, use the (anchor) tag with the href attribute specifying the URL."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What are other ways to create a hyperlink in HTML?","acceptedAnswer":{"@type":"Answer","text":"-Through a form’s action attribute - Through the use of buttons - Through the tag for attaching stylesheets and resources - window.location - - Using an image as a hyperlink - Using inside of for clickable image maps"}}],"educationalAlignment":[{"@type":"AlignmentObject","alignmentType":"educationalSubject","targetName":"HTML/CSS"}]}
</script>
</body>
</html>