HTML/CSS Flashcards
What is Semantic HTML?
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>
What is Non-Semantic HTML?
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>
Explain how HTML, CSS, and JavaScript work together?
- 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.
What is HTTP? What are other HTTP types that are out there?
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.
What are the ways to add images to html? Be specific!
Example: Explaining how to add to the src attribute.
- <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)
What are HTML attributes? Can you give an example?
The information inside an html element defining rules for it.
Example,
href=””,
src=””,
style=””,
type=””,
etc
What is the difference between <div> and <span>?</span>
<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>
What is the purpose of the <head> tag in HTML?
To provide meta data and background information for the HTML file.
What is block-level and inline in HTML? What are some common block-level and inline elements in HTML?
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.
What is the difference between <strong> and <b>, <em> and <i>?</i></em></b></strong>
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>
If you have a nested div within a div and they both have an id or class, how do you change the inner div?
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.
What is CSS and why is it used?
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.
What are the different types of CSS? (Inline, Internal, External)
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.
What is the difference between id and class in CSS?
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.
What’s the difference between relative, absolute, fixed, and sticky positioning?
How does the float property work?
What does the z-index property do in CSS?
How does the Internet work?
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.
What is Domain Name System (DNS)?
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.
What is the Box Model?
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.
What is HTML?
HTML stands for HyperText Markup Language. It structures web content and allows the inclusion of text, images, links, and other elements on the screen.
What are HTML tags?
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>.
What is the basic structure of an HTML document?
<!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>
What is the purpose of a DOCTYPE declaration in HTML5?
The DOCTYPE declaration in HTML5 is used to specify the document type and version of HTML that the web page is written in.
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., <div>.
An element consists of a start tag, content, and an end tag. For example, <p>This is a paragraph.</p> is a paragraph element.
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 <a href=”https://www.example.com”>Link</a>, href (hypertext reference) is an attribute specifying the URL of the link.
How do you create a hyperlink in HTML?
To create a hyperlink, use the <a> (anchor) tag with the href attribute specifying the URL.</a>
What are other ways to create a hyperlink in HTML?
-Through a form’s action attribute
- Through the use of buttons
- Through the <link></link> tag for attaching stylesheets and resources
- window.location
- <meta></meta>
- Using an image as a hyperlink
- Using <area></area> inside of <map> for clickable image maps
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.
What is the <title> tag used for?</title>
The<title> tagdefines the title of the HTML document, which appears in the browser’s title bar or tab. It’s placed within the <head> section.</title>
What is the purpose of the <img></img> tag in HTML?
The <img></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.
What is the difference between block-level and inline elements in HTML?
-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></img>.</a></span>
How do you create a list in HTML?
- Ordered List: Creates a numbered list using the <ol> tag.
- Unordered List:Creates a bulleted list using the <ul> tag.
What is the purpose of the <br></br> tag?
<br></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.
How do you create a hyperlink that opens in a new tab?
To open a link in a new tab, use the target attribute with the value _blank:
<a>Visit Example</a>
What is the <title> tag used for?</title>
The<title> tagdefines the title of the HTML document, which appears in the browser’s title bar or tab. It’s placed within the <head> section.</title>
What is the purpose of the <meta></meta> tag?
The<meta></meta> tagprovides 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.
How do you specify the character encoding for an HTML document?
The character encoding is specified using a <meta></meta> tag within the <head> section:
<meta></meta>
What is the difference between <head> and <body> tags?
<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.
</body></head>
What is the difference between the <b> and <strong> tags?</strong></b>
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.</b></strong>
How do you embed a video in HTML5?
HTML5 provides the <video> tag to embed videos:</video>
controls:Adds video controls like play, pause, and volume.
source: Specifies the video file and its format.
<video>
<source></source>
Your browser does not support the video tag.
</video>
How do you create an email link in HTML?
To create a link that opens the user’s default email client with a new message, use the mailto: scheme:
<a>Send Email</a>
What is the purpose of the <noscript> tag in HTML?</noscript>
The<noscript> defines alternative content to be displayed if the user’s browser does not support JavaScript or if JavaScript is disabled.</noscript>
<noscript>
<p>JavaScript is not enabled in your browser.</p>
</noscript>
What is the purpose of the action attribute in an HTML form?
The action attribute specifies the URL to which the form data will be submitted when the form is submitted.
What is the difference between the “id” and “class” attributes in HTML5?
id attribute
- Each
idmust 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.
What is the purpose of the “alt” attribute in HTML5?
To provide an alternative text or image or resource when the original source cannot be loaded.
How do you create a numbered list in HTML?
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>
What is the purpose of the <base></base> tag in HTML?
The<base></base> tagspecifies the base URL for all relative URLs in a document. It must be included inside the <head> section.
<base></base>
How do you create a definition list in HTML?
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>
What is the purpose of the enctype attribute in an HTML form?
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>
<!-- form elements -->
</form>
How do you create a hidden input field in an HTML form?
Use <input type=”hidden”> to create a hidden input field that stores data without displaying it to the user:
<input></input>
What is the purpose of the <address> tag in HTML?
The <address> tag is used to define contact information for the author or owner of a document or article.
What is the purpose of the <address> tag in HTML?
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></br>
Visit us at:<br></br>
Example.com<br></br>
Box 564, Disneyland<br></br>
USA
</address>
What is the purpose of the <canvas> element in HTML5?</canvas>
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>
<canvas></canvas>
What is the difference between <i> and <em> tags?</em></i>
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”.</em></em></i>
What is the difference between <b> and <strong> tags?</strong></b>
Both provide bold styling but <b> is non-semantic, while <strong> is semantic html which helps provide better accessibility and SEO.</strong></b>
How do you specify multiple language versions of a webpage?
To provide multiple language versions of a webpage, you can use the hreflang attribute in the <link></link> tag to specify the language of an alternate version. This helps search engines understand and serve the correct language version to users.
How can you include SVG graphics directly in an HTML document?
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>
<svg>
<circle></circle>
</svg>
What are data attributes in HTML, and how are they used?
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>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
Explain the purpose of the <template> tag in HTML.</template>
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>
<template>
<div>
<h2></h2>
<p></p>
</div>
</template>
JavaScript can then be used to clone and insert the template content into the document.
How do you specify multiple language versions of a webpage?
To provide multiple language versions of a webpage, you can use the hreflang attribute in the <link></link> tag to specify the language of an alternate version. This helps search engines understand and serve the correct language version to users.
<link></link>
<link></link>
What is the purpose of the <output> tag in HTML?</output>
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.</output>
What is the purpose of the <output> tag in HTML?</output>
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.</output>
<form>
<input></input> +
<input></input>
= <output>0</output>
</form>
How can you make an HTML element editable in the browser?
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.
What is the purpose of the <datalist> tag in HTML?</datalist>
The <datalist> tag is used to provide a list of predefined options to an <input></input> element, typically used to offer autocomplete suggestions.</datalist>
<label>Choose your browser:</label>
<input></input>
<datalist>
<option>
<option>
<option>
<option>
<option>
</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.
</datalist></option></option></option></option></option></datalist>
What is the order property in CSS? How does it work?
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.
What is the difference between align-self and align-items in CSS?
Align-items affects a whole container.
Align-self is for individual selectors.
Explain flex-flow property in CSS?
It is a shorthand combination of flex-direction and flex-wrap.
Ex. flex-flow: row wrap
What does align-content do in CSS?
It sets how multiple lines (or rows) are spaced apart from eachother. It uses the same property values as align-items.
What is the difference between align-content and align-items?
align-content determines the spacing between lines
align-items determines how the items as a whole are aligned within the container.
