My Website

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

A minimal base.html file to get your project started

sesh/base.html

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

base.html represents the minimum that you should include in your base template.

curl https://basehtml.xyz > base.html 

HTML Boilerplate is the gold standard of HTML base templates but I’ve always wanted something simpler.

We don’t need to force decisions about JS / CSS layout in our base template, you’re an adult — you can make those mistakes yourself. It should no longer be considered best practice to always include JQuery (or any third party JS / CSS). Plus, and this is awesome, if you’re using a modern SSL configuration you no longer have to worry about IE 10 compatibility (so no more ie css tags that you remove with JS).

This base.html project aims to be as minimal and un-opinionated as possible, including only things that would be considered best practice for 99% of web projects.

100%! No, but really, there’s nothing in the base.html that will break in any browser. What’s not included is code that specifically adds support for older browsers. Or really any actual code beyond a very simple base. That means there’s no CSS reset, normalize.css or modernizr.js — so if you want to support old version of IE you’ll have to include those yourself.

If you want to use HTML5-style markup ( , , , etc.) and still support IE9 you’ll need to include something like html5shiv .

Just include favicon.ico in the root of your site as recommended by Audrey Feldroy’s amazingly detailed favicon-cheat-sheet. I have a set of very small icons you can use in sesh/favicons (mostly to avoid the 404).

Sure. Use whichever one you want! You just have to include it yourself.

There’s a bunch of analytics options out there and Google provides one of them. Our aim is to not be opinionated so you’ll need to include your own analytics package (if you really want a recommendation you can support the creator of this template by using my referral code for Fathom Analytics).

Before committing please make sure that any changes pass htmlhint (with the default settings).

Favicon credit: Baseball Field by Ryan Choi from the Noun Project

About

A minimal base.html file to get your project started

Источник

Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project

When you are building a new website, it is important to have a good starting foundation. In this article, I will explain what an HTML 5 boilerplate is and how to create a basic template to use in your projects.

What is an HTML 5 boilerplate?

boilerplate code or just boilerplate are sections of code that are repeated in multiple places with little to no variation.

A boilerplate in HTML is a template you will add at the start of your project. You should add this boilerplate to all of your HTML pages.

Example of HTML 5 boilerplate

Let’s take a look at a basic example.

What is a doctype in HTML?

The first line in your HTML code should be the doctype declaration. A doctype tells the browser what version of HTML the page is written in.

If you forget to include this line of code in your file, then some of the HTML 5 tags like , < footer >, and may not be supported by the browser.

What is the HTML root element?

The tag is the top level element of the HTML file. You will nest the and tags inside of it.

The lang attribute inside the opening tag sets the language for the page. It is also good to include it for accessibility reasons, because screen readers will know how to properly pronounce the text.

What are head tags in HTML?

The tags contain information that is processed by machines. Inside the tags, you will nest metadata which is data that describes the document to the machine.

What is UTF-8 character encoding?

UTF-8 is the standard character encoding you should use in your web pages. This will usually be the first tag shown in the element.

A Unicode-based encoding such as UTF-8 can support many languages and can accommodate pages and forms in any mixture of those languages. Its use also eliminates the need for server-side logic to individually determine the character encoding for each page served or each incoming form submission.

What is the viewport meta tag in HTML?

This tag renders the width of the page to the width of the device’s screen size. If you have a mobile device that is 600px wide, then the browser window will also be 600px wide.

The initial-scale controls the zoom level. The value of 1 for the initial-scale prevents the default zoom by browsers.

What does X-UA-Compatible mean?

This tag specifies the document mode for Internet Explorer. IE=edge is the highest supported mode.

What are HTML title tags?

The tag is the title for the web page. This text is shown in the browser’s title bar.

CSS stylesheet

This code will link your custom CSS to the HTML page. rel=»stylesheet» defines the relationship between the HTML file and the external stylesheet.

Script tags in HTML

External script tags will be placed just before the ending body tag. This is where you can link your external JavaScript code.

Conclusion

You should add an HTML 5 boilerplate to each of your HTML pages. This starter code contains important information like the doctype, metadata, external stylesheets and script tags.

Источник

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.

Источник