HTML Structure, Semantics and Accessibility

HTML is all about Structure, Semantics and Accessibility. When I start to code a project, I begin with a basic boilerplate that contains the major landmark elements.

Following the user interface specifications, I add pages to create the general structure and layout. Next, I add the most semantically correct elements to represent the areas of each page. These elements often start as 'empty shells' with a brief description of what they will contain. The result is a well structured visualization of the application.

While I code the finer details and render data from various languages, I continue to focus on Structure, Semantics and Accessibility.

For example, the code below displays a picture of my dog named 'Mia' in figure number one:


        <!-- Fig.1 - My Dog 'Mia' -->

        <figure>

          <img src="/public/images/f1_mia.png"

            width="100" height="100"

            alt="Portrait of my dog 'Mia'"

            title="Portrait of my dog 'Mia'">

          <figcaption>

            Fig.1 - My Dog 'Mia'.

          </figcaption>
        
</figure>

Portrait of my dog 'Mia' — Fig.1 - My Dog 'Mia'.

I often disable the stylesheets and links in an html document to ensure it is still organized, legible, and meaningful. The message and content should remain apparent even if external data is missing.

My integrated development editor (usually Visual Studio) is configured to flag most syntax errors. I also use various code validating software like W3C^® Markup Validation Service.

All my code passes Axe^® accessibility testing and Google's Mobile-Friendly Test. I also use a code reader to verify accessibility.