Create HTML5 Links – How To

The ‘HT’ in HTML stands for Hyper Text. It’s the idea that your document can link to other documents, and vice versa. This is why we create HTML5 links. The following will explain how to create HTML5 links.

The ability to create links was very exciting when it was first introduced because the linking of many documents allowed for information to flow more freely.

To create HTML5 links you will use the <a> tag with an href attribute. Here is an example:

<a href=”www.google.com”>Go to Google.</a>

Notice the href attribute is inside the opening tag.

Watch a 3.5 Minute Video Tutorial to Create HTML5 Links


If you edit multiple <a> tags you will need to put ‘&nbsp;’ between your tags. Why? Because even if you have space in your text editor, your browser will ignore this ‘whitespace’. Inserting ‘&nbsp;’ between tags forces your browser to put a visible space between your links. It stands for non breaking space.

If this post was helpful, then you might enjoy this post about CSS3 link styling.

Simple HTML5 Tags to Start With

Open the text editor of your choice (such as Notepad++ or Sublime), and you can start editing with some simple HTML5 tags.

These examples will use HTML5.

What is HTML5? HTML5 is the latest finalized standard of the HTML markup language that is used to structure content on the World Wide Web. It was standardized on October 28, 2014. You can read more about HTML5 on Wikipedia.

Start with Simple HTML5 Tags


You can create a main heading as follows:

<h1>This is a main heading</h1>

 

Because you used the <h1> tag, your browser will interpret this with large bold text, which is what you might expect for a main heading.

You can practice using simple HTML5 tags for free, and interactively on the W3 Schools HTML5 Tutorial.


Conceptually, you use tags to structure your page, and your browser can default to a format, like the  large bold text you see for a main heading.

A smaller heading could be edited as follows:

<h2>This is a sub-heading</h2>

 

Note that there is an opening and closing tag.

If you wish to change the default formatting that your browser interprets, then you will need to learn CSS3 font styling. CSS is used to style the appearance of a web page.

A paragraph would be created as follows:

<p>This is the text you will see in a paragraph</p>

 

There are many more types of tags you can use. These were examples of marking up text. Note, the ‘ML’ in HTML stands for markup language.

Continue with more HTML5 tags, and learn how to create links with HTML5.

HTML Introduction and World’s First Web Page

HTML stands for Hyper Text Markup Language.

HTML uses angular brackets for the markup tags. These tags tell the computer how to display the content. Content is different from appearance.

CSS is used in tandem with HTML to control the style of the content.

HTML files are commonly saved with .html extension. Sometimes you will see them saved as .htm, but not as often.

The world’s first web page was written in HTML. You can see how straightforward the content is displayed. Everything you see is the default structure used by HTML, i.e., the size of the headings, the blue links. There is no styling to change the appearance, and there is no interactivity to the page. It is strictly HTML.

HTML5 is the latest industry standard for editing in HTML.

Get started fast with HTML, this W3 Schools tutorial is a great resource, with interactive examples.

Get a Free Text Editor

You need a text editor to write HTML.

Here are some popular choices:

If you have Mac you can download TextWrangler.

If you use Windows you can download Notepad++ or the increasingly popular Sublime Text download. Sublime text is also available for Mac or Linux machines.

Do not use word processing software such as Microsoft Word or Google Docs for writing HTML. It causes extra formatting to be put into your code, and you will end up using a text editor to get rid of it. So it’s best to choose from one of the simple text editors described above.

It’s also important to note that while HTML5 is intended to be cross browser compatible, you should still check your pages to see how they will look in other browsers. For example, you might use the popular Chrome, but someone else might use Mozilla. Always check how your page will look in different browsers. Do not expect uniformity.

Knowing how to code well in the latest version of HTML is a web development skill that any good developer should know.

Web Development Basics You Should Know

Web Development Basics 101

A laptop is an example of the client side of computing. The laptop is what the end-user is looking at. A mobile phone or tablet are other examples of client side.

Data centers with stacks of computers, or one high performance desktop could function as a server.

The server host pages that it can send to the client.

These computers are part of an interconnected network of computers, commonly called the internet. The world-wide web, or the web, is the information that sits on the internet. There is a difference, albeit subtle, between the two terms.

A URL is what we type in our browser to find a web page. URL stands for Uniform Resource Locator.

Our browser renders web pages so we get the full effect of seeing the links, headings, colors, images, etc.

View The Source Code

You can also view a page’s source code. This is the plain text that programmers used to edit how the page is rendered in the browser. For example, go to any web page you frequent. If you are using Chrome as your browser, click on developer tools, and then click on view source code. This will open a window with the source code. Becoming comfortable with viewing source code is an important part of web development basics.

A modern web developer should know how to display content on a page, how to make it look good, and how to make it interactive. HTML is the language used to build the structure of its page. CSS is used to style its appearance. Finally, JavaScript is used to make the page interactive.

Why You Should Use HTML5 and CSS3

HTML5 and CSS3 are the most up to date versions of the markup and styling languages. It’s important to use these versions so the web page will function well on all browsers, and on different size mobile devices. A mobile responsive site can help reduce bounce rate as you increase organic traffic.

Web development basics also tell us that since a huge percentage of searches are done on mobile devices, web pages should be responsive to different screen sizes, thus providing a good user experience.

If you are ready to start learning how to code in HTML5 and CSS3, then try the free and interactive tutorials on Codecademy.