{"id":22349067,"url":"https://github.com/afsify/html","last_synced_at":"2026-03-19T22:29:52.502Z","repository":{"id":261053742,"uuid":"873583624","full_name":"afsify/html","owner":"afsify","description":"Essential notes on HTML structure and semantics. Explore key elements and best practices for building accessible web pages. A must-have guide for any web developer.","archived":false,"fork":false,"pushed_at":"2024-11-04T12:18:41.000Z","size":88,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-10T18:50:41.756Z","etag":null,"topics":["html","notes","web"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/afsify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-16T12:14:23.000Z","updated_at":"2024-11-04T12:18:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"566a7abf-f299-4369-93fc-858d3834c2b6","html_url":"https://github.com/afsify/html","commit_stats":null,"previous_names":["afsify/html"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/afsify/html","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afsify%2Fhtml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afsify%2Fhtml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afsify%2Fhtml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afsify%2Fhtml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/afsify","download_url":"https://codeload.github.com/afsify/html/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afsify%2Fhtml/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29407264,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-13T06:24:03.484Z","status":"ssl_error","status_checked_at":"2026-02-13T06:23:12.830Z","response_time":78,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","notes","web"],"created_at":"2024-12-04T11:07:16.446Z","updated_at":"2026-02-13T13:07:19.600Z","avatar_url":"https://github.com/afsify.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML\n\n## What is HTML?\n\nHTML (Hypertext Markup Language) is the standard markup language used for creating web pages. It provides the basic structure for web content, allowing developers to format text, embed images, create links, and structure documents. HTML elements are represented by tags, which tell the web browser how to display the content.\n\n## Uses\n\nHTML is commonly used for:\n\n- **Web Page Structure:** Forms the backbone of web pages, defining their structure and layout.\n  \n- **Content Formatting:** Allows developers to format text, images, tables, and multimedia content.\n\n- **Hyperlinks:** Facilitates linking to other web pages or resources, creating a web of interconnected documents.\n\n- **Embedding Multimedia:** Supports the inclusion of audio, video, and interactive elements within web pages.\n\n## Important Topics\n\n### 1. HTML Elements\n\nHTML consists of various elements that define the structure and content of a webpage. Each element is represented by a tag, such as `\u003cdiv\u003e`, `\u003ch1\u003e`, `\u003cp\u003e`, and many others.\n\n### 2. Attributes\n\nHTML elements can have attributes that provide additional information about the element. Attributes are always specified in the opening tag and typically come in name/value pairs.\n\n### 3. Semantic HTML\n\nSemantic HTML involves using HTML markup that conveys meaning about the content, such as `\u003cheader\u003e`, `\u003cfooter\u003e`, `\u003carticle\u003e`, and `\u003csection\u003e`. This enhances accessibility and SEO.\n\n## Key Features\n\n1. **Basic Structure:** HTML provides a clear structure for web pages using elements like headings, paragraphs, lists, and links.\n\n2. **Hyperlinks:** Enables easy navigation between web pages through anchor tags (`\u003ca\u003e`).\n\n3. **Forms and Input:** Supports the creation of interactive forms for user input with various input types.\n\n4. **Multimedia Support:** Allows embedding images (`\u003cimg\u003e`), audio (`\u003caudio\u003e`), and video (`\u003cvideo\u003e`) for rich content.\n\n5. **Responsive Design:** Works with CSS and JavaScript to create responsive web designs that adapt to different screen sizes.\n\n6. **Cross-Browser Compatibility:** Ensures that web pages are rendered consistently across different web browsers.\n\n## Best Practices for HTML\n\nBelow are some best practices to follow while working with HTML to ensure clean, efficient, and accessible web documents.\n\n### Use of Semantic Tags\n\n**Enhance Meaning with Semantic HTML:**\n\n- Use semantic tags to give meaning to the content structure.\n  \n**Example:**\n\n```html\n\u003cheader\u003e\n  \u003ch1\u003eWelcome to My Website\u003c/h1\u003e\n\u003c/header\u003e\n\u003carticle\u003e\n  \u003ch2\u003eArticle Title\u003c/h2\u003e\n  \u003cp\u003eThis is a sample article.\u003c/p\u003e\n\u003c/article\u003e\n```\n\n### Accessibility\n\n**Make Your Website Accessible:**\n\n- Use appropriate alt attributes for images.\n- Ensure that form elements have associated labels.\n  \n**Example:**\n\n```html\n\u003cimg src=\"image.jpg\" alt=\"Description of image\"\u003e\n\u003clabel for=\"name\"\u003eName:\u003c/label\u003e\n\u003cinput type=\"text\" id=\"name\" name=\"name\"\u003e\n```\n\n### Proper Document Structure\n\n**Maintain a Clear Document Structure:**\n\n- Use a proper doctype and structure your HTML document with `\u003chtml\u003e`, `\u003chead\u003e`, and `\u003cbody\u003e` tags.\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eMy Web Page\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ch1\u003eHello, World!\u003c/h1\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Validation\n\n**Validate Your HTML:**\n\n- Use validation tools to check for errors and ensure compliance with HTML standards.\n\n### Performance Optimization\n\n**Optimize Performance:**\n\n- Minimize the use of large images and optimize them for faster loading times.\n- Use external stylesheets and scripts to improve page load speed.\n\n## Getting Started\n\nTo get started with HTML, follow these steps:\n\n1. **Create a New HTML File:**\n\n   Create a new file with the `.html` extension, for example, `index.html`.\n\n2. **Write Your HTML Code:**\n\n   Start coding your HTML structure within the file.\n\n3. **Open the HTML File in a Browser:**\n\n   Double-click the HTML file or open it through a web browser to view your webpage.\n\n## Common HTML Tags\n\n**Basic HTML Tags:**\n\n- **Paragraph:** `\u003cp\u003eYour text here\u003c/p\u003e`\n- **Heading 1:** `\u003ch1\u003eYour Heading\u003c/h1\u003e`\n- **Link:** `\u003ca href=\"https://example.com\"\u003eClick Here\u003c/a\u003e`\n- **Image:** `\u003cimg src=\"image.jpg\" alt=\"Image Description\"\u003e`\n- **List:**\n\n```html\n  \u003cul\u003e\n    \u003cli\u003eItem 1\u003c/li\u003e\n    \u003cli\u003eItem 2\u003c/li\u003e\n  \u003c/ul\u003e\n```\n\n## Clone the Repository\n\nIn the terminal, use the following command:\n\n```bash\ngit clone https://github.com/afsify/html.git\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafsify%2Fhtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fafsify%2Fhtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafsify%2Fhtml/lists"}