Comprehensive HTML Guide
HTML Head
The <head> element contains meta-information about the document, including the title and links to CSS files:
<head>
<meta charset="UTF-8">
<title>Document Title</title>
<link rel="stylesheet" href="styles.css">
</head>HTML Layout
HTML provides elements for creating a layout, such as <header>, <nav>, <main>, and <footer>. These elements help structure the page content:
<header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
</header>
<main>
<section>Content</section>
</main>
<footer>
<p>Footer content</p>
</footer>HTML Responsive
Responsive design ensures that web pages look good on all devices. Use the <meta name="viewport"> tag for responsive design and CSS media queries to adjust styles:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Example of a media query:
@media (max-width: 600px) {
body {
font-size: 14px;
}
}HTML Computer Code
For displaying computer code, use the <code> and <pre> tags. This preserves formatting and displays code clearly:
<pre>
<code>
console.log('Hello, World!');
</code>
</pre>HTML Semantics
Semantic HTML tags provide meaning to the content, improving accessibility and SEO. Examples include:
<article>- Represents a self-contained piece of content<section>- Represents a section of related content<aside>- Represents content aside from the main content<footer>- Represents the footer for a section or document
HTML Style Guide
A style guide ensures consistent HTML code. Key points include:
- Use lowercase for all HTML tags and attributes
- Close all tags
- Use double quotes for attributes
- Indent nested elements for readability
HTML Entities
HTML entities are used to display special characters. They start with an ampersand (&) and end with a semicolon (;):
- & - Ampersand
- < - Less-than
- > - Greater-than
- " - Double quotation mark
- ' - Single quotation mark
HTML Symbols
Symbols can be inserted using HTML entities. For example:
<p>© 2024 Company Name</p>HTML Emojis
Emojis can be used directly in HTML or via Unicode. Example:
<p>Hello World! 🌍</p>HTML Charsets
The charset attribute specifies the character encoding. For example:
<meta charset="UTF-8">HTML URL Encode
URL encoding converts special characters into a format suitable for URLs. For example:
https://example.com/?search=HTML%20encodingHTML vs XHTML
HTML and XHTML are both markup languages, but XHTML is stricter. XHTML follows XML syntax rules and requires that:
- All tags must be closed
- All attributes must be quoted
- Elements must be nested properly
Example of XHTML doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
0 Comments