Html Syntax

Elvenware Logo

TOC

HTML Syntax

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

Anchors and HREFs

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

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:

    1. The list items: <li>...</li>
    2. 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.

    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.

    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" />
    

    See also, media queries.

    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:

    something;
    

    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

    See the following example:

    JsObjects/HtmlCssJavaScript/Radiobuttons
    

    Here is a code snippet from that example:

    $(document).ready(function() {
        $("#paragraph01").html("This sentence added by jQuery");
        $("input[name=mainGroup]:radio").click(displayRadioButtonSelection)
    });
    
    function displayRadioButtonSelection()
    {        
        var id = $("input[name=mainGroup]:checked").attr('id');
    
        $("#paragraph01").html("You clicked " + id);
    }
    

    There is some information on RadioButtons on the JQuery Page.