Lesson 3: Syntax and Semantics

Everyone seems to whine when these topics come up, indeed they are some of the most boring topics in the web world. They are, none the less, very important. Lets start this off right with some definitions.

Syntax:

— English definition: “the arrangement of words and phrases to create well-formed sentences in a language”

— What developers mean: The arrangement of characters in a way that both humans and computers can read your code.

Semantics:

— English definition: “the branch of linguistics and logic concerned with meaning”

— What developers mean: Developing a webpage in a manner that all humans that consume the content can understand it, even those with disabilities.

Syntax

It is possible to put all of your HTML code on one line, just remove all the white-space. To a computer this will still make sense, but it is far less maintainable and hard to read for a human. Similarly if you forget a brace in your code it makes it impossible for the computer to read your code, this is called a syntax error. It is important to keep syntax in mind when developing. An experienced developer will write the code in a manner that future developers can understand it.

One way to improve syntax is to add comments to your code. An HTML comment looks like this:

<p>Pizza</p><!-- Pizza is my favorite food -->

The webpage will only show what is in the <p> tag, the comment after the <p> tag is purely for the benefit of those reading your code.

Semantics

This mainly pertains to page layout and using appropriate HTML tags for content. Much of HTML semantics comes from print layout, generally in a newspaper article you will have headers, authors, dates, sections, and asides. You will find all of these represented in HTML tags with the addition of nav and footer. Using these appropriately will heavily increase the readability of your webpage for ALL audiences.

Here is an example of what a semantic page layout would look like:

Your layout will be different for any given situation or design. It is important to know what tags are available and when you should use them. Use the MDN element reference to determine what tag is best for your content.

Conclusion

Both syntax and semantics are an objective subject and preferences will change between developers, businesses and even designers. It is important as a developer to know what to use in any given situation. Use the references listed at the top of lesson 1 to your advantage. Up next we’ll deep dive into CSS and basic styling.