Chak.DX
Chak.DX/
HTML
HTML
Search
HTML

HTML

IntroFundamentalsFormsInline vs BlockEntitiesSemantic ElementsSEO & AccessibilitySEOMarkdownREADMEchangelog

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 HTML5 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, scope as row or col 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).
  • datalist was used earlier which gives a list of dropdown to choose from as the user types
  • 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

Entities

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

Semantic Elements

notion image
notion image

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
  • 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
notion image

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🍵