₊⊹February 06, 2025₊⊹
HTML Basics
Hey there! I'm Meowina and I'm on a track to become a web developer.
Since this is my first post, I will just go over some of the basics of HTML.
Basically, HyperText Markup Language is a fundamental coding language that is used to create and structure web pages.
Here is what I learned so far when it came to HTML basics:
- Key Elements: The key elements for HTML include paragraphs, headings, images, lists, and links.
- Nesting Elements: Elements can be nested within eachother, which allow for complex structures that enhance content meaning and presentation.
- Embedding Images: The
< img >tag is used for embedding images in web pages, with attributes like src and alt providing some information about the image. Which is very helpful when you want your images to be accessible for people who will not be able to view the image for any reasons. - Creating Lists: HTML also supports different types of lists, such as ordered lists
<ol>and unordered lists<ul>. These lists are used to display information in an organized and structured manner. Lists improve the readability and user experience of a page. - Links and Navigation: Links
<a>are used to create navigation between pages and websites. By using the href attribute, developers can link to external resources, other pages on the same site, or specific sections within a page. - Forms and User Input: Forms in HTML are used to collect user input. You can create forms using
the
<form>tag, with elements like<input>,<select>, and<textarea>allowing users to enter data. Forms can also include buttons<button>to submit the data to a server. - Metadata and
<meta>Tags: Metadata is information about the web page that doesn't appear directly on the page itself but can be used by browsers and search engines. The<meta>tag is used to specify the character encoding, author, viewport settings, and SEO-related (SEO: Search Engine Optimization) information such as keywords and descriptions. - Semantic HTML: Using semantic HTML elements improves the readability of the code and enhances accessibility.
Tags like
<header>,<nav>,<article>,<section>, and<footer>help define the structure of a page in a more meaningful way, which can be better understood by both developers and search engines. - HTML5 Features: HTML5 introduces several new elements and features, such as the
<video>and<audio>tags, which allow embedding media content directly into the page. It also introduces the<canvas>element for drawing graphics and animations on the fly using JavaScript. - Accessibility Considerations: Accessibility is a critical aspect of web development. It's essential to include
proper attributes such as
aria-labelto help screen readers understand the content. Also, ensuring that all images have descriptive alt text is a best practice to ensure that visually impaired users can still engage with your website.
I suggest to not only learn more about html outside of this blog (maybe check out the website I sourced this information from) but to also code what you learned into a code editor or IDE. One code editor I recommend is CodePen, which is an online web browser to code creative web pages using html, css, and javascript!
CodePen is what I used as I was navigating to learn how to make a web page before I utilized Visual Studio Code.
Thank you for reading my first blog, I understand that it looks very simple and boring but I hope that you stick around and see my progress as I create more!