la menu
<DCH/>
back

The Starting Point for All Webpages - HTML5 Skeleton Code

HTML5
6 min read

HTML Skeleton Code Snippet

The HTML skeleton code is the basic structure of an HTML document and provides a foundation for building web pages.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- header content is not seen by the user -->
  </head>
  <body>
    <!-- website content that will be displayed to the user -->
  </body>
</html>

Let’s break down the structure:

Document Type Declaration

<!DOCTYPE html>
...

The first line informs the browser that the document code is encoded in HTML format, specifically HTML version 5. This directive ensures compatibility across multiple platforms and devices by enabling browsers to accurately interpret and present the documents contents.

The <html> Tag

<html lang="en"> <!-- opening tag -->
  ... <!-- content in between -->
</html> <!-- closing tag -->

The <html> tag serves as the fundamental wrapping element that encompasses the entire webpage.

The lang attribute indicates the language of the webpage’s content to the browser. It accepts ISO standard language codes, which is a two letter language code such as 'en' for English or 'fr' for French, or the extended version which includes the two letter region code: 'en-us' for English (United States) or 'en-ca' for English (Canada).

The <head> Tag

The <head></head> element provides crucial information about the document (or metadata).

These elements include metadata such as title, authorship, keywords, character encoding, and viewport settings.

The metadata element may also contain information used in search engine optimization (SEO) by indicating relevant keywords or phrases associated with the webpage’s content for better visibility and ranking on search engine result pages (SERPs).

Additionally, the head tag can link CSS stylesheets or JavaScript files.

The Metadata

The <meta /> tag contains the essential details about an HTML document.

Meta Charset Attribute

<meta charset="UTF-8" />

The charset attribute describes the character encoding of the HTML document. UTF-8 is the only valid encoding for HTML5 webpages. This tag is standard and should be at the very top of head tag.

Meta Name Attribute

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

This meta tag provides information about the viewport for the document, and is used by the browser to set the size and scale. Here there are 2 values in the content attribute: (width and initial-scale) that are seperated by a comma.

width=device-width will set the initial width of the document to the width of the device.

initial-scale=1.0 will set the initial scale, basically in this case, 1px === 1px. (We will be looking at x === x later in the JS series. For now, just know that this is ‘absolutely equals’)

Meta http-equiv Attribute

note: This is just another example for the usage of a <meta> tag. You can safely skip this block, but this code may come in handy one day.

http-equiv describes a ‘directive or http response’.

<meta http-equiv="refresh" content="5; URL=https://google.com" />

Here the attribute http-equiv is giving the browser a directive to refresh in 5 seconds, and redirect to the new URL: https://google.com.

The Page title

<title>Document</title>

The <title> tag declares the title of the webpage. In this case the title is ‘Document’.

The text in the title tag will also be what appears in the tab of the webpage, and plays a crucial role in SEO.

The <body> Tag

The <body> tag contains all of the visual HTML code for the webpage, including text, images, links, and other HTML elements visible to users.

This is where all of the fun stuff happens.

Summary

This HTML skeleton provides a starting point for building web pages and can be customized by adding or modifying elements to suit the specific requirements of your website.

Continue reading the Web Development Intro series.