HTML

Attributes

We have talked about how to structure HTML site, with semantic markup, now we want to go a little deeper.

Which one is best?

<div>Play video>/div<
Example 1.5.1
<button>Play video>/button<
Example 1.5.2

Why is this good?

  1. Easier to develop with — you get some functionality for free, plus it is arguably easier to understand.
  2. Better on mobile — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive.
  3. Good for SEO — search engines give more importance to keywords inside headings, links, etc. than keywords included in non-semantic <div>s, etc., so your documents will be more findable by customers.

Web Accessibility

It is important to give all user acces to use your website. It is not meant only to people with disabilities, we can all benefit from a website built with acessibility.

The issues we might face while browsing the web

What can we do?

Here are some basics steps we can do to make the website accessible.

HTML attributes

Attributes are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want

<p lang="en-US"> The is a paragraph in English </p> 
<html lang="da-DK"> Tekst på dansk </html>
Example: 1.5.3

by adding the lang attribute to the html element, are you telling the browser the document languange.

This attribute tells the browser what language the paragraph text is

<meta charset="UTF-8"> 
Example: 1.5.4

This attribute charset tells the browser what language the whole site is

<link rel="icon" href="pictures/favicon.png" type="image/png"/> 
Example: 1.5.5

Have you seen the little icon in the title? That is a favicon. You can use this code to this

<img src="img_girl.jpg" alt="girl">
Example: 1.5.6

Add a alt tag on you images

<meta name="viewport" content="width=device-width, initial-scale=1">
Example: 1.5.7

If you want your site to work on your phone, you must use this meta tag

ID and class

You can add classes and/or ID's to HTML elements. We do it, to help ourself then we work with CSS.

HTML

<section class="mySection">
<article id="onlyOneWithThisName"> ... </article>
<article id="thisIsAnotherID">...</article>
</section>
<section class="mySection">
....
</section>
<section class="mySection">
....
</section>
Example 1.5.8

HTML ID

The id attribute is a unique identifier that is used to specify the document.
It is used by CSS and JavaScript to perform a certin task.
There can only be one ID for on every site with the same name.

You use it if you have a single element on the page that will take the style.

HTML ID is like a serial number og CPR number. It is unique.

HTML

<section>
<article id="onlyOneWithThisName"> ... </article>
<article id="thisIsAnotherID">...</article>
</section>

CSS

#onlyOneWithThisName{
background-color: blue;
}
#thisIsAnotherID {
background-color: pink;
margin: 8px;
}
Example 1.5.9

HTML class

The class attribute can be used on any HTML element, multiple times. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.
You can have as many classes as you want on the same site.

You use it, if you want to consistently style multiple elements thoughout the page/site.
It could a collection of buttons in one section that need a speciel design, that you do not want have on every button.

Classes are like bar codes on products. There can be many of them. You can change the price thought the bar code, and you can change the design of elements though classes and CSS

HTML

<section class="mySection">
<article id="onlyOneWithThisName"> ... </article>
<article id="thisIsAnotherID">...</article>
</section>
<section class="mySection">
....
</section>
<section class="mySection">
....
</section>

CSS

.mySection{
background-color: blue;
}
Example 1.5.10

More than one

You can give a HTML element more than one CSS class

HTML

<p class="center design">This is a text</p>

CSS

.center{
margin: 0 auto;
}
.design{
background-color
}
Example 1.5.11

Bookmarks

Bookmarks can be useful if a web page is very long. To create a bookmark - first create the bookmark, then add a link to it. When the link is clicked, the page will scroll down or up to the location with the bookmark.

Bookmark on the same site

HTML

<header>
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#team">Teammembers</a>
</li>
</ul>
</nav>
</header>
<main>
<section id="team">
<h1>Teammembers</>
</section>
</main>
Example 1.5.12

Bookmark on another page

HTML (index.html)

<header>
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="products.html#pants">Pants</a>
</li>
<li>
<a href="products.html#t-shirts">T-shirts</a>
</li>
</ul>
</nav>
</header>

HTML (products.html)

<main>
<section id="pants">
<h2>Pants</h2>
</section>
<section id="t-shirts">
<h2>T-shirts</h2>
</section>
</main>
Example 1.5.13

Nesting

If you look at the HTML markup, you will see HTML elements inside other HTML elements. These elements that are "inside" the other elements are known as nested elements, and they are essential to building any webpage today.
You can see it as boxes that holds your content. The content can include tex, images or other media.

<section>
<h1>This is a heading</h1>
</section>
Example: 1.5.14

You are using nested HTML tags, because it helps you when working wih CSS. They rely on tags to be consistently nested within the document so that it can tell where styles begin and end.

Links

We need to learn more about links

Link text

A link text should explain clearly what information the reader will get by clicking on that link.

Click here
Read more
<a href="#">Click here</a>
Example: 1.5.15

Find out more about the HTML language

Read more about how to eat healthy

<a href="#">Find out more about the HTML language</a>
Example: 1.5.16

Links to mail or phone

If you have a email or phone and want it on the site can you use an attribute, which opens the users email program.
The mailto: is not recommended on public pages as robot harvesters will quickly lead to a lot of spam sent to the address.

Link to a mail

/*open the users mail*/
<a href="mailto:rdis@iba.dk">rdis@iba.dk</a>
Example 1.5.17

Link to a phone

/* Opens a dialog box with the number */
<a href="telto:00000000">0000 0000</a>
Example 1.5.18

Links with ID

You can also link with the use of an ID on the site

/*make an tag element with an ID*/
<h1 id="info">About this site</h1>
/*link to a ID*/
<a href="#info">infomation</a>
Example 1.5.19

Links with attributes

Links can have other attributes beside the style atribute.

Open the link in a new tab

When you have make a link to another site, will it by default opens in the same tab, but how and why should we prevent that?
When you open a link in a new tab the user will have 2 tabs open and that can confuse people who are using the site.
But if you are doing it, tell the user that it will open in a new tab.

target="_blank"
<a href="https://example.com/" target="_blank">A link (opens in a new tab)</a>
Example 1.5.20

Nofollow

Nofollow links are links with a rel=”nofollow” HTML tag applied to them. The purpose of the nofollow tag is to tell the search engines they should ignore that link. Because nofollow links do not pass PageRank they likely don’t impact search engine rankings.
You often use it, if you don't want the other site to get some SEO juice.
(Paid links should always have a nofollow link, because Google want all of your links to be earned)

rel="nofollow"
<a href="https://example.com/" rel="nofollow">A link to a site</a>
Example 1.5.21

But nofollow links do have some value, they gives you site trafic, because users do still click on it. Google has never rejected that they don't follow them.