HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python TL;DR – HTML examples are basic code snippets that demonstrate the usage of a certain functionality.
Contents
A Basic Code Example
To get started, let's see what a simple HTML document could look like:
Note: this is a very simple document with a few basic HTML tags. While it is fully functional, it does not have any decorations or additional information to it.
Analyzing HTML examples makes a great beginner exercise. However, even the simplest ones won't make much sense if you don't have a basic understanding of tags that are used to define elements. In the following sections, we will analyze the basic code elements seen in this example, plus a few more that are relatively common.
<!DOCTYPE> Declaration
The <!DOCTYPE> declaration helps a browser to understand and display your document correctly. We need it because there is more than one possible web document type to use. Doctype declaration is not case-sensitive:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>Describing HTML: Example
The <html> element defines an HTML document. Basically, while <!DOCTYPE> defines the whole page, <html> brings functionality to it:
<!DOCTYPE html>
<html>
<head>
<title>Name of the website</title>
</head>
<body>
<h1>Heading for the content below</h1>
<p>Text text text</p>
</body>
</html>HTML Head and Body: What's the Difference?
The <head> element is used to contain metadata which is not visible to the user. It's the most important information of a particular document. Metadata might be the title, scripts, or similar information:
The <title> element you see in the example above is used to provide a title for your document which helps search engines to find your website:
The <body> element describes all visible page content: text, videos, buttons, etc.:
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
Using HTML Headings
Headings make it easier to make your way through all the content. It gives the reader the primary information about the content of that particular part of the document.
To declare a heading, put its title inside of <h1>-<h6> tags. The lower the number of a heading, the bigger and more important it is:
<h1>Heading text - Level 1. Most Important Heading</h1>
<h2>Heading text - Level 2</h2>
<h3>Heading text - Level 3</h3>
<h4>Heading text - Level 4</h4>
<h5>Heading text - Level 5</h5>
<h6>Heading text - Level 6. Least Important Heading</h6>Defining HTML Paragraphs
To set space for a paragraph, you will need to use the <p> element. This element is created specifically for text and not anything else. See a simple HTML code example below:
<p>This is a paragraph.</p>
<p>This is also a paragraph.</p>
<p>This is yet another paragraph.</p>Providing HTML Links
Links redirect you from current page to another one. To create one, you will need to use an <a> element and attach a href attribute to it:
<a href="https://www.bitdegree.org/">This is a link to external website</a>Adding HTML Images
To add an image, you will need the <img> tag (img stands for image). You will also need to include a src attribute so your browser can figure out where to get the picture from. Take a look at the HTML code example below:
<img src="image.png" alt="JumpyDoggy" width="470" height="317">You can also use width and height attributes to define the dimensions of the image. Using alt, you may provide an alternative text to display if an image cannot be loaded. Screen readers that make the content available to blind or visually impaired users can also use it to represent the idea of an image.
HTML Example: Useful Tips
- You can try writing basic code in BitDegree's code editor which allows you to save your HTML code examples, providing it a shareable URL. Make HTML say 'Hello World' or think of something more unique!
- If you keep running into issues when writing basic code in Windows, you can try the HTML Help system developed by Microsoft.
