HTML_Part_5 | Notion

HTML Id & Classes

HTML offers multiple ways to select and style elements. Two of the most commonly used selectors are IDs and Classes. This blog explores what they are, how to use them, and their differences.

An ID is an attribute, a unique identifier assigned to only one HTML element within a page. It is often used for unique styling and JavaScript manipulations.

<div id="myUniqueID">This is a div with an ID.</div>

The class attribute lets you give the same name to multiple HTML elements. That way, you can easily change their look or behavior all at once. Classes are not unique and can be assigned to multiple elements. They are generally used for applying the same styles or behaviors to a group of elements.

<div class="myClass">This is a div with a class.</div>
<p class="myClass">This is a paragraph with the same class.</p>

Pre Tag

The <pre> tag preserves the original formatting of text, making it an excellent choice for displaying code where spacing and indentation are key.
The <pre> tag maintains both spaces and line breaks, ensuring that text appears exactly as it was originally formatted.

<pre>
    <!-- code snippet in any programming language -->
</pre>

HTML Meta Tags

The <meta> tags in HTML provide metadata about the HTML document. Metadata is data (information) about data. <meta> tags always go inside the document's <head> tag and are typically used to specify the character set, page description, keywords, author, and other metadata.

<meta charset="UTF-8"> <!-- Character encoding -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design -->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- Internet Explorer compatibility -->
<meta name="description" content="This is a description of the web page"> <!-- Description for search engines -->
<meta name="keywords" content="HTML, CSS, JavaScript"> <!-- Keywords for search engines -->
<meta name="author" content="Your Name"> <!-- Author name -->

Explanation of each meta tag:

Character Encoding (charset): <meta charset="UTF-8"> sets the character encoding for the webpage. UTF-8 is the most common and recommended.
Viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0"> sets the viewport to scale the page to the screen width, useful for responsive design.
IE Compatibility: <meta http-equiv="X-UA-Compatible" content="ie=edge"> specifies that the page should be rendered using the latest rendering engine available on Internet Explorer.