HTML, once a cornerstone of the digital landscape, is starting to slip from the minds of the younger generation. As technology continues to evolve, it’s essential to stay updated and maintain our understanding of HTML. Let’s dive in and refresh our knowledge to ensure we’re prepared for the digital challenges ahead.
What is HTML?
HTML is the most basic, and the most important language a developer should be aware of. HTML stands for Hypertext Markup Language. It is the standard markup language used to create and design web pages. HTML provides the structure and framework for web content by using a system of tags and attributes to define elements within a document. These elements include headings, paragraphs, images, links, lists, forms, and more.
HTML documents contain elements enclosed in opening and closing tags, which describe the content and how it should be displayed in a web browser.
<!DOCTYPE html> <html> <head> <title>My Web Page</title> </head> <body> <h1>Welcome to My Web Page</h1> <p>This is a paragraph of text.</p> <img src="image.jpg" alt="An image"> <a href="https://www.example.com">Visit Example.com</a> </body> </html>
- < !DOCTYPE html>: declares the document type and HTML version being used.
- < html>: the document's root element, containing all other HTML elements.
- < head>: contains meta-information about the document, such as its title, character encoding, and links to external resources.
- < title>: specifies the web page's title, displayed in the browser's title bar or tab.
- < body>: contains the main content of the web page.
- < h1>: is a heading element indicating the page's main heading.
- < p>: is a paragraph element containing text content.
- < img>: is an image element displaying an image on the page.
- < a>: is an anchor element that hyperlinks to another web page.
The key components of HTML include:
- Elements: HTML documents are structured with elements using tags. Elements define the structure and content of the document, such as headings, paragraphs, links, images, lists, forms, etc.
- The HTML element is everything from the start tag to the end tag:
- <tagname> Content goes here… </tagname>
</p><h1>First Heading</h1><p></p><p>Paragraph content...</p><p>
- Tags: Tags are the building blocks of HTML. They define the beginning and end of an element and are enclosed in angle brackets. Tags come in pairs: opening tags (<tag>) and closing tags (</tag>). Some elements, like images and line breaks, are self-closing and do not require a closing tag.
- Attributes: Attributes provide additional information about an element and are specified within the opening tag. They are usually in the form of name-value pairs, such as src=”image.jpg” for specifying the image source or href=”https://www.rynerworld.com” for specifying the hyperlink destination.
<br />The <a> tag having href as its attribute:<br /></a><a href="rynerworld.com"> Visit Me </a><br />
<br />The <img /> tag having src as its attribute:<br /><img src="img_boy.jpg" br="" /> <img src="https://rynerworld.com/wp-content/uploads/2020/09/rw-work-your-dreams-thumbnail-2048x2048.png" /><br />
- Document Structure: HTML documents have a specific structure defined by tags like <!DOCTYPE html>, <html>, <head>, and <body>. These tags define the document type, root element, metadata, and main content.
- Text Content: HTML allows the inclusion of text content within various elements such as paragraphs (<p>), headings (<h1>-<h6>), lists (<ul>, <ol>, <li>), and more. Text content forms the core of most web pages.
- Links and Anchors: Hyperlinks are created using the anchor element (<a>), allowing users to navigate between different web pages or sections on the same page.
- Images: Images are included in HTML documents using the image element (<img>) with the src attribute specifying the image file’s URL or path.
- Forms: HTML provides form elements (<form>, <input>, <textarea>, <select>, etc.) for collecting user input, such as text, checkboxes, radio buttons, and dropdown menus.
- Tables: Tables (<table>, <tr>, <td>, <th>) are used to organize and display tabular data in rows and columns.
- Comments: Comments in HTML are written using <!– comment –> syntax and are not displayed in the browser. They are useful for adding notes or explanations within the HTML code for developers.
Understanding these components is essential for creating well-structured and semantically meaningful HTML documents.
Here’s a quick video on how the basic structure of HTML works:
As you can see that’s pretty much it LOL
HAPPY CODING!!!!
1 Comment
HTML + Bootstrap Starting Template – Ryner World · March 26, 2024 at 3:52 am
[…] below, ensure you are familiar with HTML and Bootstrap. A brief overview of HTML can be found here [https://rynerworld.com/what-is-html/], and for Bootstrap, here’s the overview and main link […]