HTML - Justin Bentley

<p>

Paragraph.

Creates a paragraph ie with spaces above and below.

Index

<a>

anchor

Any string placed here will be displayed as a web link (url), blue color, underline on hover (by default). Requires a (hypertext reference) href="https://justinbentley.net" attribute to be a link that is clickable for the user. The href attribute can be written either absolutely https://justinbentley.net/Skillset/HTML (this page) or relatively /Skillset/HTML (for the same page) which looks like;

<a href="/Skillset/HTML" >/Skillset/HTML</a>

and the latter will use the domain that the user is on and this is important, say if I was to target a domain other than https://justinbentley.net or use a Testing version or in my current case https://localhost:44444/Skillset/HTML. This anchor tag can be wrapped around anything; div's, images or combinations of both.

Before the introduction of ImageViewer.js to provide a better view of my images I took the common solution of wrapping <img> tags in;

<a href="~/" target="_blank">

</a>

tags which has the effect of when an image is clicked (using the target attribute) a new tab appears with the image that is easier to zoom and potentially higher quality.

Another use for the anchor tag is to act a label that can be jumped (similar to goto) to, a common use is to place;

<a name="top"></a>

at the top of a webpage and use;

<a href="#top">Go to Top</a>

to allow the user to jump back to the top. Very similar to what I'm doing here with Index

Index

<pre>

Pre is a very useful element. It stands for Preformatted text.
Pre allows whitespace (spaces) and newline characters to be rendered as they are and not trimmed or removed, ie;

     with   <pre>     you
               can  
   do                 
         this..

<pre> is especially useful when you need to render newlines without rendering <html>. I use <pre> to render message's in the Visitor Log section.

Index

<div>

Div is really a positioning element to format the look of a website. Creating multiple div elements one after another will have the effect of blocks of data being rendered on the webpage being stacked one on top of the other.

The other benefit of div is that it creates an element where content can be displayed and a CSS styling class or alternatively style attributes can be attached.

Index

<span>

Span is the same as div although with one important difference. Span is a inline element whereas div is a block, this really means that span stacks horizotally whereas div stacks vertically. In other words div's stack vertically from top to bottom of a page (in their declared order) and for intents and purposes consume the entire line and the height required to fit the content stored within. Span's fit inside those div's (or not), going left to right and wrapping around from top to bottom only when the right edge of the page is reached.

Index

An iframe allows you to take a part of a different site and embed it into yours.
Ever seen a youtube player in the middle of someone else's site?, thats an iframe. A really good example of an <iframe> snippet can be found at youtube/share/embed.

Also, and perhaps luckily the <iframe> tag also accepts the loading="lazy" browser directive.

Index

Comment

Comments are used to document code and to sometimes provide a small explanation of a complicated routine or block of code or mark an area or leave a usefull note. Another strength of commenting is to disable some commands that may be useful in future as opposed to deletion.

Index

object body ie;

<article>

</article>

Index

<em>

emphasis

In literature, compared to italics <i> emphasis is used to accentuate a word such as a important describing verb. This separation is also important for accesability. Note that you can also override the visual style of<em>and alike in CSS.

Index

<i>

italics

In literature, compared to emphasis <em> italics are used to accentuate a word that is less important that a describing verb, for instance a Movie Title.

Index

strong

A similar analog to emphasis, more important than bold.

Index

<b>

bold

A similar analog to italics. Considered best practice to use only if italics are used for a different purpose.

Index

<sub> indicates_subscript

<sup> indicates^superscript

Index

list's

<ul> •••
<ol> 1,2,3

</ul> | </ol>

There are also definition lists <dl>

Index

quote

<q> = Inline (display) Quote
<blockquote> = Block (display) Quote

Designates a quote (a body of text someone else has said). Furthermore using <q> the browser will insert the region specific quote marks (" ",« »). <cite> (or cite="") can be used in combination to refer to the Author or Source.

Use of proper html tags serves accesability & readability
justin bentley

<blockquote><p><q></q></p><cite></cite></blockquote>

Index

<time>

Used for adding a time stamp.

To be machine readable the datetime attribute must be used ie
<time datetime="2021-10-30">October 30th 2021</time>

Index

<img>

image

Used to display an image on the webpage using the src attribute, for example;

<img src="~/Images/Uni/ICE/ice_comparator_hand.jpg">

A second attribute which is also important is alt which serves the function of reading text instead of showing the picture when accessed under accesability and lacking this has been known to penalise your SEO (Search Engine Optimisation).

Also the height and/or width attributes generally need to be used somewhere (be it style or CSS) lest the picture breaks out of the page dimensions and looks rather disproportunate, in other words to set or constrict the dimensions of the image within the page.

loading="lazy" (lazyloading)

Firstly what is lazy loading? Lazy loading is a directive sent to the browser, it instructs the browser to fetch images (and also <iframe>'s) from the server only when a user scrolls down to them. For instance you have a page with a hundred images stacked from top to bottom, you request this page and you see say the first three images on the top. Without using lazy loading all the other images in the background are being loaded (and you can notice this by the scroll bar gradually getting longer). This has the effect of consuming potentially unneeded data, deprioritizing the initially important images and increasing server load (both batch wise and continuously) among others. Conversely, using lazy loading with the aformentioned 100 <img> webpage the first three (or maybe to be safe five, determined by the browser) images will be loaded upon initialization and the rest of the images will be loaded on-demand one by one as the user scrolls down.

Whereas the paragraph preceeding lazy loading focuses on constriction, when using the browser command loading="lazy" (or alternatively not) there is another problem that needs to be addressed and that generally depends on the height attribute or more to the point a minimum height attribute. The problem is if you were to load a page consisting of a hundred images stacked top to bottom, upon loading the page if the images have no height value set their height will initially be assumed to be 0px and that would mean that all 100 images will be loaded at once.Furthermore, as they all load (in no particular order, figuratively speaking) the images will go from 0px to their file-height and elements of the page will progressively bounce all over the place.

Index

<picture> srcset

Using a combination of the <picture> and <source> tags and the srcset attribute you can use batches of different types of the same image (known in 3D Graphics as mip-maps) that have different resolution, aspect ratio and quality which can set to be chosen depending on the situation. Further investigation would be advised as the "mip-maps" can be created at compile-time and a function has to be written to accomodate it. I have not personally used this although I may in the future (hopefully soon) as I have a very valuable use case on another website that I run.
Nonetheless the syntax is as such;

<picture>

</picture>

Index

figure and figcaption represent the coupled relationship between an image and its caption.

<figure><img/><figcaption></figcaption></figure>

Index

Buttons can have a lot of important attributes such as;

onclick="AJavaScriptFunctionCanBeCalledHere(b)"

type="generally button"
Note that if type="button" is not included the button will submit the form.

Collapse;
data-target="#id_of_collapsable_element"
data-toggle="collapse"
Note that if the collapsable element has class="collapse" defined it will start collapsed.

Index

<input>

Input can have a lot of important attributes such as;

id ="the unique id of the element, usefull for targetting with JavaScript though can also be a unique id for CSS (using #id_name {color:blue;} syntax)"

name="can also be used to target in JS though more importantly the name links the value in the field to the variable name (in .Net) to the Model"

placeholder="can hold a value that disapears upon user input"

value="can hold a value that does not disapear upon user input"

type="mostly text but can also be date, email, phone, search, color, checkbox, radio etc, or even file, will also perform a level of validation for instance will check if an email entered has a @ character, a . and a top level domain (ie .com, or net). Also file has a new attribute accept="where you can accept only images or doc's" and using date the browser will provide a calender select day box and color will provide a color picker wheel."

type="hidden, can also be used to store a Model (or temporary View) variable accessable to JavaScript"

Note that due to its heritage<input> + does not require a closing tag ie </input> and therefore its syntax would be

<input id="input_tag" name="input_tag" value="" placeholder="enter input">

Index

A <fieldset> can encase <input>'s, for instance a <fieldset> of<input type="checkbox"> would create a multiple choice box, that we all know and love.

A <fieldset> can also contain a <legend> within its tags which will act as the title to the box

Index

Similar to <input> though a larger (scrollable etc) text box

can use additional attributes like rows="15" & cols="30"

Index

<label>

Represents a label (or text description) for a element such as an input, using the for="id_of_label" attribute. Can be useful to describe to the browser and/or frontend/backend the linkage of the <input>field. There are atleast three ways to use <label> one using for="", one not and one wrapped such as this, which is a reasonable implementation;

<label>

Email
<input>
name="email_address"
type="text"></input>

<label>

Note that having the </input> closing tag immediately after the input (or output) field on the same line can avoid a space being appended to the variable, and the IDE will probably "autocorrect" it.

Index

<table>

<tr> //table row

<th>Language</th> //table heading
<th>Type</th>

</tr>
<tr>

<td>HTML</td> //table data
<td>Frontend</td>

</tr>
<tr>

<td>C#</td>
<td>Backend</td>

</tr>

</table>

Index

<meta>

Meta is important and found only in the <head> element, meta itself is described as data about data.

The really important meta elements are;
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

The lesser SEO & Social Media based <meta> tags are;
<meta name="description" content="A guide on HTML">
<meta name="keywords" content="HTML, Tags, CSS, JavaScript, Guide">
<meta name="author" content="Justin Bentley">
<meta name="image" property="og:image" content="@ViewBag.OGImage">
Note LinkedIn requires listing property="og:image" or "og:description" after name for description and image (see linkedin post inspector for more).

Index

<br>

Carriage Return / Line Feed

Index

Common HTML Tags