The syntax of a language is how it works. How to actually write it. Learn HTML syntax in this article…
The building blocks of HTML are called elements, and the building blocks of elements are tags. When they are put together, they make a website – sort of like atoms and subatomic particles (HTML elements are not related to scientific elements of course, just one of my weird analogies). Let’s get started!
Ok, I’m going to show you a bit of code. WHAT??? Don’t panic. You don’t have to understand what it all means, I will explain below:
<h1>Blog Posts.</h1> <div class="controls"> <input type="number" id="first" placeholder="First" oninput="inputsChanged()"> <input type="number" id="last" placeholder="Last" oninput="inputsChanged()"> </div> <span class="total-word-count"><b>Total Word Count:</b> <span id="word-count">0000</span></span> <table> <tbody> <tr> <th>Post number</th> <th>Post Date</th> <th>Post Name</th> <th>Word count</th> </tr> <tr> <td class="post-num">#1</td> <td class="post-date">Friday 29 September 2017</td> <td class="post-title"><a href="https://codetheweb.blog/welcome/" target="_blank">Welcome to Code The Web!</a></td> <td class="post-words">1373</td> </tr> </tbody> </table> <br>
See? You survived (I hope). For starters, don’t worry about what any of this means – we are only worrying about the structure at the moment.
An element is basically bit of content (text), surrounded by HTML tags (I will go into this more later). The tags tell the browser information about what is inside it. For example,
<h1>Blog Posts.</h1> is telling the browser that “Blog Posts.” is an
h1 element – a type of heading. You don’t need to remember that, I will go into it more in a later article.
An element refers to the content as well as the two tags. This is an example of an element:
Elements can be nested inside each other. When nesting elements, it is usually good to put the elements on new lines, and indented correctly. There are some exceptions, such as
<td class="post-title"><a href="https://codetheweb.blog/welcome/" target="_blank">Welcome to Code The Web!</a></td>
Note that putting nested elements on new lines and indenting are not mandatory, they are just what we call good code practice. Good code practice is sort of like etiquette for programming. The aim of good code practice is to make your code easier to read and easier for others to understand (this is especially important when collaborating on large-scale projects).
An element inside another element is called it’s child. Similarly, an element’s surrounding element is called it’s parent element. In the example I gave right near the top,
<th>Post number</th>, would be the child of
<tr>, which is the child of
<tbody>, which is a child of
<table>. We can represent this as:
table > tbody > tr > th
Note that this is not code. It is simply an easy way of visualizing how the elements are nested within each other.
As I mentioned earlier, tags are the bits of code surrounding the content, such as:
<p class="test"> ... </p>
Tags are always enclosed within
Types of tags
Tags fall into two categories: Opening and closing.
See the example below: