HTML Starter Template – A Basic HTML5 Boilerplate for index.html
Dillion Megida
HTML has different tags, some of which have semantic meanings. A basic boilerplate for an HTML file looks like this:
Welcome to My Website
In the rest of this article, I’ll explain what each part of this boilerplate means.
HTML Boilerplate Syntax
DOCTYPE
This element is the doctype declaration of the HTML file. tells the browser to render the HTML codes as HTML5 (as opposed to some other version of HTML).
This is important, because without this declaration, HTML5 elements like section , article , and so on may not be rendered correctly.
html tag
The html tag is the root of the HTML document. It houses the head tag, the body tag, and every other HTML element (except the DOCTYPE) used in your website.
It also has the lang attribute, which you can use to specify the language of the text content on a website. The default value is «unknown», so it is recommended that you always specify a language.
Defining a language helps screen readers read words correctly and helps search engines return language-specific search results.
head tag
The head tag houses the metadata of your website. These are visually invisible data to the user, but they provide information about your website’s content. Search engines especially use this data to rank your website.
Metadata in the head tag includes meta tags, title tags, link tags, scripts, stylesheets, and more.
meta tags
The meta tag is a metadata element used to add more metadata to your website than the kind that non-meta tags like title provide.
You can use these tags for various purposes:
- adding metadata for social media platforms to create link previews
- adding a description for your website
- adding a character encoding for your website
- and many more.
Search engines, social media platforms, and web services use this metadata to understand the content of your website and determine how to present them to users.
title tag
The title tag is used to specify a title for your website. Your browser uses this to display a title at the title bar:
This tag also helps search engines show titles for your website on their search results:
link tag
You use the link tag, as the name implies, to link to another document. Usually, this establishes different kinds of relationships between the current document and a separate document.
For example, as seen in the code block above, we’ve established a «stylesheet» document relationship with the styles.css file.
The most common use of this tag is to add stylesheets to a document and to also add favicons to a website:
A favicon is a small image close to the title of the webpage, as seen below:
body tag
The body tag houses the body content of a website, which is visible to users. Although non-visible elements like style and script can also be added here, most body tags are usually visible.
From headings to paragraphs to media and lots more, those elements are added here. Any element not found here (which could be included in the head tag) will not be shown on the screen.
main tag
The main tag specifies the essential content of a website. This would be the content related to the website’s title.
For example, a blog post page. The social media sharing on the left, advertisements on the right, header, and footer are minor parts of the web page. The post itself showing the cover image, the title, and post text content is the central part, which would be in the main element.
h1 tag
HTML has different heading elements which are h1 , h2 , h3 , h4 , h5 and h6 . Heading elements are used to describe different sections of a web page. And these elements have an order, with the h1 being the highest.
You should only have one h1 element on a webpage as this starts the main section. And then, you have other sections and subsections for which you can use the other heading elements.
Also, note that you shouldn’t skip headings. For example, you shouldn’t use an h4 element after using an h2 element. A good structure could be like this:
Welcome to my website
What do I have to offer
1. Financial Benefits
2. Society improves
a. Improving the tax system
b. Providing more refuse dumps
Who am I
Conclusion
From this code, you can see how the heading levels specify their position in sections and subsections.
Wrap up
In this piece, we’ve seen an HTML starter boilerplate and what each tag used in this template means.
This list of elements is non-exhaustive as many more elements can be found in the head tag and the body tag, with numerous attributes, too.
Hello, World!
Welcome to Learn HTML, the easiest way to learn HTML & CSS online, interactively.
Learning HTML & CSS is essential for any web developer, and does not require to know how to program using JavaScript.
Before you begin, I would recommend that you start out by downloading an HTML & CSS IDE. My personal preference is to use an IDE by JetBrains. You can download the PyCharm Community Edition for free, which has really good HTML, CSS and JavaScript development support built-in, along with all the goodies that a good IDE provides — source code integration, code refactoring, automatic indentation, syntax highlighting, comparison tool, etc.
Here is a list of HTML, CSS and JavaScript editors you can choose from:
- VS Code (free, recommended) — https://code.visualstudio.com/
- Atom (Free) — https://atom.io/
- JetBrains WebStorm (Commercial) — https://www.jetbrains.com/webstorm/
- Sublime Text (Commercial) — https://www.sublimetext.com/
- Notepad++ (Windows only) — https://notepad-plus-plus.org/download/v7.html
In this tutorial you won’t actually need an IDE, because all coding is done online.
Introduction
HTML (HyperText Markup Language) is a standard developed over the years to convey information over the internet by using «hyperlinks» — or just links as we know them today. As opposed to a PDF, an HTML page is much more dynamic in nature, letting you browse the web by clicking on links and interacting with the page. Links could take you either to a different location within the current page, or to a different page over the internet.
The last version of HTML is HTML 5.0, which has a LOT more capabilities than what the web originally had in mind. HTML 5 is an extremely comprehensive platform that allows creating a high-end user interface together with the power of CSS and JavaScript. HTML 5 is so powerful that it has managed to deprecate Adobe Flash, Microsoft’s Silverlight, and just about all HTML plugins such as video players, Java applets, and more.
So what is the difference between HTML, CSS, and JavaScript? First of all, they can all be encapsulated within an HTML page, meaning that the browser starts by loading an HTML page, and only then it knows what to load from there.
- An HTML page is an HTML document that defines the content of the page by using a special markup similar to XML.
- A CSS stylesheet defines the style of the HTML elements in the page. It is either embeeded within an HTML page or loaded using the
- tag.
- JavaScript is the programming language used to interact with the HTML page through an API called the DOM (Document Object Model) Bindings. In other words, the DOM Bindings are the glue between the programming language and the HTML page that was initially loaded into the browser.
The basics of this tutorial cover HTML and CSS. The advanced sections also assume knowledge in programming and JavaScript. To learn JavaScript, go to https://www.learn-js.org.
We will be using a CSS framework called Bootstrap by Twitter, the most common CSS library out there today. The basic principles of a CSS library is pretty much the same — they are all based on the «grid system», which is an easy way to define the layout of an HTML page — a methodology that was developed over the years in web development.
Your first HTML Page
Let’s start by creating a simple HTML page. An HTML page has the following basic layout:
Let’s start by creating a simple page that contains the phrase «Hello, World!» in the body. The page will also have a title — that thing that shows up in the title of the tab in your browser. The element defines the title of the HTML page.
The tag defines the document type that the browser is going to render. This is used for legacy reasons. If you want to get to the latest version of HTML (HTML5) then it’s recommended to use this tag.
The
element defines a «paragraph», a block of text that has a small amount of spacing in between its top and bottom.
Notice how the tags have a start tag and an end tag denoted with a slash (
). Everything in between is the content of the tag. The content of a tag can usually have additional HTML tags within them.
This is an example of a simple HTML page with one paragraph.
You may also copy and paste this code into a new file in your text editor or IDE, and save the file as «index.html». The «index.html» file is the default file that a web server will look for when accessing a website. After saving the file, you can double click it to open it with your browser.
Now that we know the basic structure of an HTML page, let’s try it out.
Exercise
- Add an HTML tag with the text «Hello, World!»
- Add a paragraph (
tag) to the body with the text «Hello, World!»
Simple index html page
A random photo. (The Hudson River at 125th Street about 2002)
Frank da Cruz
Updated in 2019 and 2021 for HTML5 and «fluidity».
CONTENTS
- Creating a Web Page
- HTML Syntax
- Special Characters
- Converting Plain Text to HTML
- Effects
- Lists
- Links
- Tables
- Viewing your Web page
- Installing your Web Page on the Internet
- Where to go from here
- Postscript: Cell Phones
You can create a Web page on your desktop computer but nobody can see it but you. If your want other people to be able to see your Web pages, you need an account on a computer that has a Web server. Nowadays most people have their own computers on their desks, but normally they don’t have Web servers and anyway you don’t want the whole world coming into your desktop computer to see your web page because (a) it’s not designed for that, and (b) who knows what else they might see. And (c) for security reasons, Web servers should be managed by professionals. Most institutions have big central shared computers for this purpose, which usually have a Unix-like operating system such as Linux. You need an account on one of these so you can put your web pages there. If you don’t have access to such a computer, you can get a low-cost account on a service like Panix.com.
You can still create Web pages on your own computer and look at them with your computer’s Web browser, but for other people to see them, you have to upload them to the «big» computer that has the Web browser. The rest of this document is about how to create your first Web page.
1. Creating a Web Page
This page was typed by hand. Anybody can do this, you don’t need any special «web creation» tools or HTML editors, and the pages you make can be viewed from any browser. To see how this page was made, choose View Source (or View Page Source, or View Document Source) in your browser’s menu (or — in at least Chrome and Firefox — Ctrl-U on your keyboard). A simple web page like this one is just plain text with HTML commands (markup) mixed in. HTML commands (properly called «tags») themselves are plain text.
When you’re just learning and want to experiment, you can do everything on your PC. Create a new directory («folder») for your website, and then put the web-page files (HTML plus any pictures) in it. Use NotePad or other plain-text editor (not word processor) on your PC to create your «home page», a file named index.html , which you can view locally with your Web browser. (You can also use a word processors such as Word or WordPad if you save in «plain text», «text», «text document», or «text document MS-DOS format».) Later I’ll explain how you can install your web site on the Internet.
Once you’ve made your «home page» (index.html) you can add more pages to your site, and your home page can link to them.
2. HTML Syntax
Web pages are written in Hyper Text Markup Language (HTML). HTML has three special characters: < , & , >. An HTML command is enclosed in <. >, for example
, which is a paragraph separator, or («begin bold») and («end bold»). So the following HTML text:
This sentence contains bold text.
A Web page starts with a series of HTML commands, and ends with a few more. The contents go in between: