HTML #

Alright, so HyperText Markup Language is the one thing on this list I suspect everyone reading this page has at least a smidgen of familiarity with, and it’s really very easy to work with, so let’s just dive in.

In general, you’ll be working with a bunch of HTML tags, tags are these point-bracketed enclosed words that mean something special to the browser, let’s actually make a HTML file right now to get started. Go ahead and open any plain text editor (1), and make a new file and name it whatever you want, just make sure to end it in .html

now, go ahead and type this into that document,

1
2
3
4
5


<!DOCTYPE html>
<html>
<h1>Title</h1>
<p>this is <b>HTML</b></p>
</html>

and then, hopefully, you should be able to double click that file and it will open into your browser, and it should be pretty basic black text on a white background, with a big heading and the term HTML in bold, and if you look at the code you wrote, that should make sense. The only weird part is the <!DOCTYPE html> and <html> bits, but those are pretty much just standard stuff that just defines the start and end of the page.

So, what else can this do? #

Frankly, it’s pretty much more of the same from here, just a bunch more tags that you should look into and understand how to use. There’s all the <h1> though <h6> variants for headings of decreasing size, <a> for links, <ol> and <ul> for ordered and unordered lists, which then contain list items with <li>, and so on. Honestly, it’s reasonable to just go through every tag listed on W3 School’s HTML Element Reference Page, or follow their HTML Tutorial - though you might want to read through this page first.

There’s not really that much complexity in using plain HTML, it’s how it interacts with CSS and JS that make it interesting. Still, don’t underestimate how much you can do, basic HTML, with just <img> tags for images, <a> for links and so on can still get you really far. HTML is really the foundation of your website(2), so give it thought as you write it. Generally, I think you should try to do whatever it is you want in HTML as much as you can before resorting to adding CSS or JS, but also don’t try to get HTML to do things it’s not designed for if CSS or JS is a better fit. Hopefully I can give you a better idea of what should be used when in the coming chapters, though to some extent this just requires experience. Still, it’s good to know where doing something hack-y is okay and where it’s not.

A good example of this is tables.

A lot of web dev noobs (myself included) will try to use tables for things that probably shouldn’t be in basic tables, and instead need something more custom and responsive. If you try to put big pictures and lots of text in a table, you’re probably doing something wrong, they’re really better treated as basic spreadsheet like elements.

Meanwhile, doing something hacky like using a lot of   tags in your html to move text (like is done here, before the word "text"), while hacky, is still semi-reasonable, and part of how I've gotten the chapter numbers to align in the left side bar

Okay, so, then, how should you learn HTML?

Well, I think it’s worth asking how much you need to know in the first place. While you could write your entire website in raw HTML, it’s a massive pain in the butt, and probably not necessary. There’s a good chance you’ll be using a tool of some sort that lets you write in something a bit more user-friendly and converts it to HTML in the end- in the case of OpGuides, that tool is Hugo and the format I write in is Markdown. Both of these are pretty common. That said, you’ll still probably want to know some of the common HTML stuff and have enough familiarity to understand things when looking things up as occasionally you’ll need to actually dive in and do something more manually, such as putting in complex tables, inserting pre-formatted text (See the ASCII Art below), or, if the tool your using doesn’t make it easy, load in an audio or video clip, just to name a few examples.

I have	no	idea	why	anyone
would	ever	want a table that is formatted
like	this	want a table that is formatted
but with HTML			it	is
a	thing	you	can	do

I made the table using https://www.tablesgenerator.com/html_tables as it makes doing things like this much less of a pain in the ass

                                              ......                                                
                                             ........                                               
                                         .  ...',,,'..                                              
                                          ....:odl:;..                                              
                                        ....;oxxxl:;... ...   ..      ..   ..   ......              
                                    . ....'cdxxddl:;'...........        .    .....','.              
                                     .;l,,oxxdlccc::;,,'.......  ..      ........',,.               
                                   ..'oxoddlcc::;::llcc;............  ..,'....';;,,'.               
                              ....,,..,cddl:::::;,;cooxo,..............:o;...,clc:;..               
                             ....;dxc;ldxoc:::;;,,;;:cdx:..............'c:'';cc;;:,.                
                             ...'o00xoxxxo;,,,''.',,,,;:'................'',:;,,;:.                 
                          ...,,,o0K0xxxxxc'.....''''''''.',,'...............'.';c;.                 
                 .    . ..'',,,lOXXOdxxxdc..',;:::::::;;,,,,,,,',''''.'''.....':c,.                 
                      ..''',,';dKNKd:oxdl;,;ccccccccc:;'..',,,;:::;;;;;,;;,'...;:'    .             
                    ...,;:::;,:xKNKd;:c:clllllllcccc;'.....,;ccccccccc:,,,,,'.'c:.                  
                    ..,;:::;,;lk0K0x;.':llooooool:;,,;::;'.';llolccccc;'......:l,.                  
                   ..',;::cc:,cxO0Oo,':ccccccllc;;;clool:'.',clllccc:;'......',,.     .             
                  ...';ccccc;',cool,.;ccccccc:,':xkkkxoc,.,;';ccc:;:;,.......''..                   
                  ..';ccccc:,''',,'..,:cc::c;''cOK00Odc,.',,.':cc;,,,'...'....'..                   
                  ..,;:;;::;,'.......';;;;;,.'l0XXXKOkxoll:,..:c:,''.....'.......                   
                  .'''..',,,'........''''''..ckKXNNNXX0kdol:'';:,.......,;'.......                  
                 .........'..........'......,coxO0Okoc:;;;,''..........,:c;...''..                  
                 ...........'',:c,........',:lloo:,,;;:ldd,..... .......';'...,;'..                 
                 ...........,coodl'......';oOKKK0Okxoolcox:.....';;,...:c,....';'..                 
                 ...........,cooddl,...'''lk0XNWWNNNKOkxxdl;',:llllc:,';c;,.':c:'..                 
                 ...........';oddolc;'''',cdx0XNNWWWWNNNXK0koloddddolc,';ll;,;'...                  
               .  ..........,cxkkdoc:::;,':odx0XNNXNNXXXKKKKK0OOOOkxdlc:,;:;c:.                     
            ....  . .....,'..':oxkdlc::llccoxOOKKxoodkO0KKKKKK000OOkxdl;'...cd;.                    
          .;x00kc.   .'..','..';lool:;:lodxxO0KK0o,.'lk0KXNXKKK0Oxol:;'..  ..lk:.                   
         .lXWWNWXd.   ....','..',:cl:;;:ldkO0KKKKK0kl:ok0XNNNXKK0Odl'....    .,c'                   
        .cXWWWWNWNk;.  .....''...',:c::;;:okO0KKKKKK0xllx0KKXKKK00kxl,.',,'.....;.                  
      . .kWNWWWWNNWKl.     ........'';::,;:coxO000KK00Odook0KK000OOxdo:'..''...cd;                  
      . :KWNNWWNNWNWNk,.    ....',;;;;;;;,,,,;clodxxkOkkkolokOkkkkxolcc,. ...,oOOc.                 
 .   . .dNNNNNNNNNWNNNO;.   ....';:cll:::;,;::;;;;::ccodxxxlc:coddoccc:'. ..;x0O0d. .               
    .  'OWNNNXXNNNNNWWNO:. ..''..,:oddololcxOOdc:,,,''',,,;cl:ckkl;,,,,....,x0000O; .               
       :KNNNXNXKKXNNNNNKkc'.'''..,:ldkkkxddOXX0kdlc:;,,''....'l0kc,,;:::,.,xK00O0Oc.                
      .lKNNNXKKKKKXNNKko:,'....'',:ldxOOOxxOKXNX0kxdoc:::;,..'oo;..,:lol:cdkOOkOOOl.                
    . .dKKXXXKKKXNNNNNKOdc;''...,;:coxOO0kxk0XNNNXXKOxoccc:;,,;....,cddclxdxOOOO00k,.               
    . 'kK0OO000KXNNNNNWWNX0kl,.'',:ldO0000Oxk0XNNNWWNXOdllcc:;'..',',;;:ldkO00OOOOOd'               
      ;OK0OOO0000KKKNWWWWNXK0d:;;:cok0KKK00kxdd0NNWWWNNKkdlc::;,,,,;;;;:cokOOOOOkkkOl.              
     .:0K0OOOOO0000KKNWWWNNXOdlccloxO0KKKK0OkdclxKXNNNWWNKOdll:;;;;:codkkkxxkkkkOkk0O;              
     .c00OOOkOOOOOOK0KNNNNN0occclxkO0000000Okkdlclox0XNNNNX0OxolccccloxO00kdodxkOOkO0d. .           
.  . .l0000OxdxkkxkOOkOKXXOdlodxkOOOO0Okxddxkkxoc::coOXNNNNXKOOxolcllok00kc;codxxxxkOOc.            
   . .oOOO00OxoddooooooxkkxoodxkOO0OOOxdooooolc:::::cx0KXXXXK00Oxoolclx0kc,,coddddddxOOl.           
     ,xOkkk00kxocccccoxkkkkkxxdooooodddoolcc:;,,,'',:cdxO0000000kxoolodxl;,;:lodxxdoooxx;.          
     ,kOOkkkOOko::coxkOOOOOOOkxolc:;;;:lcc:;,,,,,''''':ldxkO00OOkxoooollcc:;;:loxxdolloxo.     .    
   . 'x00Okkkkdc:ldxO000K0OOOkoc;;;,,,,;;;::::;,''.'',:ccoddddddoolllol:;:::;,;cdddolcoxkl.  .      
   . 'd00OOOOdc:loxO00KKK000Oxoc;,,,,,,,,,;;;:;'.',;codolc::ccc:c::coooc;:clol;;lollccldkk:..       
     .oO0000koclloxO0KKK000Okdoc;,,,,,,,,,,,,;,.':lodxkkkxolcc::cccclool;:cokOkc;::::cllodo:...     
     .:k00K0Oo::coxO0KK0OOOOxdlc:;,,,,,,,,,,,;;,:odxO000O00OOkxdollllloc;:dk000Od:,;;;,''';::,.     
      'o0KKK0o;;:ldkO0OOkkdlcc:::;,,,,,,,,;:cooloxxOXNNNXXXXXKKK0Oxocc;;;ck0KKKK0kl,.... ..';:'.    
      .,d0KK0xc:,;lxkkdol;'..''',,,,'',,,;:cloddxkOKNWWWWWWWWNNNNXK0Oxdolclk0KKKK0kc. ..   .';;.    
        ,kKKK0xc,.',cl:,,'.......';;,,,,,;ccloodxk0XWNWWWWWWWWWWNWNXXK0kd:'cO0000OOx,.    ...,;'.   
        .'coddkxo:'.';:;,,........,;'';:;:clodxkkkkKNWWWWWWWWWWWWNNNXKK0kl;cxO0OOkkkc... ...',,..   
           ....,:c;,..,,,'.........;,.'::codxkO00xodOXNNWWWWWWWWNNNXKKKK0kdodkOO0OOOd,.....','..    
         .      .......','......''',,''';codkO0KKOkdcoOXNWWWWNWWNNNXKKKK0OkdoxOOOOOOo'.........     
                     ............',,,,,,,,;cdk000000ko::lx0KKXXXKKK0OOOOOkkdodkxxxxd:.......        
                         .........''''''''',,;coooolc:'...''';:;:lodddddooolllollc:'...             
                              .......................   .      ...'.........''''....                
                               .    .....        .    ..            ........  ...

Character is owned by me, art is by Siplick, but ran through an ASCII art tool - note, this is text, not an image!

And, yeah, I just had to write some HTML by hand to show those, but the majority of this page is still being written in Markdown so that I don’t have to write every <p> and line break and what not. See the LaTeX and Markdown page for a quick overview (feel free to skip the \(\LaTeX\) Section)

Also, if you dare to hit the Edit this page link on this page or any other on the site, you may see that there’s actually a third thing mixed in with the Markdown and HTML (well, like, 5th thing if you consider the occasional inline CSS and JS, but I digress) and that’s the weird tags that look like {{< attribution >}} or {{< columns >}} or the like, these are special blocks that work with Hugo, the aforementioned tool I use to make OpGuides, and they basically just make it easy to reuse snippets of HTML. There’s a good chance that whatever tools you use to make your website will offer something similar, as writing HTML directly can get quite cumbersome if you’re repeating the same thing over and over.