As explained in the Web course, HTML is the language used to write a web page. To be exact, the final result is in HTML, but you could have used other languages to generate the HTML page (such as PHP or Node.js), as there is no way to factorize code in pure HTML.
The current version that you should use is HTML5, but even if many browsers have yet to support it, and not many people are aware of it, we are in HTML5.2 (HTML 5 2nd minor version, December 2017). You can check the coverage of HTML5 by your browser here (for instance, try "summary", a new tag introduced in HTML5.1, or simply enter "HTML5").
Note: as a good developer 😎, you should follow the standards when writing code. You can test your code using the W3C validator. You can also add a badge that will redirect to the validator with your page inside as explained here.
Recently, I discovered that you could check your website with webhint.io, which is also embedded in edge developer tools, and providing quite good feedback. You also got other tools, such as Lighthouse to check the performances, etc. (check WEB course)
a browser and a server are communicating using the protocol HTTP (or HTTPS=HTTP Secure)
when you are visiting a page (ex: https://duckduckgo.com)
you are asking the server to return the HTML for this page
usually, no HTML file in the URL means
that the server is using a router
or, that the file index.html (or index.php...) is loaded
ex: for DuckDuckGo, https://duckduckgo.com is the same as https://duckduckgo.com/index.html.
An HTML file is made a tags (ex: title, meta, ...) that have attributes (properties such as lang="fr" etc.).
<title>title of your website</title>
<!-- UTF-8 -->
<!-- RESPONSIVE (responsive CSS) -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- your code below -->
<h1>A big title here</h1>
<p>Some text here</p>
<!-- image -->
<img src="https://cdn.jsdelivr.net/gh/memorize-code/memorize-references/.assets/icons/icon64.png" alt="an image">
<!-- link -->
<a href="https://memorize.be/" target="_blank" rel="noopener">Link to memorize.be</a>
How do I "run" HTML code?
Create a file index.html (ex: with the content above), drag and drop it inside a browser, and you should see your page. You don't need a server as your code is fully in HTML (no PHP). You can change the name of the file, but the main file of your website must be called index. Your browser isn't "executing" code, it's simply rendering the code it received (the URL is a sort of file://path/to/a/file.html, and as we learned before, if there is no file in the URL, and you got an index.html, then it's loaded instead).
You can also try an online editor such as this one. If you want something cleaner (using a server, http/https instead of file), then refer to the PHP course (this isn't complicated).
The main idea when writing HTML is that you are going to write some tags, such as p for a paragraph or a for a link. Then you can add some attributes, such as href for a link that is the URL the link will be pointing to.
You will have two types of tags, tags like <img ...> called auto-closing tags because you don't write <img></img>, as you would with others such as <a ...>this is a link</a>.
You may also note that tags such as p are called blocking tags, because unless you use CSS, the tags after p will be rendered starting from a newline. To be accurate, "p", "div", etc. are block-level elements while "a", "span", etc. are called inline elements. A block element is usually storing a bunch of inline elements. I'm usually calling those "containers".
the name of a tag can be in lowercase or in uppercase (ex: "a" or "A" are working), use lowercase 😎
you can write attribute=value (without ", but that may not work every time according to the value, do not use this 😟)
you can write attribute='value' (instead of ", do not use this 😟)
you may write <img ...></img> or <img ... /> (without the /), but we are usually writing <img ...> for auto-closable tags.
you do not need to indent your code, but it makes things cleaner 🙂
you do not need to put one tag per line, but it makes things cleaner 🙂
so tags are optional (such as
, but you shouldn't omit/forget them)
When I'm saying "do not use/do this", I mean that developers are usually not using this, and if you do, then you should make sure to not mix things (do not mix ' and ") as this is what bad developers do. Pick one, and be consistent until the end.
The tags main, header, footer, section, etc. introduced in HTML5 are simply named divs. A div is a container, allowing you to group tags. This makes the code more readable, and later, it may help if you want to apply a style to a group of components.
Note that a div is "invisible", meaning that the user won't see any difference between the code with or without a div.
<h3>a title here</h3>
We got a paragraph that is a bit longer than usual (🤨)
with one <span>span</span> inside.
You may want to style your website, but you don't want/know CSS. This is a list of HTML tags that you may use.
<p>This <b>is in bold</b></p>
This is in bold.
<p>This <u>is underlined</u></p>
This is underlined.
<p>This <s>is crossed out</s></p>
This is crossed out
<p>This <i>is in italic</i></p>
This is in italic
<p>This text has <em>emphasis</em></p>
This text has emphasis
Force a newline
<span>This is</span><br><span>on 2 lines</span>
This is on 2 lines
Rarely used tags
This is <small>small</small>
This is small
marked text (=yellow background)
This is <mark>marked</mark>
This is marked
This is a <kbd>key</kbd>
This is a key
This is a <sup>superscript</sup>
This is a superscript
This is a <sub>subscript</sub>
This is a subscript
for a variable
This is a <var>variable</var>
This is a variable
for the output of a program
This is a <samp>sample output</samp>
This is a sample output
show title when hovered
<abbr title="some text here">word</abbr>
referencing a work
This is a <cite>reference</cite>
This is a reference
You may add cite="URL/to/source".
You got even more tags that I never used such as strong (rendered as bold), del (rendered like s), q (short quote), etc. You can learn more about them (and add them here if you want) in the HTML reference.
Forms aren't something that you can use without a server, but at least since they are rendered using HTML, then you can show one on your website. I haven't tested, but you may be able to use formspree to handle your forms (without PHP).
Basically, you will enter data into fields (such as a name in a textField). You will give a name to each field, so that when the form is submitted, the server knows what this value is supposed to be. You will add a label to each field, so that the user knows what value the field is supposed to take.
Force a space, or write a character using UTF8 codes
Note that you will rarely (never?) need that
(space) ô (ô) à (à) < (<) > (>)
<!-- refresh in 5 seconds -->
<meta http-equiv="refresh" content="5">
<!-- HTML redirect -->
<meta http-equiv="refresh" content="0; url=URL">