You've made it this far, now shit gets real.
The whole point of HTML is to give your content structure, but when used in conjunction with CSS it helps layout your page. Two useful tags for layout are the div and span tags. They are generic tags useful for laying out content. If we think of different HTML tags like different kinds of cases, an anchor tag would be a guitar case, perfectly designed for what it holds. A paragraph tag would be a shoe box, useful for stacking and organizing. Whereas a div tag would be a big cardboard box. Immensely useful, but has its drawbacks. You might remember what’s inside if you label it, but a lot of junk can get thrown in. Span tags are like plastic wrap. They don’t hide, or change the shape of what they’re holding at all.
Divs are used a lot in web design, mostly to enclose a bunch of HTML and then give that area an id or class attribute. Those can both be used as selectors to apply some CSS.
Spans are used for smaller bits of html, and they are “in-line”, while divs are block level elements. Which basically means it separates itself from the content above and below it, while the span acts like nothing happened and things go on as usual. Like this:
It’s been common practice to use divs to create a page layout, where you add id’s to divide elements on the page, like header, content, and navigation menus. But it’s still just a bunch of divs at the end of the day. In HTML 5, semantic tags were introduced to help create layouts with more meaning. It’s like when a girls says something, but you don't really know what she means, that’s how it used to be with divs. But now, with HTML 5, you know tags mean what they say. Don’t you wish girls were like that?
For example, in HTML 5 there is a header tag, which would replace something like div with an id attribute of header. A few more new tags are nav, section, aside, footer and more. Here's a list of layout elements:
| Element | Description |
|---|---|
<address> |
The HTML Address Element (<address>) should be used by authors to supply contact information for its nearest <article> or <body> ancestor; in the latter case, it applies to the whole document. |
<article> |
The HTML Article Element (<article>) represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable, e.g., in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, or any other independent item of content. Each <article> should be identified, typically by including a heading (h1-h6 element) as a child of the <article> element. |
<body> |
The HTML Body Element (<body>) represents the content of an HTML document. There can be only one <body> element in a document. |
<footer> |
The HTML Footer Element (<footer>) represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents. |
<header> |
The HTML <header> Element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on. |
<h1> , <h2> , <h3> , <h4> , <h5> , <h6> |
Heading elements implement six levels of document headings, <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically. |
<hgroup> |
The HTML <hgroup> Element (HTML Headings Group Element) represents the heading of a section. It defines a single title that participates in the outline of the document as the heading of the implicit or explicit section that it belongs to. |
<<nav> |
The HTML Navigation Element (<nav>) represents a section of a page that links to other pages or to parts within the page: a section with navigation links. |
<section> |
The HTML Section Element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each <section> should be identified, typically by including a heading (<h1> -<h6> element) as a child of the <section> element. |
If your HTML page starts to get big you’ll want to leave a comment. Especially for where tags end. To leave a comment, start with an angle bracket, then an exclamation point, then two hyphens, the comment, and then the first part in reverse.
Comments are a good habit to get into, you know, like showering daily, and watching code babes videos.
If you really want to get into laying out a page you'll need to learn some CSS, but we wanted to give you a quick overview.
So, you’re almost done with HTML, just one more lesson, hope you can finish.
Questions or Comments?