HTML 5, web design guide | Web design Mallorca

Welcome to our web design guide; chapter HTML 5.

Are you completely new to HTML? Then you can skip the information about the news in HTML 5 and start by reading the section “Get started with HTML 5”.

Introduction to HTML 5

What is HTML 5? HTML 5 is a code language you use when creating websites. HTML 5 is the new version of HTML 4.01. HTML 5 is still under development, but you can still use HTML 5 to create your website since modern browsers already support many of the languages’ most essential functions.

A feature in HTML 5 is the ability to do more things with the HTML -tag where you before needed a script. HTML 5 should function in the same way regardless of the platform, handle error/bug reporting in a better way and be better off without external plugins such as Flash.

New and simple Doctype

A Doctype is an instruction that tells the browser what version of HTML a website uses.
In previous versions of HTML, the Doctype has been long and difficult to understand. In HTML 5, there is only one Doctype written;

<!DOCTYPE html>

The Doctype is placed at the beginning of an HTML document before the <html> -tag.

New tags for structure

HTML 5 introduces many more tags to improve the structure and readability of code.
The <div> -tag has been used in previous versions to structure a website in different parts and sections. But since <div> is a pretty bland name, they have now introduced new semantic tags that make it easier to understand the structure of a webpage, and that improves the readability of the code for both humans and computers.

These are the new & most common tags for structure in HTML 5.

<head>
The header represents the top of something, such as the website, a section or an article.
Often there is a heading tag (e.g., <h1> or <h2>) inside the <head> tag. In addition to a title (and usually after the title), you can add a summary text or introduction for the article inside <head>. Other things you often add inside the <head> tag is the page menu (<nav> tag), a table of contents or the author’s name.
It is possible to have multiple <head> tags on the same page. For example, you can have a <header> for the top of the website where the logo is added and another <header> inside an article containing the title and author’s name.

<footer>
The <footer> tag is very similar to the <head> tag, with the difference that the tag refers to the footer (or end-notes) of an article or the website itself.

<nav>
The <nav> tag is an abbreviation for navigation and is used for a section of a webpage that links to other websites or webpages, often called a menu. Menus are usually at the top of the website or to the left or right of the content on a webpage. It is possible to have multiple <nav> tags on a page.

<article>
<article> tag is a tag used around a text that contains independent information and would do well even in places outside the home page it is on. This may be descriptive textual information about a service or product, a blog post, a blog comment or a forum post. The <article> tag usually starts with a section with a <head> tag.
<article> tag can be used multiple times on the same page.

<aside>
<aside> tag defines content that belongs to a section or article.
An excellent example of when to use the <aside> tag is for an information box with information related to the content of an article, e.g. an information box about the Colosseum inside a blog post about a visit to Rome.
You can also use <aside> tag outside of an article or text information. In this case, the content inside the <aside> tag should be related to the webpage that the tag is on. This is often used in a section with links to other relevant websites (commonly called “blogroll”) or a list of categories or advertisements relating to the content.

<figure> and <figcaption>
Images in magazines and books usually have a descriptive caption below them. For information articles and texts, this often looks good and increases readability. The Web has not been a neat way to replicate this. HTML 5 introduces <figure> and <figcaption> to accomplish just that;
<figure>
<img src =”https://webdesignmallorca.eu/wp-content/uploads/2014/10/Web_design_guide.jpg” alt=”Web Design Guide”>
<figcaption>Your amazing web design Guide</figcaption>
</figure>

<div> is still used
<div> tag is still used in HTML 5. But this tag should only be used when there is no more semantically correct tag available (such as <article>). You probably use <div> primarily as a container for other more semantically correct tags.
It is still common to use the <div> tag to enclose a webpage at the top after the <body> tag to make changes like the website’s width. This is still a good and well-approved way to use the <div> tag.
The <div> tag should be seen as “your wast way out” and should only be used if there is no other tag that is better to use.

New tags for Multimedia

HTML 5 introduces new tags for multimedia that dramatically facilitates the use of video and audio on websites.

<video>
In HTML 5, you should use the <video> tag. Before, you often needed external plugins to show a video on your website. In a <video> tag, you can display a movie in the browser without external plugins.
It’s hard to talk about videos on websites without mentioning YouTube. Google (which owns YouTube) knows that HTML 5 is the future, and there is a trial version of YouTube based on HTML 5 and <video>. This will eventually become the standard version when more people use modern, up-to-date browsers.
Here’s what the code may look like:
<video width = “320” height = “240” controls><source src = “movie.mp4″ type=”video/mp4”></video>

The “Controls” attribute adds controls to play and pause a video or adjust the volume.

<audio>
Before you often needed Flash to play audio. In HTML 5 you can instead use the <audio> tag. The code is similar to the <video> tag:
<audio controls><source src=”waves.mp3″ type=”audio/mpeg”></audio>

Get started with HTML 5

Websites consist of HTML tags. These tags are not that many and is quite simple to understand. A HTML tag starts with < and ends with >, like this; <html>

The absolute foundation of an HTML document looks like this:
<! DOCTYPE html>
<html>
<head>
<title>The title here</title>
</head>
<body>
content here
</body>
</html>

Explanation of tags:
DOCTYPE; tells the browser which version of HTML you’re using and must appear at the very top of the document.
HTML tag; represents the root of an HTML document and is a container for other HTML tags.
Head tag; can contain scripts, CSS and other things that do not belong to the content.
Title tag: gives your website a title in the browser toolbar and a name if someone adds your website to their favourites. It also sets the webpage title in search engines’ results.
Body tag: contains all visible content of the page, such as text, images and links.

The tags mentioned above are the ones that all HTML documents need to have.

When you start to add more information, images and other content, you need other types of tags to explain what your content is about and how it should be viewed:

<!DOCTYPE html>
<html>
<head>
<title>My web design guide for Mallorca businesses</title>
</head>
<body>
<h1>Welcome to my web design guide!</h1>
<p>I am a big fan of web design. There are so many things you can do. Try it out yourself!</p>
<img src=”image.jpg” alt=”Image for my web design guide”>
<p>If you want to check my other website, you can click here:</p>
<a href=”https://seo-iberica.com”>My other website</a>
</body>
</html>

Explanation of tags:
<h1> tag; is your Header 1, often your first-/top headline of a webpage.
<p>: stands for paragraph-tag and is used around the text paragraphs.
<img> tag: is your image (photo, picture). If the picture you want to insert is uploaded in the same folder as your HTML document, you can simply write the image name and file extension. “Src” is the source. “Alt” -tag is a great way to describe what the image represents since search engines can not see images.
<a> tag; inserts a link. The text between the opening and closing tags is the text that appears on the clickable link (anchor text in SEO). The “href” -tag specifies where the link should go. Do not forget to write https://!

Now you know the most important HTML tags. To format your content and to get an excellent structure and design for your website, you need to learn CSS. CSS complements HTML 5 and handles all your website’s formatting, structure and design.