When I was a beginner, I was often confused by how to structure my HTML codes. Do I have to use a <nav>tag or can I simply use the <div> tag as you can almost override any tags’ default style behaviours.
Let’s take navigation bar as an example. Consider the snippets below
- ul + li > a
<ul class="nav">
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>2. nav > a
<nav>
<a href="/about">About</a>
<a href="/blog">Blog</a>
<a href="/contact">Contact</a>
</nav>Personally, the second approach is an obvious winning for me as it is telling more with less markup. I will always encourage to strive for that.
Before HTML5, the html vocabularies(tags) were quite limited as people didn’t design it for the purpose to structure interactive components. With more demand for what the web can do, so is the requirement for more expressive syntax.
Refer to this link for a list of available tags.
After using HTML for a while, I find I often structure my code based on the structure of a page from macro and micro level
Macro level
<html>
<body>
<main>
<header></header>
<section id="about-us"></section>
<section id="blog"></section>
<section id="contact"></section>
<footer></footer> </main>
<aside></aside> </body>
</html>
<main> Often we want a wrapper element around your main content, hence the main tag instead of using <div class=”wrapper”>
<aside> Personally I use aside for content that is supplementary to the page. Something even if you omit, it won’t affect the functionality of the site. For example, you might want to hide certain page wide component in mobile view.
<header><footer><section> I put these tags inside main or aside to specify the section page (bookmark) header and footer is equivalent to <section id=”header”> in my mind.
Component level
<section id="about">
<div class="component-name">
//the elements that make up this component.
</div></section>
The first thing to notice here is that I uses class instead of id for <div>. It is because I want my components to be as reusable as possible and since all ids are unique I wouldn’t want it to conflict with another component. All same component should refer to the same class
The concept of reusable component is a useful pattern especially helpful for complicated projects which you want to keep things organized. By using javascript frameworks to kinda extend HTML via React, Angular, Polymer, Vue, you can create and use HTML lookalike tags:
<PhoneBook> // whatever component you want to abstract
<Contact name="Bob" phone="6041234561></Contact>
<Contact name="Alice" phone="6041234567"></Contact>
</PhoneBook>Although less intuitive, we can name our own component via class name for now if we don’t want to setup all the overhead.
<div class="phone-book>
<div class="contact">
<h1>Bob</h1>
<h2>6041234561</h2>
</div>
<div class="contact">
<h1>Bob</h1>
<h2>6041234561</h2>
</div>
</div>Of course as you an see, the abstracted version (custom component) is far easier to read and maintain.
HTML does come with this component pattern and you might have seen it already
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<tr>
</table><ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Newer and less common patterns include
// figure tag is good for creating card elements
<figure>
<img src="/media/examples/elephant-660-480.jpg"
alt="Elephant at sunset">
<figcaption>An elephant at sunset</figcaption>
</figure>// details can be used for creating accordion
<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>
To Summarize, HTML is a markup language (uses tags as syntax) which is used to capture the structure of a document. The key to writing good html code is about increasing the readability through thoughtfully describing the kind of components there are on the page.
Disclaimer: One of the most important tips about learning HTML is to think of HTML is the structure of a document(website). It does not concern about the look of what you see on the page. We will leave the styling to CSS which we will cover later. But for now, consider it as the skeleton of a document.
The second important feature of any markup languages are the ability to assign properties.
Here’s an example of an image tag with a property of source indicating where the image file is.
<img src="flower.jpg">We can pass on more information to a tag by creating custom-tag in html. Though technically you can name the properties anything you want. It is a convention to start with the data- prefix
<div class="product"
data-name="iphone"
data-color="black"
data-price="$599"
data-storage-size="32GB" ></div>
As you can see from the above example, HTML is capable of capturing object based data. With a bit of javascript, you can extract the above data:
var product = new Object();
product.name = $('.product').data('name');
product.color = $('.product').data('color');/**
{
name: "iphone",
color: "black"
}
*/
These properties are also known as props, which is commonly used in React via JSX, and Angular.
The third thing to point out regarding HTML is that it does not have the ability to capture logic, such as if-else statement, and variables. Consider you have 10 products, you will have to create 10
<div class=”product>1</div>
...
<div class=”product>10</div>Because of this, more expressive languages are made to assist this, addressing specifically these two limitations. There are three strategies to extend HTML, 1) server side 2) client side implementation or through a 3) pre-compile engine
- Server Side Implementation
How it works is that the server will send back to the browser the correct HTML based on a server-side engine commonly via PHP, Ruby, Python and more recently javascript(node.js) languages. The important thing to note is that this process to create a static HTML page is being done the moment when the server receives the request from a browser (you can visualize it as the moment a user press enter in the browser trying to navigate to a url link such as http://yahoo.com, that very page the user will see is being generated then!)
2. Client Side Implementation
Instead of creating HTML in the server, client side implementation means the server will send back a very simple html document that often goes like this:
<html>
<div id="app></div>
</html>And then when this file arrives to the browser, its javascript files will create html elements(a.k.a. dom elements) in front of the user. It will also fetch from a remote server which usually contains a RESTful API and update the html elements asynchronously a technique we often called AJAX.
Popular framework that uses client side rendering includes React, Angular and Vue.js
3. Via Pre-compile
The difference of this method is to compile ALL the HTML files into static and then upload them ahead of time to the server so when the user visit the page, there is no need to create any HTML on the go because they are already created ahead of time. This method allows website to be incredibly fast and is gaining popularity (JAMStack)
No matter server side(php, ruby, python), client side(react, angular, vue) or pre-compiling (JAMStack), you can expect the language to be expressive enough to have logic (conditionally showing certain elements on a page) and dynamically generate static HTML via passing variables(data) to a template*
*Mustache.js, handlebar.js are two popular templating engines, which allows logic and variables. Notice the double curly-brackets {{}}given a variable products var products = [
{
name: "iPhone X",
color: "black"
},
{
name: "iPhone 8",
color: "white"
}
]<div class="product"
name="{{name}}"
color="{{color}}" ></div>will generate the below HTML code:<div class="product"
name="iPhone X"
color="Black" ></div>
<div class="product"
name="iPhone 8"
color="white" ></div>
To test any html code, you can open up any text editor and name your file with a .html extension at the end. Then simply open it in any browser and you should see it being rendered.
