HTML tells the browser about the content structure. For example, is it a heading or a paragraph just like the structure of a book or newspaper. Or is it a section or an article. Is some content a part of header or footer. We tell the browser about the structure of our webpage using tags which is simply text enclosed in angle bracket, like <header>. Most tags come in pairs - opening tag and closing tag, with content inside. The opening tag, closing tag and content inside these tags makes up an element.
Where do we start?
<!DOCTYPE html> tells the browser it's an HTML5 document <html> root of the document <head> meta data about the page <title>...</title> title meta data, text shown in browser's tab ... </head> head tag is closed <body> stuff that gets displayed on the page <h1>...</h1> main heading (usually one per page) <p>...</p> paragraph, chunk of text ... more elements </body> close the body </html> close the html document
Which text is important?
Use <strong> and <em> tags inside paragraph element:
<p><strong>Attention:</strong> Watch out for falling code blocks!</p> <p>This is <em>really</em> important.</p>
How to link to other pages?
Use <a> tag with href attribute pointing to the page:
Visit <a href="https://google.com">google</a> to search for stuff. Here is my <a href="books/book-collection.html">book collection.
- external page links must start with http:// or https://
- internal page links use relative path from root directory
Create lists with
Ordered lists are created with
<ol> tag and unordered lists with
<ul> tag. Each list element go inside
<ol> <li>Make a list</li> <li>Go shopping</li> </ol> <ul> <li>Buttermilk</li> <li>Eggs</li> </ul>
How do I add images?
Images are added using
<img> tag with src attribute pointing to image and alt attribute describing the image:
<img src="images/moon.jpg" alt="full moon"> <img src="images/logo.jpg" alt="">
- images don't have a separate closing tag
- alt attribute is required for the html to be valid. It is used for screen reader to correctly for accessibility.
- for decorative images (like website logo), use