Introduction to HTML

What is HTML?

HTML (Hyper Text Markup Language) is a series of tags that tells web browsers how to render, or display, a web page.

  • Created in 1989/1990
  • HTML describes the structure of Web pages using markup
  • HTML elements are represented by tags
  • HTML tags label pieces of content such as “heading”, “paragraph”, “table”, and so on


The Basic Structure of a Web Page

A simple HTML Document

HTML Boilerplate

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> Hold all the important behind-the-scenes information about your web page, like the title of your web page, and a links to a CSS style-sheets.
  • The <title> Stuff between title tags doesn’t appear on the web page, but you’ll see it in search engine results and browser tabs.
  • The <body> Everything that displays in the browser — header, navigation, images, content — goes between the body tags.
  • The <h1> element defines a large heading.
  • The <p> element defines a paragraph.

Comments in HTML

If you want to add a comment to your code that will not be visible in the user’s browser, you can add the text between these characters:

<!-- comment goes here -->

It is a good idea to add comments to your code because, no matter how familiar you are with the page at the time of writing it, when you come back to it later, comments will make it much easier to understand.


Commonly Used HTML Tags

_____________________________________

Headings

HTML has six “levels”of headings.

headings.html
Headings Result
<h1> is used for main headings.
<h2> is used for subheadings.
If there are further sections under the subheadings then the <h3> element is used, and so on ...

Paragraph

To create a paragraph,surround the words that make up the paragraph with an opening <p>and closing </p>tag.

paragraph.html
Paragraph Result

<strong>

The HTML <strong> element gives text strong importance, and is typically displayed in bold.

strong.html
Strong Result

<em>

The <em> element indicates emphasis that subtly changes the meaning of a sentence. By default browsers will show the contents of an <em> element in italic.

emphasis.html
Emphasis Result

<div>

The <div>element allows you to group a set of elements together in one block-level box.

For example, you might create a <div>element to contain all of the elements for the header of your site.


<span>

The <span> is used for grouping and applying styles to inline elements.

The most common reason why people use <span>elements is so that they can control the appearance of the content of these elements.


HTML Lists

_____________________________________

Ordered List

An ordered list starts with the <ol> tag. Each list item starts with the <li>tag.

Ordered List HTML
Ordered List Result

For example, the list might be a set of steps for a recipe that must be performed in order, or a legal contract where each point needs to be identified by a section number


Unordered List

An ordered list starts with the <ul> tag. Each list item starts with the <li>tag.

Unordered List HTML
Unordered List Result

Unordered lists are lists that begin with a bullet point (rather than characters that indicate order).


HTML Links

_____________________________________

Links are the defining feature of the web because they allow you to move from one web page to another — enabling the very idea of browsing or surfing.

You will commonly come across the following types of links:

● Links from one website to another

● Links from one page to another on the same website

● Links from one part of a web page to another part of the same page

● Links that open in a new browser window

● Links that start up your email program and address a new email to someone


LINKING TO OTHER SITES

<a>

Links are created using the <a>element which has an attribute called <href>. The value of the <href>attribute is the page that you want people to go to when they click on the link.

Users can click on anything that appears between the opening<a> tag and the closing <a>tag and will be taken to the page specified in the <href>attribute.

HTML
RESULT

LINKING TO OTHER SITES ON THE SAME SITE

<a>

When you are linking to other pages within the same site, you do not need to specify the domain name in the URL. You can use a shorthand known as a relative URL.

HTML
RESULT

If all the pages of the site are in the same folder, then the value of the href attribute is just the name of the file


Relative URLS

Relative URLs can be used when linking to pages within your own website. They provide a shorthand way of telling the browser where to find your files.

Relative Link Type

Opening Links In A New Window

target

If you want a link to open in a new window, you can use the targetattribute on the opening <a>tag. The value of this attribute should be <_blank>.

One of the most common reasons a web page author might want a link to be opened in a new window is if it points to another website. In such cases, they hope the user will return to the window containing their site after finishing looking at the other one.


Enjoy learning HTML & happy coding :)

Follow me on Twitter: https://twitter.com/23mmartins

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.