Giter VIP home page Giter VIP logo

html-essentials's Introduction

HTML ESSENTIALS

Resources

Basic Page Structure

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="A page for exploring basic HTML documents">
        <title>Basic HTML Document</title>
    </head>
    <body>
        <h1>Page Content</h1>
        <p> The main page content appears inside the <body>body</body> tag. HTML contains several elements tahta llow you to properly structure and format your content, which we'll cover later.</p>
    </body>
</html>

DOCTYPE declarations

<!DOCTYPE HTML>
  • Triggers something called quirks mode. Makes sure your webpage is rendered in the right format

The Document head

<html lang="en">
</html>
  • Not required but nice to set the language
  • Useful for screen readers in terms of how they enunciate the text as well as online translators
<head>
    <meta charset="utf-8">
</head>
  • uses proper characters when rendering the page
<head>
    <meta name="description" content="A page for exploring basic HTML documents">
</head>
  • brief summary of the page
  • used for search engines on the results page
<head>
    <title>Basic HTML Document</title>
</head>
  • Unprofessional without online
  • shows up in search results & on the browser tab

The Document body

<body>
</body>
  • sibling of head tag
  • the body tag is necessary for us to have any visible content whatsoever
  • the body element represents the visual elements on the page

Understanding content models

  • almost every element in HTML belongs to a content models
  • these define the type of content expected inside an element and control syntax rules such as element nesting

Prior to HTML5, there were two models

  • Block Level Elements take up their own line within the flow of the docment.
  • Inline Level Elements basically appear within the flow of other content.

Updates in HTML5 Content models now include flow, metadata, embedded, interactive, heading, phrasing, and sectioning

Metadata This is content that's defined as setting up the presentation or the behavior of the rest of the content. You will pimarily find these elements in the head of the document. And it's going to contain things like metatags, no-script tags, script tags, style tags, the title tag of pages, etc.

Embedded

<body>
</body>

Formatting Page Content

<pre>Typically used with coding examples.</pre>

Using Headings

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
  • Prior to HTML5, the only sectioning elements that we had for our page were headers.
  • Used to create and rank sections within our page.
  • Can use multiple H1 headers to a page
  • Don't skip a series of headings. For example, you don't want to go from H1 to H5.

Formatting Paragraphs

  • if you don't wrap text in an element, most browsers are going to default the formatting like a paragraph

Controlling line breaks

html-essentials's People

Contributors

lisaofalltrades avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.