The Purpose Of Span and ID Tags, and It's Uses

[IMMaximum]

As you may have seen my post before, I am going through the process of learning HTML, CSS, and JavaScript! So this one is about ID's and Span tags. So for ID's what is their purpose and why do we use them? I get they are an attribute, and I know they do something, but I don't know why, so could someone please help me out in that? Also for the Span Tag, I know what it does, but I have some other questions about it. OS far I know we use it to separate some text from other pieces of text, and how it doesn't change the outlook of the code if we use it by ourselves, and we can change things to the text within the span without affecting the things outside of it. But are there any other uses for the Span Tag, and any other parts of code we can use it in besides the Paragraph Tags? Thanks in advance to anyone who helps with this!

 

[cbreemer]

An ID is an unique name for an element by which you can address it in JavaScript, using document.getElementById(). If an element is not referenced in JavaScript, like s static piece of text, there is no need for an ID, but if it is, an ID is required (unless you want to write code to traverse the DOM and identify the element by some other characteristics).

A span is a way to mark up some part of a text. It is not restricted to use within a paragraph element, you can use it in any text element like <pre>, <code>, <h1>, etc. Of course you can do markup in HTML only but the advantage of a <span> is that you can give it an ID and then manipulate its contents and styling from JavaScript.

HTH

 

[Johna]

IDs are unique identifiers for elements. An ID should never be used more than once in a single HTML document.

Identifiers, including classes, are used in other languages like CSS and JavaScript to select those specific elements.
In CSS you would select one or more elements to apply styles to it, and in JavaScript, there would be many reasons to select an element, including interaction with, and manipulation of that element.


The span element is a generic element with no specific meaning, similar to the div element, but is instead an inline element. It can be used in most elements allowing children elements.
Here are some examples of how I would use it (with some CSS and JS):

<p>This is some text with <span style="text-decoration: underline;">underlines</span> and <span style="color: red;">red</span> colour.</p>

Output: This is some text with underlines and red colour.

<p>The current year is <span id="year"></span>.<p>   <!-- note the use of id to later select it in JavaScript -->
<script>
  const element = document.querySelector("#year");   // this selects the element with the 'year' id
  const year = new Date().getFullYear();             // this function gets the current year
  element.innerHTML = year;                          // the year is then put in the contents of the selected span element
</script>

Output: The current year is 2024.

 

[IMMaximum]

Ok, thank you, it makes much more sense now!