HTML Guide

By Multichannel

What is HTML?

HTML is the standard markup language for creating Web pages.

  • HTML stands for Hyper Text Markup Language
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements are represented by tags
  • HTML tags label pieces of content such as “heading”, “paragraph”, “table”, and so on
  • Browsers do not display the HTML tags, but use them to render the content of the page

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Example Explained

The <!DOCTYPE html> declaration defines this document to be HTML5

The <html> element is the root element of an HTML page

The <head> element contains meta information about the document

The <title> element specifies a title for the document

The <body>element contains the visible page content

The <h1> element defines a large heading

The <p> element defines a paragraph

 

HTML Tags

HTML tags are element names surrounded by angle brackets:

<tagname>Content goes here…</tagname>

  • HTML tags normally come in pairs like <p> and </p>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, but with a forward slash inserted before the tag name

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example:

HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

Example:

HTML Links

  • HTML links are defined with the <a>tag:

Example

<a href=”https://www.scottishfinegifts.com”>This is a link</a>

The link’s destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

HTML Images

The <img> tag defines an image in an HTML page.

The <img> tag has two required attributes: src and alt.

Src: defines where the image is being referenced from.

Alt: Is a description of the image and is used for SEO purposes or if, in case the image fails to load, the user knows what’s supposed to be shown.

Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.

How to insert an image:

<img src=”img/imageName.jpg” alt=”Description of the image” >

Example:

 

Div Tag

The <div> tag defines a division or a section in an HTML document.

The <div> element is often used as a container for other HTML elements to style them with CSS.