What is the best way to include my header on every page I code.
Hello! I have been trying to find the best way to add a header to every page with as little code as possible. I already have a header.html, and a header.css, and so I was wondering the easiest way. Thank you!
9 Replies
Hey great question honestly! Also good on you making a static normal html website cause its really important to learn how the web works.
I personally always have reached for some kinda "templating"
Also what makes UI frameworks today really popular. Before those people used all sorts of things like xHtml https://en.wikipedia.org/wiki/XHTML (not to be confused with the new/old hype HTMLX)
XHTML
Extensible HyperText Markup Language (XHTML) is part of the family of XML markup languages. It mirrors or extends versions of the widely used HyperText Markup Language (HTML), the language in which Web pages are formulated.
While HTML, prior to HTML5, was defined as an application of Standard Generalized Markup Language (SGML), a flexible markup...
PHP is honestly a great way to template too if you wanted a SSR website. (you can have simple <?php includes> to repeat components to pages)
You also have "html template languages" which are compiler languages that compile into normal HTML but allow you to do lots of cool things like loop, interpolation, templating.
Some popular ones are Pug, Handlebars, Nunjucks
You will need to have something (tooling) to building and use the compiler though. This can often be as easy as a NPM watch script in your package.json. To as complicated as using older bundling tools like Gulp/Grunt (don't do this but if you want to learn from Jess aka: CoderCoder I think she has learning material on it)
Honestly I need to look back into if Vite has better plugins now for them cause its just so nice to use for tooling/bundling.
I hope that was not an overload, I'm trying to get better about explainging things so practicing 😄
Thanks! Ill take all of that into consideration!
Past that what you want is a UI framework and MetaFramework (Like SvelteKit follows html/css/js really close ez to get 
💗
That would be the "modern way"
and ngl its swell 🤘
💗
That would be the "modern way"
and ngl its swell 🤘
Astro is a solid second pick for me
Remix would be Third... all S tier xD
Thing with Astro is also has some things that are not quite html but more like markdown flavor? Kinda Nunjucks inspired ig though too with front matter.
So I still say of the 3 while all great imo (doing things the right ways) I would still say SvelteKit is the most beginner friendly.
While it was needed it used to be even more so cause it followed File based routing over Folder with index.html/svelte
Which was nice cause someone learning html could be like OH yea I know this routing... right off the bat. I mean you still do but its got the special naming now.
Which they all do now 🤷♂️
Best part is they are all stealing ideas from eachother... they have all inspired and grown from one another.
OpenSauce! P we profit (rant sorry) lol
The one breaking point with Astro for me always comes down to one thing... no good answer for <form>s yet
and trust me I harse some of the team about it in a nice way from time to time.
I just use Netlify form integrations 😂
JAMstack is not the only way to run a website
I'm a bigger fan of SSR so (well #depends like always)