5,838
edits
Webpage layout: Difference between revisions
m
→The next article to read ……
(new article) |
|||
| (10 intermediate revisions by 3 users not shown) | |||
|
Following on from the previous article on [[Stylesheets]] we are now going to consider the DIV tag, and to a lesser degree SPAN.
Before reading this you should be comfortable with the concept of Stylesheets (CSS).
[[file:Divlayout3.png]]
=Aside, Section, Article, Header, Main, Footer - the alternative HTML tags=
In HTML5, where you could use Div before, you can now use header, footer, aside, main, article or section. These were introduced because they are more meaningful terms.
<header> - this is used to group elements at the start of an article, aside, or section;
<footer> - this is used to group elements at the end of an article, aside, or section;
<aside> - this is used to group elements that are not an essential part of the content and typically appear to one side;
<article> - this is used to group elements that have a logical connection with each other, but are not essential to be related to the elements outside the article grouping, you can have several ''article'' elements and can nest them like ''div'';
<section> - this is very like 'div', it is a way of grouping elements, it can appear multiple times and be nested; it is often used when the grouped elements do have a connection with those outside the section grouping.
<main> - this is a special grouping tag, it can only appear once, it should not include any navigation links, header nor footer information; it is used to denote the part of a web-page that really matters, the bit you might choose to read first or have displayed when you first visit the page.
=Spans=
Spans are used far less frequently than Divs, because little else than text can be embedded within a span element, but worth a few moments ….
A span allows you to reference a
<pre><p>This text could be red</p></pre>
You will use 'span' rarely but it occasionally has a use.
=Float Warning=
Here is the complete source code, with the style sheet written into the HTML. Normally the Stylesheet would be in it's own file, as per the discussion on the previous article
=And finally=
So there we have it, <nowiki><div>, <section>, <article> etc.</nowiki> in a nutshell. You will learn to love
[[file:Divlayout6.png|200px|left]]▼
<pre><body>
<
<h1> some text </h1>
<
<h2> some text </h2>
<p> some text </p>
</header>
<
</
<
<section>
</div>▼
<h2> some text </h2>
other HTML
<section>
<section>
<h2> some text </h2>
other HTML
<section>
<footer>
</
</
To further develop the design, include
<pre><aside> some HTML content </aside></pre>
to add in information not directly related to the
<pre><main> some HTML content </main></pre>.
▲[[file:Divlayout6.png|200px]]
Your [[Stylesheets]] could position this to the right hand side of the content in 'main' for viewing on a monitor, but below it for narrower media when you print or view on some other devices. Have a look at the HTML used on those web-sites you like, as most browsers offer 'view source'.
= The next article to read …… =
Editing_content_of_a_webpage_using_either_HTML_or_Script. See [[Editing_content_of_a_webpage_using_either_HTML_or_Script]].
Original article [[User:Daj|Daj]] 18:07, 13 February 2011 (UTC)▼
Updated to HTML5 standard [[User:Sfws|Sfws]] ([[User talk:Sfws|talk]]) 23:41, 22 April 2015 (PDT)
▲[[User:Daj|Daj]] 18:07, 13 February 2011 (UTC)
[[Category:WebTips]]
| |||