Chak.DX
Chak.DX/
HTML
HTML
Search
HTML

HTML

IntroFundamentalsFormsInline vs BlockSemantic ElementsEntitiesSEO & AccessibilitySEOAccessibilityMarkdownREADMEchangelog

Intro

Tim Berners Lee
Tim Berners Lee
  • Tim Berners Lee created HTML and WWW in 1989
  • A language for describing content on web
  • It was replacement for a physical printed document. The first website is info.cern.ch
  • Anatomy: elements, tag, content, indentation, formatting, attributes, parent, child & sibling
  • HTML is more forgiving of errors and will often render content even if there are syntax mistakes

Fundamentals

<!DOCTYPE html> (HTML 5 Declaration)
<html> (Root Element)
	<head> (Contains meta info, title, links)
		<title>Hey site 👋</title> (Shows in address bar)
	</head>
	<body> (Content)
		<h1>Hello site 👋</h1> (Heading)
	</body>
</html>
  • Boilerplate using ! and html:5 and HTML doesn’t require any special tags to render the content
  • <!DOCTYPE> declares the page as HTML 5 version
  • headings, p, sub, sup, mark, del, pre, code, kbd
  • Lists (ul, ol attribute: type, li) and dl-dd-dt (definition list, term & description)
  • Tables: table, tr, td, thead, th, tfoot, tbody, caption, attributes: colspan, rowspan, colgroup, rowgroup CSS for Tables: border-collapse: collapse, caption-side
  • Semantic vs non-semantic:strong vs b, em vs i, br, hr
  • Links: a attributes: mailto, tel, # for placeholder and to style we always target a:link. Anchor navigation (same page navigation using # and IDs). To open external links: target=”_blank”
  • <progress max=”” value=””></progress> Is used to show progress when a file is downloading, etc.
  • Images: img + alt (Accessibility & SEO), figure & figcaption to show caption (Semantic)
  • There are some global attributes that are available on all html tags such as class, id and title (shows tooltip), etc.

Forms

  • form, label, input type: text, password, email, color, date, checkbox, radio, range, file, submit, fieldset/legend, select/option (dropdown), button (type: submit/reset).
  • We have to give name attribute in our inputs as this is sent to backend when the form is submitted

Inline vs Block

  • div is block and spam is inline are generic containers for content
  • class is used to target a group and id for unique elements. Ideally we shouldn’t use id for styling and only for JS
  • We can change them in CSS using the display property
  • There is third one called as inline-block which is best of both worlds 😃
      • notion image

Semantic Elements

notion image
notion image

Entities

  • HTML entities allows us to write special characters such as &copy; for copyright symbol or &lt; for <

SEO & Accessibility

SEO

  • SEO means making our site ready for search engines such as Google. It’s an important aspect when working with web applications. The more search engine traffic we drive in, the more conversion our sites make and more profits overall!
  • Basic SEO tags are meta tags, that are added in the head
notion image
notion image
  • The UTF-8 & Viewport meta tags should always be included to make our page adjust well on smaller devices
  • Keywords is no longer needed or recommended
  • Meta Tags are used for SEO purposes. Some contains: meta author, meta keyword, meta opengraph. They also appear when we share our site online on some social media sites
  • Nowadays many meta tags don’t really hold a lot of weight when it comes to SEO
notion image
  • Meta robots is used when we don’t want a certain part of our website to get indexed (like dashboard or login area) but still it’s up to the Search Engine to respect this

Accessibility

notion image
  • Accessibility is about making our site more user friendly. With accessibility we have to keep in mind that even users with certain disabilities (like visual or physical) are also going to access our site. For which we have to make them user accessible for assistive technologies. These guidelines are mentioned under WCAG
  • WCAG is web content accessibility guidelines that marks guidelines to ensure accessibility of our applications
  • Many EU Nations have strict regulations for Web Accessibility, especially for public sector websites and web applications

Markdown

One very popular language within developers is markdown which is a basic version of HTML

README

Almost every project is advised to keep a README.md file that lists all the project details

changelog

It is a special file that lists all the different versions and improvements.
snooze🍵