Web Development Course:
TL;DR – HTML examples are basic code snippets that demonstrate the usage of a certain functionality.
A Basic Code Example
To get started, let's see what a simple HTML document could look like:
<!DOCTYPE html> <html> <body> <h1>Heading</h1> </body> </html>
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.
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:
<head> <title>Document title</title> </head>
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.:
<body> <h1>Heading</h1> <p>Paragraph</p> </body>
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
<p>This is a paragraph.</p> <p>This is also a paragraph.</p> <p>This is yet another paragraph.</p>
Providing HTML Links
<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
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.
A Sorted List of CSS Code Examples: Master Styling HTML Elements
Easily accessible CSS code examples: CSS styles, borders, tables, buttons & more. Discover many CSS examples in this comprehensive CSS code example list.
HTML5 Tags List: Get to Know the Most Useful Elements
Find HTML5 tags explained and illustrated with beginner-friendly HTML5 examples. Grasp the difference between HTML5 tags & elements and learn to use both!