Html Syntax

HTML Syntax

This page has details about HTML syntax and tags. It covers basic tags such as HREF, CheckBoxes and RadioButtons.

Back to HTML TOC

Anchors and HREFs

You can use the Anchor tag to create a hyperlink. By clicking on a hyperlink, a user can navigate to:

The top of a new page
A specific location in a new page
Or a new location in the current page.

Here is a hyperlink tag:

About

It begins with an a. The a stands for the word anchor.

It contains an HREF attribute. This attribute is used to specify the location to which the link leads. This location is called the link target. When the user clicks on the link, they are taken to the location specified in the HREF. For instance, the following hyperlink takes you to the Google home page:

Google

The text displayed to the user is found after the angle bracket, and before the closing anchor tag. In the above tag, that word is Google. In the previous tag it is About.

Consider this tag, which leads to the Elvenware home page:

Elvenware

It contains a target attribute, which means the link will open in a new tab. Here is how the tag looks in practice. Click on it if you wish:

Elvenware

Look at this line:

Contact

It has two parts:

The list items: <li>...</li>
The anchor: <a href="#contact">Contact</a>

The href attribute creates the link to the location you want to launch. In this case, it begins with a # sign. That means it links to a location in the current document. You can designate such locations by using the ID tag:

Contact

Here, for instance, is a link that leads to the beginning of this section of this document.

Anchors and HREFs

Here is a link to some detailed information on this subject:

Information about Fonts

Here you can find information about fonts in HTML and CSS.

Sizing a font

You have multiple ways to size a font.

px: How many pixels?
em: What multiple of the current default font size.
percent (%): What percentage of the current default font size.
keyword: xx-small, x-small, small, medium, large, x-large, xx-large

More information

Unicode Characters

Escape special characters like this:

To - と
Ha - は

Which yields:

To - と
Ha - は

Or:

To - と
Ha - は

Meta Tags

Meta tags <meta> go in the header and will not be displayed in a document. They are used by the browser itself, by search engines and spiders. They provide information about the page in which they reside.

Two of the most important things you can put in a meta tag are a description and list of keywords.

The tag usually has two attributes, the name and a required content attribute. Sometimes you will find scheme and http-equiv attributes. Don't use both http-equiv and name. They are either-or options.

<meta name="description" content="Learn about the HTML meta tag" />
<meta name="keywords" content="HTML, Elvenware, meta, tag, content, name" />

Name Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Alternate:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />

Right to Left and alignment

You can add the dir attribute to the html tag as follows to modify your entire document:

<html dir="ltr">

This is one way to left-align text.

You can use attribute in other tags such as paragraphs:

<p dir="ltr">This text is left aligned.</p>

It code shown above produces output that looks like this:

This text is left aligned.

You can also right-align your text.

<html dir="rtl">

This will right-align your entire HTML document. That is not what you want in most cases. Here is an example with a paragraph element:

This text is right aligned.

If you want to actually reverse the direction of text, you'll want to enclose the text inside a element as in this example:

<p><bdo dir="rtl">This paragraph will display from right to left</bdo> </p>

In a browser, this paragraph now displays as:

This paragraph will display from right to left

For general page layout like positioning columns, tables, etc., you just need to think from right to left instead of left to right.

HTML DOM and Accessing HTML Elements in JavaScript

Access a DOM element from JavaScript.

<p id="my-paragraph"></p>

The JavaScript:

const myParagraph = document.getElementById('my-paragraph');

CheckBoxes

See the following example:

JsObjects/HtmlCssJavaScript/Checkbox

Here is a code snippet from that example:

$(document).ready(function() {
    $("#paragraph01").html("This sentence added by jQuery");
    $("input[name=mainGroup]:checkbox").click(displayCheckboxSelection)
});

function displayCheckboxSelection()
{        
    if ($("#walk").is(':checked')) {
        $("#paragraph01").html("You clicked walk");
    } else {
        $("#paragraph01").html("Walk is not selected");
    }

    if ($("#drive").is(':checked')) {
        $("#paragraph02").html("You clicked drive");
    } else {
        $("#paragraph02").html("Drive is not checked");
    }

    if ($("#fly").is(':checked')) {
        $("#paragraph03").html("You clicked fly");
    } else {
        $("#paragraph03").html("Fly is not checked");
    }
}

img

Basics:

In declaring an image, it is usually a good idea to specify the width and height either in the tag itself, or in CSS. Note that if you define the width and height in the tag, and then want to define it in the CSS, I would carefully check how it turns out, and if you need to remove the tags from the img attribute or override both in the CSS.

RadioButtons