Span and Id tags


#1

I am just learning the basics of HTML coding. I’m a little confused on SPAN tags and ID tags and what their uses are. From what I have seen you can use the ID tag to name a variable then use the variable in lets say CSS to change the style properties of a block of text. Is that right? I’m not sure how you would use SPAN.


#2

<span></span> is an inline element that can be used within a paragraph for wrapping another language, perhaps, or for special styling.

id is an attribute, not a tag, and it is used primarily as a hook so the page fragment can be linked to.

<div id="history">

</div>

and elsewhere in the page,

<a href="#history">History Section</a>

It can also be written into a URL,

<a href="http://www.example.com/index.html#history">History</a>

In CSS, an id selector,

#history {

}

has high specificity, 0 1 0 0 so its rules are quite important.


#3

I have seen span in my research used for special styling like making one word blue in a sentence within a

tag. What do you mean when you say wrapping another language?

For the id attribute, I just want to make sure I understand. The <div id="history"> </div> would surround a section of code like a <p> tag or an <img> and the <a href="#history">History Section</a> is a link that would take the user to that section of the web page. When its written into a URL it points the user to another website.
Do I have that right?


#4

See this post for an example: Why would we want to separate small pieces of content?

Correct. A division is a sectioning element for organizing and structuring our document. They represent the general purpose or role for the main sections, and act as containers for grouping or styling.

A typical essay will be straight forward to outline. Think of the content along these same lines. A well structured page presents as an outline. We use headings to present headlines, and with them there is a hierarchy.
Paragraphs are just as they would be in an essay, but the <p></p> element may be used as a block container of one or more <img>'s.

<title>Matching Page Headline to Page Title</title>
<h1>Matching Page Headline to Page Title</h1>
<div id="history">
  <h2>Headline For this Section</h2>
  <div>
    <h3>Headline for this topic</h3>
    <p>Topic text in paragraphs</p>
    <p>Topic text in paragraphs</p>
    <p><img src="images/picture.jpg" width="400" height="320" alt="picture of something"></p>
    <p>Topic text in paragraphs</p>
    <p>Topic text in paragraphs</p>
  </div>
</div>

Our style sheet can have generic rules (recommended) and can leverage the id attribute for more important rules that will only apply to that section. It has purview over all the elements it contains.

body {
  font-size: 100%;
}
p {
  font: normal normal 0.83em/1.3em Calibri, Calisto, Helvetica, Arial;
}
p img {
  display: block;
  float: right;
  width: 400px;
  margin: 0 0 0 1em;
}
#history {
  width: 90%;
  margin: 1em auto;
}

Yes. The element is a page fragment, and the attribute is the fragment identifier. If we were on another site and wanted to link not just to the page of this site but to that fragment, we would include the hashtag in the URL as illustrated above.

When linking to resources on one’s own site, we never write the domain URL, only the directory path URL.

<a href="/images/">Images Index</a>

would assume there is an images folder in the root directory of the site; and, that there is an index.html page in that folder. Study up on absolute vs. relative URL’s so I can spare you the grizzly details in this writing. I don’t wish to overwhelm you, but it bears learning and understanding.


#5

That makes a lot more sense. Thank you