scattering clouds

How to create a mobile-responsive blank HTML page.

Sometimes I want to experiment with some HTML, CSS, or JavaScript code on my laptop and need to start with a blank webpage. A blank webpage that also needs to be mobile-responsive.

The boilerplate HTML code.

Here’s the template I use to get started:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>
			Boilerplate code for a blank HTML page. No layout or content, just the bare minimum to get started along with some basic CSS styling. Provided by ScatteringClouds.com.
		</title>
		<style>
			html, body {
				margin: 0;
				padding: 0;
			}
			
			html {
				font-size: 62.5%; /* Set 1rem = 10px */
				font-family: Arial, sans-serif; /* Web-safe font */
			}
			
			body {
				font-size: 1.6rem; /* Reset default font size back to 16px in rem */
			}
		</style>
	</head>
	
	<body>
		<!-- insert page content here -->
	</body>
</html>

Just copy the above code into an empty .txt file and rename it to a .html extension. This creates a blank webpage that can be opened locally in your browser.

To speed things up even more, you can grab my boilerplate HTML file directly from this download link.

A rundown of the HTML code.

All credit for the information below goes to W3Schools.com.

<!DOCTYPE html>

All HTML documents must start with a <!DOCTYPE> declaration. It tells your browser about the document type of the webpage.

The simple declaration above is used for the latest HTML 5 specification.

DOCTYPE declarations for older HTML specifications are much more complicated, because the it must refer to a DTD (Document Type Definition).

For example, the declaration for HTML 4.1 looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang=“en”> … </html>

The <html> tag represents the root element of an HTML document, and it acts as a container for all other elements in the document except the DOCTYPE declaration.

The lang attribute is included inside the <html> tag to tell browsers and search engines about the language of the webpage, which in this case is “en” for English.

The </html> tag simply acts as a closing tag for the <html> element.

Note: Most HTML elements require a closing tag, but there are a few exceptions, such as <meta> tags and the line break tag <br>.

The DOCTYPE declaration tells the browser about the document type, but is not an actual part of the document, so it doesn’t require a closing tag either.

The <head> element is placed within the root <html> element and comes before the <body> element. It is a container for metadata (i.e. data about data).

Metadata is used to define the document title, character set, styles, scripts, and other meta information. Typically, metadata is not displayed by the browser.

<meta charset=“UTF-8”>

The charset attribute specifies the character encoding for the HTML document.

The HTML 5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world, so that is what we choose to use in our boilerplate HTML code.

<meta name=“viewport” content=“width=device-width, initial-scale=1”>

The <meta> viewport element makes the blank HTML webpage responsive. It tells the browser how to control the page’s dimensions and scaling.

If you want to find out more about this element, I recommend you to go take a look at W3School’s article. It goes into detail about each of its attributes and what would happen without the meta viewport tag.

<title> … </title>

The <title> element defines the title of the document, and it is required for every single HTML document.

The title should contain only text, and the text will usually be displayed on the browser window or tab.

<style> … </style>

The <style> element tells the browser how to style and display the content within the <body> of the webpage. Styling instructions contained within the <style> tags are referred to as a Cascading Style Sheet or CSS.

CSS is a rather complex topic in of itself, and I recommend W3School’s CSS Tutorial if you want to learn more. While you’re at it, it might be worthwhile to learn about the 62.5% font size trick as well!

For the purpose of my boilerplate code, I prefer having the font sizes set in advance, but you’re free to delete this entire section and add in your own styles if you so desire.

<body> … </body>

The <body> element contains all the viewable contents of an HTML document, such as images and text. Everything that will be displayed by the browser goes into here!

The comment tag <!‑‑ … ‑‑>

The comment tag is used to insert human readable comments into the HTML code. It is ignored by the browser and will not be displayed.

Comments are mostly used to annotate your own code to make it easier for yourself and others to read and understand what is going on.

CSS comments are enclosed within /* … */, and can only be placed within <style> tags. JavaScript comments on the other hand can only be placed within <script> tags and comes in two forms: single-line comments begin with // at the very front of the line of code, whereas multi-line comments are also enclosed within /* … */.

<html>

	<!-- This is a HTML comment. -->
	
	<!-- HTML comments can span
	across multiple lines. -->

	<style>
		/* This is a CSS comment. */
		
		/* CSS comments can also span
		across multiple lines. */
	</style>

	<script>
		// Single-line JavaScript comment.
		
		/*
		  Multi-line
		  JavaScript
		  comment with
		  some spaces
		  added to
		  make it look
		  a little bit
		  funnier.
		*/
	</script>

</html>
back to top