HTML Page and Text Layout
In order to add content to your page, set up your file with some basic structure. First, use tags to identify information about where parts of your page start and end.
Use first set of tags, <html> and </html>. The act of placing a set of tags around content and other code is often referred to as wrapping what is between the tags.
The markup for an HTML5 document is similar to the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>Head
This is where you put information about the page itself (called metadata) and where you connect to any other resources like scripts and files.
Body
All of the content that you want to have on the screen should be encompassed by a set of body tags.
Header, Footer
The header and footer tags are new in HTML5. They were added due to the volume of sites that define a top and bottom section to their pages. Allowing these tags makes it easier to define and find those parts of the layout. The header and footer should be nested within your body tags, but are not a requirement.
Div, Span
Div stands for divide - it defines a section of content that should be treated as separate from other content. Span is very similar to div, except that it should identify inline content, meaning material that is within a block of text. A div will place a line break before and after its tags, while a span will not.
<body>
<header>
<h1>This is our first page! </h1>
</header>
<div id="left">
some menu items
</div>
<div id="content">
Hello World
</div>
<div id="right">
some content on the right
</div>
<footer>
© year, Your Name Here
</footer>
</body>Paragraphs
You can break a long section of text into paragraphs. You can wrap in a set of paragraph tags, <p></p>. Using the paragraph tags allows to automatically add spacing around your content to separate it from the rest of the page.