Basic HTML Document Structure - CONTENT | HTML - CSS - And Javascript for Web Developers

HTML Document Structure

If you want to write semantic markup – and believe us, you do want to write semantic markup – then you need to structure HTML documents properly. The html, head, and body elements have been part of the HTML specification since the mid 1990s, and up until a few years ago they were the primary elements used to give structure to HTML documents. However, the situation has changed dramatically in the last few years as HTML5 has added a slew of new tags that can be used to add rich semantic meaning to the structure of an HTML document.

HTML Document Structure Before HTML5

If you’ve been using HTML for any time at all you know that every bit of HTML needs to be wrapped in html tags. An opening <html> tag should appear first and a closing </html> tag should appear at the bottom of the document. Every other bit of HTML should appear between those two tags.

The head element is the first element to appear after the opening html tag. In the document head we place things like the page title and meta data, we add JavaScript to our page with the script tag, and we [link] to external stylesheets and other resources.

On most webpages the head element is a very busy place. For this reason, we’ve created a tutorial that explains the tags that typically appear in the head element and what these tags are used for.

All of the content that is visible on a web page is nested between opening and closing body tags. The body is the primary container of the content that makes up a web page.

Up until HTML5, that was pretty much it for basic HTML document structure. All of our code was dropped in between the body tags and styled with CSS. However, now that HTML5 has broad support among modern browsers, it’s time to implement the new HTML5 tags that will give our HTML documents a much more meaningful structure.

New Semantic Tags Added by HTML5

In this brief tutorial we’ll touch on all of the new tags added as part of HTML5 to define the structure and content of a web page. The elements we’re going to cover in this guide include:

header
main
nav
article
section
aside
address
footer

Using these elements isn’t as complicated as it might appear at first glance, and most are fairly self-explanatory. We’ll make a quick pass over each new element, and then draw up an HTML template you can use these new tags to add rich semantic meaning to your markup.

<header>

The header element is used to contain the content that appears at the top of every page of your website: the logo, tagline, search prompt, and possibly a navigational menu. In most cases, the header element is best positioned as a direct descendant of the body element, but it’s also ok to place it inside the main element if you prefer.

<main>

Use the main element between header and footer elements to contain the primary content of your web page. The main element cannot be a descendant of an article, aside, header, footer, or nav element. Instead, it should be a direct descendant of the body element. Think of it as the direct replacement for the div id="main" you’ve used in the past to wrap up your entire page contents.

It’s also ok to use more than one main element on a webpage. For example, if your blog homepage includes your five most recent posts, it would be appropriate to wrap each post in it’s own main element – or you could wrap each in article tags.

<nav>

Navigational menus are commonly placed at the top of a web page, in a sidebar, or in the page footer. Wherever you happen to place a navigational menu, wrap it in nav tags. Note that you don’t need to use nav tags for every link, just for blocks of links that provide either sitewide navigation or navigation for a specific part of a website.

<article>

If your website includes blog posts, articles, or any other content that could just as well appear on another website as syndicated content, wrap that content in an article post. You can use an article element just about anywhere other than nested within an address element, but in most cases an article element will be a direct descendant of a main element or of a section element that is a direct descendant of a main element.

<section>

The section element is used to identify content that is a major sub-section of a larger whole. For example, if you’ve posted a long-form ebook in HTML format, it would be reasonable to wrap each chapter in a section element. Likewise, if you have a sidebar (semantically wrapped in aside tags) that contains four sections – ads, a search prompt, related posts, and a newsletter signup form – it would be ok to wrap each of these four sections in section tags since a written outline of the sidebar contents would include a line item for each of the four sections.

There is some confusion about when to use a section and when to use a div. Here’s a good rule of thumb to help you know when to use each:

Use a div if you’re wrapping up some content purely to make it easier to style the content or to make it easier for some JavaScript to get ahold of it.

Use a section if you would list the content as an item when writing out an outline of the document.

<aside>

If your website contains information that isn’t directly related to the main content of the page, it would be appropriate to wrap that information in aside tags. For example, if you write a post that includes some technical terms, and you add definitions for those terms in a sidebar, it would make sense to wrap those definitions in aside tags. It is also common for the entire sidebar of a blog-type website to be wrapped in aside tags to make it clear that the sidebar is not part of the primary content of the page.

<address>

The address element provides contact information for the nearest parent article or body element that contains it. Use the address element inside an article to provide contact information for the article’s author. Use it outside of an article in the main or footer elements, or as a direct descendant of the body element, to provide contact information for the website’s owner.

<footer>

The footer appears at the bottom of a section of a document. Typically, the footer is a direct descendant of the body element, but it can also be used within a main element, a section, or an article. The most common use of the footer element is to place it at the bottom of an HTML document to contain things like a copyright notice, links to related content, address information about the owner of the website, and links to administrative things like privacy policies and website’s terms of service.

You may also use the footer element within an article to provide metadata about that particular article. For example, if article tags have been used to wrap a forum post, it would be appropriate to wrap copyright information and the date and time the post was made in a footer element and place it at the bottom of the article.

An HTML Document Template

The template below will show you how all of these elements are properly nested together. We invite you to copy it and use it as a boilerplate template for all of your HTML documents.

<html>
<!--Only the head and body elements are supposed to be direct descendants of the
html element. All others should be descendants of either the head or body-->
<head>
<!--The head element is a very busy place for most websites, so we've created
a tutorial to walk you through the different elements and tasks accomplished
in the head element. You can find it at the following address:
https://html.com/document/metadata/ -->
<title>Your Webpage Title Goes Here</title>
</head>
<body>
<header>
<!--The header typically includes your logo, tagline, and may contain a nav
element-->
<nav>
<!--The nav element isn't used for every single link but for navigational
menus-->
</nav>
</header>
<main>
<!--The main element cannot be used inside of anything other than the body
element. It is intended to hold the main content of the page.-->
<nav>
</nav>
<article>
<!--If your web page contains a blog post or news article it makes sense
to wrap the whole article in article tags-->
<aside>
<!--The aside tag can be used within an article or outside of it. It
is used to mark content that is related but not central to the main
content of the page-->
</aside>
<section>
<!--Sections are used to seperate major parts of an element, such as
chapters of an HTML ebook, or to cordone off the comments section
from the rest of the main element-->
</section>
<address>
<!--An address element inside of an article element is used to provide
contact info for the author of the article-->
</address>
</article>
<aside>
<!--The aside element would also be used to mark a sidebar if used
outside of the main element-->
<section>
<!--Within a sidebar you could use section elements to identify the
different parts of the sidebar. For example, you could put adds in
one section, related posts in a second section, and a newsletter
signup form in a third section element.-->
</section>
</aside>
</main>
<footer>
<!--The footer typically contains links to things like About Us, Privacy
Policy, Contact Us and so forth. It may also contain a nav, address,
section, or aside element.-->
<address>
<!--Put an address element in the footer and you're indicating that
the contact info within the element is for the owner of the website
rather than the author of the article.-->
</address>
</footer>
</body>
</html>

SOURCE: https://html.com/document/

_______________

HTML Basics: Elements, Tags, and Document Structure

HTML stands for HyperText Markup Language and is the basic structural element that is used to create webpages. HTML is a markup language, which means that it is used to “mark up” the content within a document, in this case a webpage, with structural and semantic information that tells a browser how to display a page. When an HTML document is loaded by a web browser, the browser uses the HTML tags that have marked up the document to render the page’s content.

There are three types of code that make up a basic website page. HTML governs the structural elements, CSS styles those elements, and JavaScript enables dynamic interaction between those elements.

HTML structure + CSS style + JS interaction = web page

Elements and Tags

HTML elements and tags work together to mark up content. HTML elements indicate the purpose of a tag and tags indicate the beginning and the end of an element.

For example, here is a simple paragraph in HTML:

<p>This is a paragraph.</p>

The letter “p” represents the paragraph element. In this example, <p> is an opening tag that tells the browser that the content that follows it is a paragraph. The slash in the second tag, </p>, indicates that it is a closing tag that tells the browser that the paragraph element is ending and that any content that appears after it is not part of the paragraph. You may encounter serious display issues if you don’t remember to “close” each tag because the browser will interpret this pattern as meaning that the element identified by the opening tag should continue for the rest of the page.

You can find a full list of all HTML elements at the Mozilla Developer Network HTML Element Reference Page.

Basic HTML Page Structure

A basic HTML page is a document that typically has the file extension .html, though HTML frequently appears in the content of other file types as well. All HTML documents follow the same basic structure so that the browser that renders the file knows what to do. The basic structure on which all webpages are built looks like this:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Homepage Headline</h1>
<p>This is a paragraph.</p>
</body>
</html>

When this code is rendered by a browser, it will look like this:

basic html page rendering in the browser

Doctype

The first line of code, <!DOCTYPE html>, is called a doctype declaration and tells the browser which version of HTML the page is written in. In this case, we’re using the doctype that corresponds to HTML5, the most up-to-date version of the HTML language. There are a number of different doctype declarations that correspond to various versions of HTML.

HTML Root Element

Next, the <html> element wraps around all of the other code and content in our document. This element, known as the HTML root element, always contains one <head> element and one <body> element.

Head Element

The HTML head element is a container that can include a number of HTML elements that are not visible parts of the page rendered by the browser. These elements are either metadata that describe information about the page or are helping pull in external resources like CSS stylesheets or JavaScript files.

The <title> element is the only element that is required to be contained within the <head> tags. The content within this element is displayed as the page title in the tab of the browser and is also what search engines use to identify the title of a page.

All of the HTML elements that can be used inside the <head> element are:

<base>
<link>
<meta>
<noscript>
<script>
<style>
<title> (required)

Body Element

There can only be one <body> element in an HTML document because this element is the container that holds the content of the document. All of the content that you see rendered in the browser is contained within this element. In the example above, the content of the page is a headline and simple paragraph.

Nesting

You might have noticed that I keep referring to HTML elements as “containers.” This is because proper “nesting” is a key part of writing HTML that will work across all browsers, will render all content, will be readable by screen readers, and will be able to be targeted by CSS and JavaScript. In terms of HTML, nesting means exactly what you’d think it might mean: each element goes inside another element, just like nesting dolls are physically “nested” within each other.

For example, the basic page structure we outlined above is valid HTML because each element’s opening tag has a closing tag and fully contain any other elements within it.

I’ve used HTML comments to label the example we’ve been using to show which tags are opening tags and which tags are closing tags, so you can see how each element is nested. In HTML, any content that is in between  is a comment that will not be rendered by the browser.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Homepage Headline</h1>
<p>This is a paragraph.</p>
</body>
</html>

Keep in mind that indentation is used by developers to help make sure that their HTML is nested properly and to ensure that all opening tags have a corresponding closing tag. Just like HTML comments, the browser will not display indentations in the code, these formatting patterns are there solely to help improve the readability of code.

The following version of the sample code is not nested correctly. Take a moment to look and find the nesting errors here.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<body>
</head>
<h1><p>Homepage Headline</h1>
This is a paragraph.</p>
</body>
</html>

There are two nesting errors in the previous example:

The opening <body> tag is contained within the opening and closing <head> tags.

The opening <p> tag in the <body> content is contained within the opening and closing <h1> tags.

This code actually will render in some browsers, but just because something renders doesn’t mean that the code is syntactically correct.

SOURCE: https://bethsoderberg.com/blog/html-basics-elements-tags-and-document-structure/

CAIG Center for Entrepreneurship

"We Turn Ideas Into Business"

HTML - CSS - And Javascript for Web Developers

Thursday, December 26, 2019

Basic HTML Document Structure - CONTENT