arvb.net

HTML

3 min read

Text Elements

Header tags

Header tags are critical for semantic meaning: although we could style the entire paging with CSS, screen readers will often use h1, h2, h3, etc. tags to understand how the page is composed

Horizontal rules can be addeqd with <hr>

White space

Note that HTML pages will generally not honour whitespace defined in teh code. This is called “white space collapsing”.

If we want to add new lines, though, we can use <br> line breaks…
…that will insert the text on the next line.

Note that <br> tags can be used inside the same <p> tags and creates less line-spacing than

two consecutive tags.

Block level and Inline level elements

Block level elements, such as header and paragraph tags, create a return line at the closing tag. inline level elements, such as <em>, allow us to add elements inside a block to emphasize stuff.

Note that the <em> tag doesn’t need to be used to italicize - this we can define with CSS later - but it’s simply the default behaviour.

HTML Entities

Comments

HTML entities allow us to add a bit more information to our page. They are generated using the & symbol, such as <br>&nbsp; which gives us “Non Breaking Space” infront of the line break.

For example, if we wanted our name inside a few < and > symbols with a copyright sign, such as <<<Adnan Valdes>>> we would do the following:

<<< © Adnan Valdes >>> . Another useful entity is <abbr>, which gives us a small tooltip like interface. For example, <abbr title="Mozilla Developer Network">MDN</abbr>

Comments

Lists

ul and ol tags define unordered and ordered lists respectively, and each item in the list is then added with li tags.

A different type of list is a description list, specified with dl. Each item will have a dt - description term - and dd - description detail.

They can be styled with CSS.

Download files can be declared with an anchor tag and an href path, but we must include a download statement inside the tag: Download

Absolute references and new tabs

If we want to link to another page and make it open in a new tab we could do the following:

<a href="https://google.com/" target="_blank">Google</a>

Google in a new tab

Basic rules

  1. Avoid printing a full web address to the page - instead use a descriptive name inside href anchor tags
  2. Avoid “links to” phrases - we all know it’s a link.
  3. Keep link text short. Exact topic, no sentences.
  4. No links that say “click here”, since it provides no meaning at all

Graph View

Backlinks