The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.In HTML 5, the declaration is simple:
<!DOCTYPE html>
2. Use of head tag
The head tag is an HTML element used to define the head section of an HTML document. The head section contains metadata, which simply means data about data. This means information in the head tag is not displayed on the page but the information is used by browsers and by search engines.
<title>: This element is used to define the title of the document, which is displayed in the browser's title bar and is often used by search engines to describe the page.
<meta>: This element is used to define metadata about the document, such as the character encoding, description of the page, keywords, and author.
<link>: This element is used to link to external resources, such as stylesheets or scripts, that are used to format or enhance the page.
<script > This element is used to define JavaScript code that is executed on the page.
<head>
head content goes here
</head>
3. Where to import js
1. At the end of the body
Placing 'script' tags at the end of the 'body' section is a common practice because it allows the HTML content to load first before the JavaScript is executed. This can improve perceived page load speed and ensures that the DOM (Document Object Model) is fully parsed before JavaScript code runs. However, scripts loaded here won't be able to manipulate elements that appear earlier in the document unless they wait for the DOM to be fully loaded.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</head>
<body>
<!-- Your HTML content here -->
<!-- JavaScript imports -->
<script src="script1.js">
<script src="script2.js">
</body>
</html>
2. In the head
While it's generally recommended to put scripts at the end of the body, there are cases where you might need to include scripts in the <head> section. For example, if your script needs to be loaded before rendering any content on the page, such as initializing analytics or setting up global configurations, then placing it in the might be necessary.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
<script src="script1.js">
<script src="script2.js">
</head>
<body>
<!-- Your HTML content here -->
<!-- JavaScript imports -->
</body>
</html>
3. Async or defer attributes
If you need to include scripts in the <head> for performance reasons but want to ensure they don't block rendering or delay the DOMContentLoaded event, you can use the async or defer attributes. These attributes tell the browser to load the script asynchronously or defer its execution until after the document is parsed, respectively.
Placing scripts at the end of the body means that the browser loads and executes the scripts after it has parsed and rendered the HTML content above them.
This approach ensures that HTML content is displayed to the user as quickly as possible, without waiting for scripts to be fetched and executed.
Scripts placed at the end of the body can still manipulate the DOM and interact with HTML elements above them.
However, scripts in this position may still block other resources (like images) from loading if they are large or take a significant amount of time to execute.
The defer attribute is applied to <script> tags and indicates that the script should be executed after the HTML content has been parsed, but before the DOMContentLoaded event fires.
Scripts with the defer attribute are downloaded asynchronously and do not block the parsing of HTML.
Multiple scripts with the defer attribute will execute in the order they appear in the document, but they will not necessarily execute in the order they are fetched.
Unlike scripts placed at the end of the body, scripts with defer are still able to access elements in the <head> section of the document.
Using defer allows you to keep scripts in the <head> section for better organization without sacrificing performance.
When a script with the async attribute is encountered, the browser will continue to parse the HTML document while the script is being fetched from the server.
Once the script is downloaded, it will be executed asynchronously, meaning that it will execute whenever it finishes downloading, regardless of the order in which it was encountered in the HTML document.
Scripts loaded with async do not guarantee any particular order of execution, so they should not rely on other scripts or DOM elements being available at the time of execution.
Multiple scripts with the async attribute may execute out of order, which can potentially lead to race conditions or other unintended behavior if scripts depend on each other.
Considerations:
While async can improve page load performance by allowing scripts to be fetched asynchronously, it's important to be cautious when using it, especially for scripts that have dependencies or need to execute in a specific order.
Scripts that rely on other scripts or on the DOM being fully loaded should generally not use the async attribute, as it may lead to unpredictable behavior.
For scripts with dependencies or those that need to execute in a specific order, consider using the defer attribute or placing the scripts in the desired order within the document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
<!-- JavaScript imports with async attribute -->
<script src="script1.js" async>
<script src="script2.js" async>
</head>
<body>
<!-- Your HTML content here -->
</body>
</html>
6. Custom Html tags
Define the Custom Element:
Create a JavaScript class that extends HTMLElement
Customize its behavior, such as setting its content or styling, inside the constructor.
Register the Custom Element:
Use customElements.define() to associate your custom class with a tag name.
Use the Custom Element:
In your HTML document, use the custom tag you've defined, just like any other HTML element.
The browser will recognize and render your custom tag, applying the behavior you defined in the class constructor.
7. diff inline and block.
Inline Elements:
Inline elements do not start on a new line; they flow within the content and only take up as much width as necessary.
Examples of inline elements include <span>, <a>, <strong>, <em>, <img>, and <br>.
Inline elements can be nested within block-level elements.
Block-level Elements:
Block-level elements always start on a new line and take up the full width available, pushing subsequent elements to a new line.
Examples of block-level elements include <div>, <p>, <h1> to vh6>, <ul>, <ol>, and <li>.
Block-level elements cannot be nested within inline elements; they can only contain other block-level or inline elements.
Padding:
Inline elements can have padding applied to them, but it typically affects the space within the element rather than around it.
Horizontal padding (padding-left and padding-right) can increase the space between the text and the edges of the inline element.
Vertical padding (padding-top and padding-bottom) may not have any visible effect on inline elements since they don't have a fixed height by default.
Margin:
Margins applied to inline elements may not behave as expected. Margins will not push adjacent inline elements away.
Instead, margins may collapse with adjacent margins or may not produce any visible effect at all, depending on the specific context and the layout of the surrounding elements.
Inline Block and Inline-table Elements:
Elements styled as display: inline-block or display: inline-table combine characteristics of both inline and block-level elements.
These elements can have padding and margins applied to them, and they respect the box model more similarly to block-level elements.
vHowever, they still flow inline within the content like regular inline elements.
7.1 what happen if we have div.flex and spans inside it. spans have height. will it take height.
Answer: any items inside flex will take flex items. Flex items have block properties
But: flex-center does take full height, which is due to stretch properties
8. replaced and non-replaced element
Replaced Inline Elements:
Replaced inline elements are those whose content is replaced by an external resource, such as an image, video, or form control.
The content of replaced inline elements is not directly rendered by the browser; instead, it is replaced by the content of the external resource.
Examples of replaced inline elements include <img>, <input>, <textarea>, <select>, <video>, <audio>, and <iframe>.
Replaced inline elements have intrinsic dimensions and are replaced by the content they contain. For example, an <img> element is replaced by the image it references.
Non-Replaced Inline Elements:
Non-replaced inline elements are those whose content is rendered directly by the browser without replacement.
The content of non-replaced inline elements is rendered as part of the document's flow, and it can include text, links, emphasis, strong emphasis, and other inline-level elements.
Examples of non-replaced inline elements include <span>, <a>, <strong>, <em>, <b>, <i>, <u>, <sup>, <sub>, and <br>.
Non-replaced inline elements do not have intrinsic dimensions defined by their content and are rendered as part of the surrounding text flow.
9. Box Model
In HTML, every element on a webpage is rendered as a rectangular box, and the box model is a way to represent and control the dimensions and spacing of these boxes. Here's an explanation of the box model components in HTML:
Content
Padding
Border
Margin
Inline element dont follow box model
Content Box: For inline elements, the content box wraps around the text or content it contains. The width and height properties affect the space taken up by the content, but they do not affect the layout of surrounding elements. Inline elements do not have explicit width and height by default; they expand horizontally to fit their content.
Padding, Border, Margin: Inline elements technically have padding, border, and margin properties, but they don't behave the same way as with block-level elements.
Padding: Padding can be applied to inline elements, but it affects the space inside the content box, not outside it. Padding will increase the space between the content and the border of the element.
Border: Border can be applied to inline elements, but it doesn't change the flow of content around the element. The border will wrap closely around the content without affecting the surrounding text.
Margin: Margins can be applied to inline elements, but they typically don't push other elements away or create spacing between adjacent inline elements. Instead, margins may collapse with adjacent margins or may not produce any visible effect at all, depending on the context.