The body is rarely styled, except for possibly a background. HTML has a number of invisible HTML elements that are used for structuring your content.
The HTML elements you have seen can be best described as content elements because they either marked up specific content – like paragraphs, lists, headings, or hyperlinks – or they add semantic meaning to the content – strong, em, i, or mark. But they don’t group together related items – all elements are pretty much independent of each other.
HTML provides a number of elements that allow styling without semantic meaning or grouping together related items.
Contents
span
The span element behaves very much like strong, em, i, ormark: it is inline and it can be applied to a bunch of text:
<p>This is some <strong>strong text</strong></p>
<p>This is some <i>italic text</i></p>
<p>This is some <span>span text</span></p>Since the span element has no styling applied, the text it encloses will use whatever style is applied to the p tag.
More importantly, the span element has no semantic meaning. Any styles you apply to a span are decorative – User Agents (browsers) will not infer anything special about that text.
All the colour coding used in these pages is done using span.
Consider:
.html-tag {
background-color: #FCFCFC;
border: 1px solid black;
border-radius: 5px;
padding: 0 3px;
}
.css-property {
font-size: 18px;
font-weight: bold;
font-family: monospace;
color: blue;
margin: 0 3px;
}When applied to the following text:1
<p>The paragraph is a common HTML element, it is
written <span class="html-tag"><p></span>.
</p>
<p>The eagle eyed will notice I use the CSS property
<span class="css-property">border-radius</span>
without having introduced it before.
</p>Results in the following output:
The eagle eyed will notice I use the CSS property border-radius without having introduced it before.
By default it is an inline element, although you can change this with the display property. You might change it to inline-block if you need to set its width or height. There is no need to change it to block because that is what div is for.
div
The div element is similar the span element, except that it is a block display element. Like the span element, it has no semantic meaning. It is widely used for grouping things together.2
Consider the HTML code used to display the output results above:
<div class="output">
<p>The paragraph is a common HTML element, it is
written <span class="html-tag"><p></span>.
</p>
<p>The eagle eyed will notice I use the CSS property
<span class="css-property">border-radius</span>
without having introduced it before.
</p>
</div>The styled paragraphs are contained inside a div block styled with the .output class.
Having a div as the first element inside the body is a very common programming pattern:
It should be obvious how this can be applied to the previous coding exercise – instead of styling the body element, you would style the .main class.
Before HTML5, many websites had the following basic structure (actually, many websites still use this basic structure):
<body>
<div class="main">
<div class="header">
This section contains the common information
found at the top of the every webpage.
Stuff like the site name and logo.
</div>
<div class="navigation">
This is the navigation bar. Sometimes is may
be included in the "header", other times it
is on its own.
If the navigation is common to all pages, then
it should go inside the "header".
</div>
<div class="content">
There are, typically, a lot of <div>s in this
section and quite a lot of complicated structuring
code.
</div>
<div class="footer">
This section contains the common information
found at the bottom of the every webpage.
Stuff like the copyright, privacy, contact,
legal terms, small print, etc.
</div>
</body>Using colourful visual styling, it looks something like this:
This acts as the outer container for all of the content.
This section contains the common information found at the top of the every webpage.
Stuff like the site name and logo.
</div>
This is the navigation bar. Sometimes is may be included in the “header”, other times it is on its own.
If the navigation is common to all pages, then it should go inside the “header”.
</div>
There are, typically, a lot of <div>s in this section and quite a lot of complicated structuring code.
</div>
This section contains the common information found at the bottom of the every webpage.
Stuff like the copyright, privacy, contact, legal terms, small print, etc.
</div>
</div>
</div>
By default it is a block element, although you can change this with the display property. With dynamic pages (using JavaScript), you might toggle the property between none and block to hide / reveal content. There is no need to change it to inline or inline-block because that is what span is for.
Centering Blocks Using margin: auto;
The easiest way to centre a block element is:
- give it a width and
- set the margin to auto.
This will cause the User Agent (browser) to calculate appropriate margins for the HTML element.
In general, the rules governing auto work like this:
- For inline items, the calculated auto margin is always 0px.
- For block items, the calculated top and bottom auto margin is always 0px.
- For block items with a box-sizing value of content-box with a specified width: if the total width of the content + padding + border is less than the width of the container it is in, then equal left and right margins will be applied. Otherwise the margins will be 0px.
- For block items with a box-sizing value of border-box with a specified width: if the total width of the element is less than the width of the container it is in, then equal left and right margins will be applied. Otherwise the margins will be 0px.
It is most commonly written as:
Some consider it better to use the 2 parameter version (the order is top and bottom, left and right):
You can also use it in the 4 parameter version (the order is top, right, bottom, left):
You can always apply top and bottom margins – if you like.
If a margin value is 0, it does not need the px suffix. This is true for all measurement units because: zero means zero.
Applying any of the above styles to a 200px by 200px div element (also styled with a green background), results in:
Vertical centering is more difficult because HTML elements automatically expand vertically to accommodate content. So, technically, there is no vertical centre of a block element. In future tutorials, we will look at vertically centering content.
Summary
- span is an inline HTML element you can use to style content without giving the content any semantic meaning.
- div is a block HTML element that is used to group together other elements. It has no semantic meaning.
- When laying out your HTML document, you should use a divide and conquer approach.
- Many HTML documents are divided into header, navigation, content, and footer sections.
- Applying the margin: auto style to a block element will cause it to be horizontally centred inside whatever container it is located – provided it is smaller than the container.
Playing Around
The best way to learn is to play around with what you have learned.
Take the webpage you wrote in the previous exercise and revise it so it uses div elements to structure and contain the content. Also apply the margin: auto style to the main container to centre the content. You should notice that when you resize the browser window, the document content remains centred (of course, if you make your browser window smaller than the content width it won’t remain centred).
Knowing about the span element, create a few custom styles and apply it to parts of your document. Experiment with different font size, weights, style, colours, borders, etc.
How would you create the following styles:
Create a space for people to in?
References
- You may have noticed I wrote <p> as the content inside the span. This is because in HTML, the angle brackets <> are used to identify HTML tags. This means that any time one appears, it is considered to be part of an HTML tag. It can never appear as text or content. To get around this limitation, there are a number of special HTML codes that can be used replace them.All HTML codes begin with an ampersand (&) and end with a semicolon (;). In between them is a short mnemonic. In this case lt and gt standing for less than and greater than.There are lots of codes, although most people only use a handful with < and > being the most common since they are they only way you can get the angle brackets to display in your content.You can see the whole list here. Note, the font used for the table is absurdly small.Another common code is & for ampersand (&).↩
- Don’t be shy about using the div element. As you will see, it is essential to divide and conquer!↩