Often the words 'element' and 'tag' are used interchangeably for HTML, but there is a subtle but important difference.
The word tag refers to the part of the code with the angle-bracket syntax, such as <div> or <a>, and is often used to describe the generic use of the tag. For example, one might say, "We use <a> tags to create hyperlinks." or "All <img> tags should have a src attribute."
The word element referes to a specific rendered HTML tag, including all of its nested content. For example, one might say, "This <nav> element contains many <a> tags nested inside of it." or "The company logo is nested inside that <header> element."
One of the key points to make using this vocabulary has to do with block versus inline elements:
Some tags are block by default (such as <div>), and some are inline by default (such as <a>). However, once they are actually used in a web page, those elements may be told by the CSS to change whether they are treated as block or inline. We will learn how to do that in a later unit.
Here's another key point about block versus inline elements:
Block elements are allowed to contain nested elements that are either block or inline. BUT inline elements are only allowed to contain nested elements that are also inline. We will see why this is true when we look at the features that make an element block or inline.
As an introduction, there are 2 key features that make an element a block-level element or an inline-level element.
First, their default widths are different. The default of a block element is 100% of their parent element. If you open the element inspector for this page, you can hover over elements to see their entire width highlighted on the page. For example, by default, the <body> fills the entire width (100%) of the browser, the <section>s fill the entire width of the <body>, and the <p>s fill the entire width of their parent <section>s.
On the other hand, the default width of an inline element is only as wide as it needs to be to surround its contents. Using the element inspector, hover over the <strong> tags to see the elements highlighted in the page, and notice that they are only as large as the text nested inside of the <strong> element.
Second, the behavior of their borders is different. The border of a block element wraps around the entire outer edge of the element, while the border of an inline element wraps along with the text. This will be shown in the next section below.
Using the element inspector, you can see that this <section> has the attribute id="workarea" and contains several paragraphs.
To select just the paragraphs inside this section, create a descendant selector
which reads #workarea p. To read this selector out loud, would would say,
"select all <p> elements that are nested inside of element with the ID workarea."
To add a new selector in the inspector, find the plus sign (+) icon in the CSS pane.
If you hover over the icon, the tooltip says "New Style Rule" and if you click on it,
you create a new selector. The inspector suggests a selector based on the currently
selected HTML element, but you can change it to #workarea p.
Inside this selector, apply a border using the border shorthand declaration
border: 1px solid #FF0000;.
Now, the <p>s in this workarea should have a thin, red border. Notice how the border fill 100% of the width of the section and wraps around each entire paragraph.
This paragraph contains three <strong> tags, including this short one. There is also a very long one in this sentence, which should wrap around to the next line (if the bold text does not wrap to the next line, you have some options: resize your browser to make it smaller; dock your Element inspector on the side and resize it; OR incrase the text zoom with CTRL/CMD and the + sign until the text is big enough to wrap to the next line). By default, the <strong> tag is an inline element, so its width is only as big as it needs to be to contain its text, and its border will wrap along with the text.
To test this, use the element inspector to add the selector #workarea strong
with the declaration border: 1px solid #000000;.
If you are having any trouble seeing the borders, go back to the #workarea p
selector and add the declaration line-height: 2; to make the lines
doubled-spaced for the paragraphs in this section.
Since there are only so many HTML elements, we can make lists of which ones we need, and also whether they are block or inline.
The list below contains some of the HTML elements that you will need to know for this course,
which may appear nested inside the <body> of a page.
We haven't actually studied all of them in detail yet.
However, you can inspect the <li> elements in the list, and
you will see that some have the attribute class="block-element",
so we can style them differently.
One way to annotate content using CSS is to apply a pseudo-element selector,
which gives us the ability to tack on a little extra text to the beginning or end of an element.
Use the selector .block-element:after to do this now, to the block elements listed.
Then add the declarations content: '*'; and color: #FF0000;.
This will apply a red asterisk to the end of the listed tags which are block-level.
The rest of the elements in the list are inline.
Borders can be applied to one side of an element at a time. This makes borders very useful for simulating underlines for short inline elements as well as dividing lines between block elements.
In this web page, each section begins with an <h2> element.
Using the element inspector, write a CSS selector that will choose those H2 elements
and apply the declarations border-top: 1px dashed #00AA00; and
border-bottom: 1px dashed #00AA00;.
You should notice that the lines created by these borders are the full 100% width of the sections, which indicates that H2 tags are block-level by default.
Check that you completed all steps in this activity, especially the ones that involved green-colored code samples.
When you are sure you completed all steps, click the button below. If it says that you missed any steps, try again.