Learning HTML is often the very first thing you come across when learning to code. There are many free resources you can use to help you get started. Follow along and we’ll go through basics of HTML together 🙂
Table of Contents:
- Headings and Paragraphs
- Ordered and Unordered Lists
- Links and Hover Colours
- Embeds (Videos & Images)
HTML headings are titles or subtitles that you want to display on a webpage. There are six available sizes starting with the largest one – H1, all the way down to H6. Let’s go through all of them and discuss any important features:
H1 or Heading 1 is used for main page titles, blog titles and similar. It gives importance to the content added and it improves SEO. It is important that there is at least one H1 tag within your page. The title of this blog post has been set as a H1 title.
H2 or Heading 2 is used for the main subtitle, a section title and similar. It separates itself from the main title of the page as it is slightly smaller in size. The title of the current section of this blog post has been set as a H2 title.
H3 or Heading 3 is used for the additional subtitles within the main subtitle. It is also smaller in comparison with it’s larger brother H2.
H4 or Heading 4 is used as yet another addition to subtitles, this time being a subtitle to H3 tag we’ve talked about above.
H5 or Heading 5 is usually the same size as your normal ‘paragraph’ and generally not used if there isn’t a specific need for it.
H6 or Heading 6 is the least used form of headings, being the smallest in size and at the very bottom of importance when it comes to your structure. It is also usually smaller than your typical ‘paragraph’.
Make sure you don’t forget to add a closing tag once you’re finished adding the content 🙂
Paragraphs are used to add text into desired sections and as all other tags require a starting and a closing tag. The text you’re reading right now has been set as a paragraph using <p> and </p> tags at the start and the end of it. Paragraphs can also be customised, you could change colour, size, font and many other things using inline HTML, <style> tags or simply CSS files to store everything in.
There are two types of lists you can use within HTML. These are called ordered lists and unordered lists.
Ordered lists are the ones which will have a number in front of the listed item, looking like this:
- Item A
- Item B
Unordered lists are the ones which will have a symbol (not a number) in front of the listed item. Usually, it’s a little black ball but this can be customised to your wishes and it looks like this:
- Item A
- Item B
Links are found in nearly all web pages and allow users to click their way from page to page. These can be fully customised and made to look however you wish them to by adding some styling and colours with your inline HTML.
To see one in action I want you to <<right click here>> and chose ‘Inspect’. A new window will pop up and highlight the words you’ve right-clicked on. You will be able to see the default colour of the link as well as the one we set for when a user ‘hovers over’ the words on a blog post. Click on the colour and try setting a different one, let me know if it worked 🙂
Comments are used to leave information for other visitors of your code or pages which doesn’t get displayed on the posts or pages themselves – it will always stay hidden from the public eye. These are very useful and often used as reminders and descriptors to ourselves so it’s easier to find/understand/remember the code you’ve written sometimes a long time ago.
<!– This is how we leave a comment in HTML –>
Embeds are things we use to show users an image, a video, a social media profile or something else within our selected page or a website. It is pretty simple to use and it looks like this:
There are many things to know about in HTML but you’ll get on with it just fine as long as you keep practising.
Try making your first index.html file in any text editor of your choice, write a paragraph or two, save it and open up in your desired browser.
Good Luck! 🙂