We have talked about how to structure HTML site, with semantic markup, now we want to go a little deeper.
Which one is best?
Why is this good?
- Easier to develop with — you get some functionality for free, plus it is arguably easier to understand.
- Better on mobile — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive.
- 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.
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
- Browsing without a mouse - you need to browse a website with your keyboard until you get a new mouse.
- Decreace the laptop brightness (to save some battery life) - using light colors for the text will make it very hard to read when the brightness is decreased.
- Slow internet connection.
- Browseing the web while one of your hands is broken.
What can we do?
Here are some basics steps we can do to make the website accessible.
- Write semantic HTML markup.
- Use CSS to establish a look and feel for the website.
Attributes are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want
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
charset tells the browser what language the whole site is
Have you seen the little icon in the title? That is a favicon. You can use this code to this
alt tag on you images
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.
The id attribute is a unique identifier that is used to specify the document.
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.
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
More than one
You can give a HTML element more than one CSS class
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
Bookmark on another page
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.
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.
We need to learn more about links
A link text should explain clearly what information the reader will get by clicking on that link.
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.
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
Link to a phone
Links with ID
You can also link with the use of an ID on the site
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.
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)
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.