Html Syntax

Elvenware Logo


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:


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:


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:


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:


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:


    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 - は


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


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

    See also, media queries.

    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');


    See the following example:


    Here is a code snippet from that example:

    $(document).ready(function() {
        $("#paragraph01").html("This sentence added by jQuery");
    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");




    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.


    See the following example:


    Here is a code snippet from that example:

    $(document).ready(function() {
        $("#paragraph01").html("This sentence added by jQuery");
    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.