Hypertext Markup Language HTML
1
How to code
You should get set up to code before your start learning HTML, CSS, and JavaScript. Luckily for you, I’ve made a guide called Baby Steps that goes through the whole process.
2
Elements
We organize content on websites by using HTML elements. We mark the start and end of an element with opening and closing tags. We can nest multiple elements inside of each other. The outer element is called the parent, while all inner elements are called children.
Types of elements
Elements can either be block (a.k.a. full-width) or inline elements. The generic block element is the <div> element, and the generic inline element is the <span> element.
Attributes
Attributes go inside of the opening tag of an HTML element. We frequently use the style and class attributes to connect our HTML code to CSS code, which lets us change how our elements look.
Entities
Sometimes, we need to type characters that conflict with the way we type HTML code. For example, we might need to type the less-than symbol (<), which is the same symbol we use for starting HTML tags. To get around this, we can use entities that represent symbols. We write the less-than entity as <.
3
HTML documents
HTML files (.html) have a general structure that you should
try to follow
whenever possible. If you’re using Visual Studio Code, you can type ! and
then press enter in
an empty HTML file to generate a standard HTML document template.
We can add CSS and JavaScript inside of an HTML document using the <style> and <script> elements. The <style> element typically goes right before the </head> tag, and the <script> elements right before the </body> tag.
We can link to a separate CSS file by adding a <link> element inside of the <head> element. Linking to a JavaScript file uses the same <script> element as before.
4
Typography
These are some common HTML elements for text. Block elements are full-width elements that break to a new line. Inline elements don’t break to a new line and are used for things like bolded or italicized text.
Check out MDN for a full list of elements.
5
Links
The link (<a>) element can be used within a text element
or as a container
for other elements.
You can link to other sites by adding a URL inside the href
attribute. We can also
link to pages on the same site using relative file paths.
Anchor links let us link to elements on the same page. If
we give an element an
id attribute like “section-name”, we can link to it with
href="#section-name".
6
Media
There are several elements for embedding image, video, and sound files. We
can also embed web
content (like YouTube videos) using the <iframe> element,
although not all
websites support <iframe> embedding.
To embed anything, you should understand how HTML file paths work. HTML file paths describe the relationship between your code and where your media assets live. If your file paths are incorrect, your media won’t load.
7
Forms
Form elements are used to build user interfaces for submitting information
or for applying settings to a page. The <input> element is special
because it can adopt a wide variety of behaviors depending on its
type attribute.