Fundamentals
HTML
#Overview
HTML (Hypertext Markup Language) is a standard markup language used for creating the structure and content of web pages. It forms the backbone of every webpage you see on the internet. HTML uses tags to define the structure and elements within a document, allowing browsers to interpret and display the content appropriately.
#Beginner Concepts
Document Structure
An HTML document is structured using HTML tags. The basic structure of an HTML document includes the HTML tag, head tag, and body tag.
<!DOCTYPE html> <!-- determines the document type i.e HTML5 -->
<html lang="en"> <!-- start of HTML code -->
<!--head contains metadata for
search engines and browsers to use -->
<head>
<title>Document</title>
</head>
<body>
<!-- The content of the website is written inside the body tag -->
</body>
</html>HTML Tags
HTML tags are used to define the structure and content of an HTML document. Tags are enclosed in angle brackets and placed before and after the content they represent.
HTML Attributes
Attributes are part of tags that provides additional information to the elements. This can be for specific elements like <img> or for providing class or ids.
<p> <!-- opening tag -->
The p tag defines a paragraph tag
</p> <!-- closing tag -->
<!-- The src and alt are considered attributes -->
<img src="" alt="" />
<!-- some tags can be self-closed using / before closing bracket -->
Resources
MDN Web Docs and W3Schools are your go-to websites to check up on any information related to HTML, CSS, or JavaScript.
#Forms
HTML forms allow users to input data and submit it to a server. This can be seen a lot in login/register pages or contact pages. You can create forms using the <form> tag, and various form controls such as text inputs, checkboxes, radio buttons, select dropdowns, and buttons. The data from forms can be processed using server-side technologies like PHP or JavaScript.
<form action="">
<input type="text">
<label for="">Name</label>
</form>Resources
#Semantic HTML
Semantic HTML is a way of writing HTML that emphasizes the meaning of the content rather than its presentation. This is achieved by using HTML tags that have specific semantic meanings, such as <header>, <footer>, <nav>, <section>, <article>, and, <aside> along with others.
By using these tags, you can create a more accessible and easily understood web page that is also better optimized for search engines. Additionally, using semantic HTML can make it easier to maintain and update your code as it is more organized and easier to understand.
Overall, using semantic HTML is an important best practice for any web developer who wants to create accessible, well-organized, and easily maintained web pages and applications.
<!-- Do not write like this -->
<div>
<!-- navigation links -->
<a href="/home">Home</a>
<a href="/home">About</a>
<a href="/home">Contact</a>
</div>
<div>
<!-- Main Content here -->
</div>
<!-- The semantic approach -->
<header>
<nav>
<ul>
<!-- links -->
</ul>
</nav>
</header>
<main>
<!-- for all the main contents of the page -->
</main>
<footer>
<!-- footer -->
</footer>