Overview
When writing HTML, a primary goal should be to write consistent, clean code that anyone, including your future self, can go back to and easily understand.
HTML or HTM Extension
Creating your document with either the .html or .htm extension is acceptable and will be treated the same by the browser.
- index.html
- index.htm
Declare Your Document Type
Always declare the document type as the first line in your document.
<!DOCTYPE html>Each Page Should Always Have a Title Tag
The <title> tag defines the title of the page being displayed in the browser. It must be text only, and will be shown in the browser’s title bar or tab.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>Be Consistent with Upper or Lowercase
Although HTML5 is not case sensitive (P is the same as p, H1 is the same as h1), it is good practice to be consistent. We would advice sticking to lowercase for most things other than !DOCTYPE which is traditionally written in all caps followed by html written in lowercase as you can see below.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Close All HTML Tags
Although not always necessary, it is advised to close all tags. Some elements like the <img> tag are self closing ( < />).
<p>This is a paragraph and has a closing tag.</p>
<img decoding="async" src="/images/logo.png" alt="1SMARTchicken logo" />Attribute Values Should be in Quotes
Again, although not necessary, it is good practice to place all attribute values in quotes.
<p class="my_paragraph">This is a paragraph with the class attribute my_paragraph.</p>Images Should Always Have Alt, Width, and Height Attributes
The alt attribute is absolutely necessary as it will be used if the image cannot be loaded or if the viewer is using a screen reader.
The width and height being set keeps the page from jumping around as the image is loaded, which makes for a more pleasant experience.
<img decoding="async" src="/images/logo.png" alt="1SMARTchicken logo" width="400" height="400" />Use Indentation to Give the Code an Outline Structure
This makes the code easier to read, and helps to understand which elements are nested within other elements and which are siblings to other elements.
<div class="introduction">
<h1>My Heading</h1>
<p>My paragraph.</p>
</div>
<div class="chapter_1">
<h2>Chapter 1</h2>
<p>My paragraph.</p>
</div>
<div class="chapter_2">
<h2>Chapter 2</h2>
<p>My paragraph.</p>
</div>HTML Notes:
- In our HTML section the term “tag” and “element” are often used interchangeably to refer to both the tag used to create a page element and the element created by the tag (<p> tag = <p> element = paragraph on the page)
- HTML5 is not case sensitive; so <P> is the same as <p>, <H1> is the same as <h1>
- Global attributes can be used with all HTML tags and are therefore not mentioned on every tag page
- To write clean, readable HTML code, it is best to use indentation whereas elements within elements are indented (tabbed or spaces) to create something that looks like a project outline
- The browser will automatically remove any extra spaces and lines in your HTML code when the page is displayed
- Double quotes or single quotes can be used around HTML attribute values, but when the attribute value itself contains one form of quote, it will be necessary to use the other around the attribute
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.