Some notes I wanted to leave while reviewing HTML. The CSS notes are coming after! Big shoutout to the team for teaching me about markdown for the blog, it really helped with cleaning up how the blog post looks. If you also need the shortcuts, while editing click on the 'Commonly used syntax' option under the 'Editor Basics' to the right of where you are typing the blog post.
HTML = hypertext markup language; structure and presentation of raw text, includes links to access other text
BASIC STRUCTURE
We want to start our HTML page with <!DOCTYPE html> as the first line of code. In short, this tells the browser that the file is going to be in HTML. Don't forget to save this as .html as well. Just because it has been declared as an HTML document, we still need to include the HTML open and closing tags to embody the rest of the code.
Speaking of tags and the content it surrounds, altogether it would be called an HTML element (referring to below)
<p>Hello World!</p>
<!-- <p> and </p> are the opening and closing tags respectively, Hello World! is the content -->
Basic structure of an HTML file will consist of the head and body. The head is where metadata (fancy word for info that describes and explains data) is contained, the title is an element that would fit here (this will be seen as the name of the tab. The body is where most of your HTML content will belong, for example the text, pictures, or buttons. A bare-bones basic HTML document will follow a similar structure like:
<!DOCTYPE html>
<head>
<body>
<div>
</div>
</body>
</head>
ELEMENTS AND TAGS
HTML is classified with parent and child elements. Elements that are contained within another are considered the children , while the one that encompasses it is the parent. When CSS is later applied to the HTML, the children may sometimes be affected by the parent's styling. Usually, the parent will be less indented compared to the child element, so having clean looking code is important.
<body> <!-- parent element -->
<p>Hello World!</p> <!-- child element -->
</body> <!-- parent element -->
Headings are defined by h1, h2, ... h6, with the size decreasing as you get closer to 6. Important titles and headings should have lower h#, like h1 or h2. Paragraphs or p tags normally act as the child element under headings for the main content. There are other ways to space content besides paragraphs, line breaks or br tags will act similarly. If one br is used, the next sentence will continue on the next line, while if 2 br are used, there will be a gap between the sentences. hr is another kind of break, that will actually create a physical horizontal line within the text. It is nice that the br and hr tags do not need a closing tag, makes it slightly more convenient.
One br ex:
Here is the first sentence.
Here is the second sentence.
Two br ex:
Here is the first sentence.
Here is the second sentence.
hr ex:
Here is the first sentence.
Here is the second sentence.
div tags will separate elements into containers that will make it easier to style a specific group of elements. Referring to when I was writing about the parent and child elements, the divs can stop a child from inheriting the parent's styling if you can target the div that the child is in.
Attributes can be placed in an element's tag for additional styling, and to me the id and class attributes are super useful for targeting specific elements for CSS, like a more precise div element. Styling can also be done within the tags such as using em and strong, for italics and bold (respectively). Unfortunately, we can't Ctrl+i or Ctrl+b as a shortcut.
Lists are convenient ways to show separate items. There are 2 ways to do this, through ul tags or ol tags. ul, or unordered lists, will sort items out in bullet point fashion. ol, or ordered lists, will sort items out in number fashion. The former is great for things like grocery lists or listing out many different places you might want to visit, while the latter is good for steps to cook a recipe or doing a top 10 ranking of something. Both list tags do share the li child element which stands for list item, and all the list tags require both open and closing tags.
Ex Costco grocery list
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Chicken Nuggets</li>
</ul>
- Milk
- Eggs
- Chicken Nuggets
Ex Errands/Events by order for today
<ol>
<li>Lunch with uncle</li>
<li>Buy groceries</li>
<li>Go to Nando's Peri Peri with friends</li>
</ol>
- Lunch with uncle
- Buy groceries
- Go to Nando's Peri Peri with friends
It's nice to see pictures from time to time while reading a casual wall of text. It might seem a bit daunting at first, but all you really need to remember is having <img src="image_link_here.jpg"/> and place the image link within the "". If I recall, it is nice to have the image downloaded because if you get the picture off the Internet, and the picture gets deleted, then nothing will show up. If the picture doesn't load, that's where you can add an alt attribute to the picture, to at least provide some text of what the picture was supposed to show. The alt simply goes after the src="" like so:
<img src="image_link_here.jpg" alt="Great description of the image"/>
I haven't played around with adding videos on HTML, but it seems very similar to the images, but with extra steps. First thing to note is that video needs to have both an open and closing tag, The second thing is that you need to set a width and height appropriately to view the video comfortably (this can be played around with, depending if the video should be seen horizontally or vertically). Third is that you need to include basic playback options with the controls element. Finally if you want to add a similar alt attribute, you simply type it after closing the opening video tag. Looking over it overall, it seems pretty intuitive.
<video src="video_link_here.mp4" width="300" height="200" controls>
If you see this text, the video is not working </video>
LINKS
In HTML, you have the ability to hyperlink certain words or phrases that will take you to another page. This is great on sites like Wikipedia since it often refers to many other topics, so being able to quickly switch to learn about a new topic is useful. The way we add links to a word or phrase is by surrounding it with a anchor tags, and including an href attribute in the opening tag. Without the href, the phrase will be clickable but it won't lead to anywhere. You can also make your link open up a new tab instead of replacing the current tab. To do this, you can add a target attribute with a _blank value. It would go after the href link. Images can also be turned into links as well, we just need to add an img element.
<a href="https:/google.com">This link will lead to Google </a>
<!-- This will open Google in the same tab for the clickable link-->
<a href="https:/google.com" target="_blank">This link will lead to Google </a>
<!-- This will open Google in a new tab for the clickable link-->
<a href="https://e.wikipedia.org" target="_blank"><img src="https://wikipedia_logo.jpg" alt="The Wikipedia Logo"/></a>
<!-- Note that for the picture, you need to place the `img src` within the `a`, and you can also add an alternate description if the picture doesn't load. -->
In addition, another thing you can do is make links between external and internal pages. Let's start with external pages, and use a restaurant website as an example. Some different pages you would probably expect would be an about page, the menu, maybe a catering page, and a place to leave reviews, meaning you need to make a separate file for each different page. In HTML , you have to create these separate files all in a single folder (technically not true, but will make things so much easier) so that you can link them using a relative path ./ (which means look for a file in the current folder).
ricobenes/
|--about.html
|--menu.html
|--catering.html
|--reviews.html
<!-- Great price and value, would definitely recommend the wings or breaded steak sandwich. Unfortunately not sponsored -->
<a href="./about.html">About</a>
<a href="./menu.html">Menu</a>
<a href="./catering.html">Catering</a>
<a href="./reviews.html">Reviews</a>
For internal pages, let's look at using Wikipedia as another example. Say you are reading about an actor and want to skip to the list of movies they've acted in, normally near the top there should be a table of contents that lists several topics. By clicking it, you can jump to it directly without needing to scroll. To do this, add an id to certain target elements by placing the id within an element's opening tag. This should then match the #id of its respective element in the list.
<p id="high">I have the high ground</p>
<h2 id="mid">That movie is kinda mid</h2>
<h1 id="low">What a low blow</h1>
<ul>
<li><a href="#high">High</a></li>
<li><a href="#mid">Mid</a></li>
<li><a href="#low">Low</a></li>
</ul>
OTHER THINGS
There is a lot of importance in having clean code. While you can technically write code all in one line.. why would you when you can space it out evenly? The computer ignores the whitespace in between lines of code, so there is quite a bit of freedom in terms of the spacing. Indenting is also important because it can separate parent from child elements to keep better track. Indenting can either be done simply with the 'Tab' button or 2 spaces. Comments are also nice to include so you can make notes telling yourself what each part of your code means, or just to write a reminder to revisit something you are stuck on. This is done with <!-- Insert Comment Here --> and it will be ignored by the browser.
Top comments (2)
Great post Ethan. HTML comments use this <!-- arrow syntax -->. Your first code block could look like this.
Different languages have different comment syntax.
You'll also get code highlighting if you tell markdown which language you are using
Thanks Ian! I will keep this in mind and fix it, I still have a bit more to add onto here!