HTML Boilerplate
- Categories:
- notes
Terinspirasi dari postingan HTML boilerplate milik Manuel Matuzovic, berikut ini HTML boilerplate versi saya. Saya menggunakan referensi dari web.dev untuk HTML Boilerplate dan berhubung sebisa mungkin tanpa Javascript, maka hal-hal yang terkait Javascript saya hapus.
Penjelasan detil tag-tag HTML dibawah dapat dibaca melalui web.dev dan The Open Graph Protocol.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
<title>Contoh Title - My Example Site</title>
<!-- start open graph -->
<meta name="description" content="Contoh page description">
<meta property="og:title" content="Contoh title - My Example Site">
<meta property="og:description" content="Contoh page description">
<meta property="og:image" content="https://www.example.com/image.jpg">
<meta property="og:image:alt" content="Contoh image description">
<meta property="og:locale" content="id_ID">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:url" content="https://www.example.com/mypage.html">
<!-- end open graph -->
<meta name="theme-color" content="#FF00FF">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/my.webmanifest">
<link rel="canonical" href="https://www.example.com/mypage.html">
<link rel="stylesheet" href="/assets/css/styles.css">
<link rel="stylesheet" href="/assets/css/print.css" media="print">
</head>
<body>
<header>
<!-- konten header -->
</header>
<main>
<!-- konten body -->
</main>
<footer>
<!-- konten footer -->
</footer>
</body>
</html>
Recent Posts
Broken Pipe Error
My note about Broken Pipe error
Shell Script First
In this blog post, I'll explain why I prioritize shell scripting as my primary solution for automating tasks, and only turn to full-fledged programming languages like Ruby and Python when necessary.
Lessons from Creating the Unsplash Image Resizer: Simplifying Image Downloads with HTML's Download Attribute
How I discovered the download attribute and used it to improve image downloads
C# - The Difference Between string[] and List
Learn the difference between string[] and List
in C# and when to use each for storing collections of strings in your code Output Redirection - Standard Input, Standard Output, Standard Error, /dev/null
Penjelasan singkat mengenai shell piping dan /dev/null