How to Organize HTML5 Text
Beyond their mandatory division into head and body sections, text in the body of an HTML document may be organized in any number of ways.
Inside the <head> section, you may (and probably should) define all kinds of labels and information, including a title. Such definitions help you describe the document that follows, including the character sets it uses, metadata for search engines and page descriptions, and instructions to the web server that delivers your page, default style sheets, page refresh behavior, and lots more.
(Note: Metadata literally means “data about data” — in this case, it means information about the web page that follows.) To find out more about the HTML <meta> element, please visit these sites:
w3schools.com HTML <meta> Tag page
quackit.com HTML 5 <meta> Tag page
W3C Working Draft HTML5: Edition for Web Authors page
The <body> section is where real content lives in HTML documents and where the vast majority of HTML elements and markup appears.
Headings in HTML are usually denoted using elements <h1> through <h6>. These are different from an HTML document <head> because they establish running heads within document content in the <body>.
The paragraph (<p>) element in HTML is probably the best known text container, but HTML supports all kinds of other text containers, too. Other such elements include the following (in alphabetical order):
<article>: Represents an article, a piece of standalone content.
<aside>: Represents content related to surround content that could stand alone.
<nav>: Declares the navigation section in an HTML document. This element is usually reserved for tabs, buttons, or links to access major site components.
<header>: Presents standard content or information at the top of a web page (banner, navigation aids, shared text, and so forth).
<footer>: Presents standard content or information at the bottom of a web page (copyright notices, minor navigation, feedback solicitation, and so on).
HTML also includes all kinds of ways to emphasize or identify text inside paragraphs or other text containers.
HTML supports easy definition of numerous kinds of lists, including bulleted (unordered) lists, numbered (ordered) lists, and even lists of definitions (which include terms and descriptions). You can nest lists within lists to create as many levels of hierarchy as you might need. (Nesting your lists is particularly useful when outlining a complex subject or modeling a table of contents with numerous heading levels.)
In addition to a variety of listing mechanisms, HTML includes markup for defining tables. Tables were really popular in the 1990s for managing complex page layouts; today they’re used primarily for tables of information, as they should be. Structure is part of how markup works, so within the definitions for an HTML table, you can
Distinguish between column heads, table data, and table footers or comments.
Manage how rows and columns are defined, with controls that let you span rows or columns for grouping and organization.
Cascading Style Sheets (CSS) markup
CSS markup may occur in separate style sheet documents, in a block of text inside an HTML document <head>, in a style attribute for an individual HTML element within the document body, or in some combination of all three forms.
CSS provides detailed control over font selection, use of color for text and backgrounds, positioning of text and other elements on a page, and (as the old Ronco ad intones) much, much more!
You can build a website without using CSS (using CSS requires more work), but it’s the right tool for precise control over look and layout. Highly recommended!