#ol tag in html

[xiaokuer-schmetterling]

PODFICCER (and fic author) RESOURCE: things i learned about HTML today

-> from this reference work on ao3: A Complete Guide to 'Limited HTML' on AO3 by CodenameCarrot (please go leave a comment if you find anything here useful !!!)

EDIT: OMG Y'ALL I HAVE BEEN HAVING SO MUCH NERDY GEEKY FUN TWEAKING MY PODFIC HOW-TO GUIDE WITH THIS STUFF

headings, blockquote, div

----

-----

html currently allowed by ao3 html sanitizer

a. abbr. acronym. address. b. big. blockquote. br. caption. center. cite. code. col. colgroup. details. dd. del. dfn. div. dl. dt. em. figcaption. figure. h1. h2. h3. h4. h5. h6. hr. i. img. ins. kbd. li. ol. p. pre. q. rp. rt. ruby. s. samp. small. span. strike. strong. sub. summary. sup. table. tbody. td. tfoot. th. thead. tr. tt. u. ul. var.

-----

in-line (text) formatting tags supported by ao3

-----

OMG LOOK AT THIS !!! IDK WHEN I WOULD EVER USE THIS BUT LOOK HOW COOL !!!

-----

paragraphs & p formats: archiveofourown.org/works/5191202/chapters/161901154#AddParagraphs

-----

omg I'VE ALWAYS WONDERED HOW TO GET THAT LINE BREAK THINGY IN THE MIDDLE OF THE PAGE !!!

-----

end post

[ameliapples]

I see people on other platforms talking about cohost going down and I generally see the same few complaints being trotted out over and over as the reasons why it failed and was doomed to fail from the start. "It kept logging me out", "there was no app", "my timeline was always dead", "I got so little engagement", "I had to wait how long before I could post??". It's the stuff people have complained about with the platform forever, and while I think these complaints are generally a bit silly, they do arrive at what's probably the real reason we're all mourning the impending death of eggbug without realizing it.

A big part of what made cohost so different from other social media platforms is that it was the only platform where you had to actually want to be there. Every other platform is basically designed to hold you at gunpoint and force your attention and engagement 24/7. The gun in this situation being mostly fomo - everything is happening so rapidly, there's so much to keep track of, what if you miss something? what if it's something really big and you don't tweet about it within the first 5 minutes of it happening? what if you miss the next Main Character? there's a new one every day and they're forgotten as quickly as they arrive, but a month from now someone's gonna bring it up as a joke and you won't get it and you'll look lame and cringe! you don't want to look Lame and also Cringe, do you?

cohost never felt that way. If you were there, it was because you genuinely wanted to be. The site was designed to ensure that, even. You had to wait about a week after you made an account to ensure you weren't a spam bot before you could post at all. Once you could post, there was no algorithm. None. Nothing was fed into your feed that wasn't directly posted to a tag you follow or a person you follow. If you wanted to see something outside of that, you'd have to do the legwork browsing tags yourself. For budgetary reasons, there was never an app, so you had to either learn to set up a shortcut icon on your phone or else open it manually in a browser. It also logged you out every 30 days as a privacy and security measure. You had to want to jump through all these hoops to use cohost.

And what did you get for doing the effort? Peace. A social media environment that didn't feel like you were constantly stood in the center of Time Square with all the noise and marquees and heckling voices focused directly at you at all times. It didn't try to be a news site, or an advertising platform. No algorithm meant you only got what you actively chose to see, and nothing more. You could say in your head "lemme check cohost real quick", and you could be up-to-date on your timeline in under 5 minutes. It was a place you would willingly go to check in on friends or look at cool art or play around with html like it was 2004 again, not get sucked into for hours doom scrolling. Because there was no algorithm, no push for engagement, no numbers that publicly went up, no one was competing for attention or clout. No one I ever met on cohost was immediately antagonistic, or rude, or trying to dunk someone. People were chill, FRIENDLY even, in a way I have never seen on twitter or tumblr even back in "the good ol days". The adversarial, cliquey, petty nonsense we all expect from social media was almost entirely absent. It was peaceful, quiet. It was the only social media platform I've used to not give me anxiety, or a migraine.

So of course it fell apart. We live in a world where things require money to simply exist, and cohost was designed basically not to make any by virtue of having virtues. It refused to advertise, sell user data in any way, open a weird shop where you can put microscopic pngs next to your name, or force people's worst impulses in order to keep them on the site for as long as possible. It ran off merch purchases and cohost plus, which was meant to give you premium features but never got the chance to do much more than upping your file size limit on uploads. It was essentially a $5 a month donation. It wasn't enough, clearly.

So now it's going, but I don't really think saying it "failed" is right. If anything, it's made it clear what a failure the rest of the social media ecosystem is. Usually when a platform is dying, or looks to be dying (in the case of twitter, or tumblr post 2018), people immediately make plans to jump ship to a new one. But upon hearing that cohost was shutting down, my reaction, as well as that of a pretty large portion of the user base, was that we'd rather spend time on other things. Cohost was so different an atmosphere it seems to have had a healing property on people who used it. It wasn't perfect, moderation was spotty at times due to the limited staff, people had their blind spots and biases they sometimes struggled to work through. But it was better than what we've grown to expect. It made you realize how tiring the rest of the internet has become, and that you don't need to deal with it. You can better spend that time, doing things you enjoy with people you enjoy. Maybe even outside, if you can muster it. You might even meet some cool people out there, wearing cool patches, eulogizing a cool little website, with a funny lil bug shaped like an egg.

[cringefail-clown]

1, 5 and 6 for the fic ask game?

1.favorite fic you read this year?: *sighs* BONES OF BLACK MARROW (M/M, rated E, Dirk Strider/Jake English, 82/82) - jesus christ this fucking fic. i think about it to this day from time to time. think im gonna reread it soon. i fell in love with the crazy html use and the characterisation of both dirk and jake, but ESPECIALLY jake. hes so good here, unhinged an whimsical. obviously there are mature themes so proceed with caution and read the tags.

5.longest fic you read this year?: Defragmentation (Gen, rated M, platonic, 80/?) - found it through dave & dirk tag on ao3 (bc i needed some good ole sibling bonding sue me) and fell in love. basically sburb glitches out and sends all the characters into unholy amalgamation of multiple timelines. dirk has to figure out what the shit is going on, while being in two places at once - both as bro strider in texas before the game and in the medium, god-tiered and traversing though shattered paradox space. its great. and its fucking long, i mean 355,472 words long, and its ongoing. the great fucking gatsby is 47,094 words, for the comparison. so its a little bit of a commitment, but i cannot recommend it enough!

6.shortest fic you read this year?: We're Parallel Sinking Ships (Gen, rated T, platonic, 1/1) - another dirk and dave strider feels fic! im a sucker for fics that explore how they manage their relationship as brothers with their baggage after the game. this one is short and sweet, dirk tells dave a story from his childhood when he almost drowned and hallucinated his bro.

[queriesntheories]

Internet Trinkets Page Development Continues...!

Currently in the process of kickstarting development on the Internet Trinkets webpage from my big ol' tag list. Originally I was gonna ramp my html knowledge into high gear to make it look pretty, but that killed my motivation real quick. So, I've found a new place to host it, and I have just now, at almost 1am, finished compiling every link i've posted and every worthwhile bookmark I've collected since 2017.

We're at ~200 pages. As a starting point. And that's before I have to do even more categorisation than I've already done!

(inhale) (exhale)

This might take some time... but I'm very excited to put this all together. Please be patient! But also send me more things! I want this to be the best it can be for you!!

[saide-hossain]

Let's understand HTML

Cover these topics to complete your HTML journey.

HTML (HyperText Markup Language) is the standard language used to create web pages. Here's a comprehensive list of key topics in HTML:

1. Basics of HTML

Introduction to HTML

HTML Document Structure

HTML Tags and Elements

HTML Attributes

HTML Comments

HTML Doctype

2. HTML Text Formatting

Headings (<h1> to <h6>)

Paragraphs (<p>)

Line Breaks (<br>)

Horizontal Lines (<hr>)

Bold Text (<b>, <strong>)

Italic Text (<i>, <em>)

Underlined Text (<u>)

Superscript (<sup>) and Subscript (<sub>)

3. HTML Links

Hyperlinks (<a>)

Target Attribute

Creating Email Links

4. HTML Lists

Ordered Lists (<ol>)

Unordered Lists (<ul>)

Description Lists (<dl>)

Nesting Lists

5. HTML Tables

Table (<table>)

Table Rows (<tr>)

Table Data (<td>)

Table Headings (<th>)

Table Caption (<caption>)

Merging Cells (rowspan, colspan)

Table Borders and Styling

6. HTML Forms

Form (<form>)

Input Types (<input>)

Text Fields (<input type="text">)

Password Fields (<input type="password">)

Radio Buttons (<input type="radio">)

Checkboxes (<input type="checkbox">)

Drop-down Lists (<select>)

Textarea (<textarea>)

Buttons (<button>, <input type="submit">)

Labels (<label>)

Form Action and Method Attributes

7. HTML Media

Images (<img>)

Image Maps

Audio (<audio>)

Video (<video>)

Embedding Media (<embed>)

Object Element (<object>)

Iframes (<iframe>)

8. HTML Semantic Elements

Header (<header>)

Footer (<footer>)

Article (<article>)

Section (<section>)

Aside (<aside>)

Nav (<nav>)

Main (<main>)

Figure (<figure>), Figcaption (<figcaption>)

9. HTML5 New Elements

Canvas (<canvas>)

SVG (<svg>)

Data Attributes

Output Element (<output>)

Progress (<progress>)

Meter (<meter>)

Details (<details>)

Summary (<summary>)

10. HTML Graphics

Scalable Vector Graphics (SVG)

Canvas

Inline SVG

Path Element

11. HTML APIs

Geolocation API

Drag and Drop API

Web Storage API (localStorage and sessionStorage)

Web Workers

History API

12. HTML Entities

Character Entities

Symbol Entities

13. HTML Meta Information

Meta Tags (<meta>)

Setting Character Set (<meta charset="UTF-8">)

Responsive Web Design Meta Tag

SEO-related Meta Tags

14. HTML Best Practices

Accessibility (ARIA roles and attributes)

Semantic HTML

SEO (Search Engine Optimization) Basics

Mobile-Friendly HTML

15. HTML Integration with CSS and JavaScript

Linking CSS (<link>, <style>)

Adding JavaScript (<script>)

Inline CSS and JavaScript

External CSS and JavaScript Files

16. Advanced HTML Concepts

HTML Templates (<template>)

Custom Data Attributes (data-*)

HTML Imports (Deprecated in favor of JavaScript modules)

Web Components

These topics cover the breadth of HTML and will give you a strong foundation for web development.

Full course link for free: https://shorturl.at/igVyr

[raviws23]

Exploring the Basics of HTML: A Journey into Web Development with an Online Compiler for HTML

In the vast universe of web development, HTML (Hypertext Markup Language) is the essential building block that transforms creative ideas into interactive web experiences. HTML provides the structural foundation for web content, allowing web developers to create well-organized and readable web pages. In this article, we will embark on a journey into the basics of HTML, exploring its core elements and their functions. Additionally, we will introduce you to a valuable resource: the Online Compiler for HTML, a tool that empowers aspiring web developers to experiment, test, and refine their HTML skills in a practical and user-friendly online environment.

HTML: The Language of the Web

HTML is the language of the web, serving as a markup language that defines the structure of web content. Its fundamental elements, or tags, are used to identify and format various aspects of a web page. Let's dive into some of the basic elements that form the foundation of HTML:

1. HTML Document Structure: An HTML document starts with the <!DOCTYPE html> declaration, which defines the document type. It is followed by the <html> element, which encapsulates the entire document. The document is divided into two main sections: the <head> and the <body>. The <head> contains metadata and information about the document, such as the page title, while the <body> contains the visible content.

2. Headings: Headings are essential for structuring content and providing hierarchy to text. HTML offers six levels of headings, from <h1> (the highest level) to <h6> (the lowest level). Headings help create a clear and organized content structure.

3. Paragraphs: To create paragraphs of text, the <p> element is used. This element defines blocks of text separated by blank lines and is a fundamental tool for organizing and formatting content.

4. Lists: HTML allows for the creation of both ordered (numbered) and unordered (bulleted) lists. Ordered lists are created with the <ol> element and list items with <li>. Unordered lists are created with the <ul> element, also with list items using `<li>.

5. Links: Hyperlinks are a crucial feature of the web. HTML provides the <a> (anchor) element for creating links. The href attribute within the <a> element specifies the URL of the page or resource to which the link should navigate.

6. Images: To embed images in a web page, HTML employs the <img> element. The src attribute within the <img> element points to the image file's location.

Introducing the Online Compiler for HTML

To practice and experiment with these basic HTML elements, there's a valuable resource at your disposal: the Online Compiler for HTML. This user-friendly online tool allows aspiring web developers to write, modify, and test HTML code in a practical environment. What sets it apart is its real-time rendering feature, enabling users to see immediate results as they make changes to their HTML code. It's an ideal platform for beginners and experienced developers alike to fine-tune their HTML skills and explore the language's capabilities.

Conclusion: The Journey Begins

Understanding the basics of HTML is the first step in your journey into the world of web development. HTML's fundamental elements serve as the building blocks upon which you'll construct your web pages. With the assistance of the Online Compiler for HTML, you have a practical and interactive resource to help you explore and master the language. As you become more proficient in HTML, you'll gain the ability to structure content, create links, and embed images, laying the foundation for the websites and web applications of the future. The journey into web development has just begun, and HTML is your trusty guide.

[beach-illustrations]

Would love to hear your review of Artfol once you've settled in a bit! (Probably wouldn't hurt for me to have a more presentable art archive somewhere either, so I'm curious about the alternatives)

of course!! after using artfol for about a week, i do like it! it's still very new, so i wasn't expecting too much off rip from it but it definitely has some good potential if it gets successful!

putting this under a read more because, as per usual, this got long.

to start: the good stuff! good, robust organization thus far for artists. all the art you post gets automatically put in its own separate tab on your profile called gallery in chronological order and any other art and text posts that you share as well as your own art and text posts get put into another tab called feed. the feed is in chronological order from newest to oldest and it's suuuuper nice being able to have an easy place that contains all your original work people can go to without the hassle of punching in specific tags in a search bar (or inputting them into the website url) and hoping for the best. the feed can then be further organized between posts and art, art submitted to challenges, art submitted to submissions and reshares of other peoples stuff.

you can also make collections for your own gallery, so you can have all your fan art in one collection, ocs in another, etc. this isn't just for personal organization either; your separate collections are displayed under the about section on your profile or, if you've got them, links section! i honestly like this a lot. most of my experience of running an art blog comes from tumblr and getting separate pages set up on your blog, while not horribly difficult, does require a bit of knowledge regarding html and manually inputting website urls where you want the links to go. having all of this steam lined is much better. all of this is relatively easy to figure out as long as you're open to just clicking buttons on the website to see what they do, as far as i could find there's no official tutorial available. you can only have a limited number of these without a premium subscription but i haven't a clue as to what that limit even is.

you can also effectively pin certain art pieces that you're proud of to the top of your gallery by putting them in a featured selection. no idea how to do this yet but i do think this in of itself is neat.

customization is light but they cover the basics well. they've got a nice bio and announcement/secondary heading type feature under your username that you can customize, as well as a nice big space for an icon and a big ol' banner you can put your art in. other than that, you can choose a 'theme color' as artfol calls it but it just determines the color of the bar under your banner as far as i can tell on the website version. they also have a separate area for links that automatically turn into the websites icon you're linking back to.

custom warning tags!!! these fully blur the image and you can put as many words to warn others about the content of the art as you want to clarify what someone's getting into if they click show. at first i was worried i could only put one custom warning on an image but nope, it lets you write multiple warnings on the censored image if the NSFW and Gore filters aren't cutting it for the art.

speaking of which; artfol allows NSFW! in places where online spaces have been getting progressively sanitized because big corporations and google ad sense are the ones who can pay the bills of hosting thousands of images and videos on servers, it's nice to see that.

the challenges! other artists can issue challenges to others to either draw their characters in certain outfits, as certain creatures, drawing a piece of art in your style, etc. think some of the various art memes floating around on twitter, except this time they have their own dedicated category! i haven't done any challenges yet but this seems like a great way to socialize with other artists on artfol, as well as stretch your own art skills.

AI art is explicitly banned.

there is an algorithm however it prioritizes art made recently, so artists of all skill level and mediums get a shot at being seen on the front page which is nice! as far as i can tell, your home feed (which is very similar to tumblr's) is in chronological order and doesn't put in any suggested or recommended posts in the middle of the posts of the people you've chosen to follow. the like and share options are easily accessible and when you share someone else's art, it notifies them by telling them that you've pinged them which is... odd to me, but the website doesn't seem to auto credit them any other way in reshares (in contrast, tumblr keeps the OP's username and icon at the top of their own original post when it gets reblogged). i'm also something of a tumblr hermit so this could be a common reshare (reblog?) format else where for all i know and i'm just griping about nothing.

there is a premium subscription you can sign up for as i mentioned earlier. you get stuff like no ads (which you also get if you've got an adblocker on your browser), more collections can be made, you can upload cover art (icons, i think?) for your collections and the art you post, you can have custom profile theme colors (i guess they let you use the color wheel or a hex code instead of the pre seleced colors they already have?) you get more layouts for your featured art on your profile and you don't have to wait 60 days to change your username. oh, and you can make groups that people can join based around one particular thing, however i haven't touched any groups yet because none of them are all that appealing to me.

honestly, a lot of the premium subscription perks are very inconsequential to the core functionality of artfol which is a huuuuge bonus to the devs in my eyes. they easily could have paywalled commission pages or collections all together and them just giving you some extra customization perks instead shows me that the devs are actually focused on making an artist friendly website and app.

over all, artfol is relatively easy to navigate and upload your art to! the base features are solid however the website does have some downsides.

the bad:

the most egregious thing is that I haven't been able to and currently can't access the content guidelines or privacy policy pages. when I first signed up, artfol gave me a link to what the website claimed was the content guidelines however it just linked me to the news page and that really didn't sit well with me.

because the artfol website is so new, I am going to give them a chance and interpret this in the best faith possible and assume that it seems like this is just an issue of certain pages crashing, seeing as I used to be able to access the News page on artfol and now it's just gone like the other pages. on top of that, it seems like every link except for their twitter, android and apple download links, instagram and discord links at the bottom of the artfol website page is broken in the same way. out of all pages eating themselves the content guidelines and privacy policy ones feel like the worse ones to lose. I haven't been able to access the guidelines from the jump and it's been really frustrating. I just got done sending an e-mail to their contact e-mail, so hopefully something good comes from that. in the mean time i've also downloaded the app to try to see if i can find the guidelines and privacy policy on there. I've noticed people complaining about crashing pages in the mobile app reviews so hopefully this is just a case of a website page accidentally eating itself and it's just very unfortunate coincidence that it happens to be some very important pages affected by the crashes.

other than that, the other downsides are that the website takes like a minute and a half to load, clicking on a censored image to view it on your home feed takes you to the individual post and has you un-censor it there rather than directly from your home feed and some features are currently only available to mobile accounts such as commissions tabs, however i'm sure that will eventually be made available to the website version as well in due time. also, while uploading art, not including the custom censor tag or NSFW or gore filters, you can only put 5 tags on your art. these are all only minor annoyances and i'm sure they'll eventually be fixed in upcoming patches.

over all: asides from some concerning hiccups with missing pages, artfol seems very promising for a relatively new, bare bones website! the developers have very much taken a mobile app first, website later approach which at least to me isn't the end of the world, seeing how the website is already doing okay all things considered. the community seems nice and i'm planning on trying out some challenges soon to get more experience using it!

[scorittanius]

question, why isn't there a fanfic site medium that allows you to set yourself a name and pronoun and use it on name tags. like i feel like that wouldn't be too painfully hard to do with HTML, maybe i can test smtn like that out when i have the energy to learn a language that isn't good 'ol BBCode-

ex. for BBCode there could be a [setname] and [name] tag that allow for textboxes that fill in any text with the [name] tag, same for pronoun tags.

[abhay-saxena-seo-expert-delhi]

10 Steps to follow to Optimize Webpage as per (Answer Engine Optimization)

✅ 1. Understand User Intent (Especially Question-Based)

Identify what questions your target audience is asking.

Use tools like:

AlsoAsked.com

Answer the Public

Google’s "People Also Ask"

Semrush/ Ahrefs → Questions in Keyword Explorer

✅ 2. Use FAQ-style Content and Q&A Format

Answer specific questions in short, clear, direct answers (40–60 words) followed by detailed explanations.

Use H2/H3 for questions and answers right below them.

<h2>What is AEO in SEO?</h2>

<p>AEO (Answer Engine Optimization) is the process of optimizing content so that search engines can directly provide answers to users' queries, especially in featured snippets and voice search results.</p>

✅ 3. Optimize for Featured Snippets

Use common snippet formats:

Paragraphs: Direct, 40–60 word answers.

Lists: Use or for steps, how-tos.

Example with <ol> (Ordered List)

If someone searches “How to optimize for AEO,” you can write:

<h2>How to Optimize for AEO</h2>

<ol>

  <li>Identify user questions using tools like AnswerThePublic.</li>

  <li>Answer questions in short, clear sentences.</li>

  <li>Use structured data like FAQ schema.</li>

  <li>Add Q&A sections using H2 or H3 headings.</li>

</ol>

Example with <ul> (Unordered List)

For a list that doesn’t require order, like tools:

<h2>Best Tools for AEO</h2>

<ul>

  <li>AlsoAsked</li>

  <li>AnswerThePublic</li>

  <li>Google Search Console</li>

  <li>Semrush or Ahrefs</li>

</ul>

Tables: For comparisons or data.

Definitions: Clearly define terms with bold formatting or tags.

✅ 4. Use Structured Data (Schema Markup)

Implement relevant schema to help search engines understand and present your content:

FAQPage schema

HowTo schema

QAPage schema

Article or BlogPosting

Use Google’s Rich Results Test to validate

✅ 5. Build Topical Authority

Cover the full range of questions around a topic.

Create content clusters or topic hubs.

Interlink related content using contextual anchor texts.

✅ 7. Improve Technical SEO for AEO

Fast page speed

Mobile-friendly design

Crawlable and well-structured HTML

Logical heading hierarchy (H1 > H2 > H3, etc.)

✅ 8. Optimize for Voice Search

Use conversational language

Answer "who," "what," "when," "where," "why," and "how" queries

Prioritize local intent where applicable (especially for businesses)

✅ 9. Use Clear, Natural Language

Avoid jargon unless targeting a technical audience.

Use active voice, short sentences, and easy readability (aim for Grade 6–8 level).

📌 What It Means:

1. Avoid Jargon (unless necessary)

Don't use complex or technical terms unless your audience is expecting them.

If you must use them, explain them in simple terms.

❌ Example (too technical):

"Optimize your canonicalization strategy via server-side directives."

✅ AEO-friendly version:

"Make sure search engines only index one version of a page by setting the correct canonical URL."

2. Use Active Voice

Active voice is more direct, clear, and engaging.

❌ Passive Voice:

"The content was optimized by the SEO team."

✅ Active Voice:

"The SEO team optimized the content."

3. Short Sentences

Keep sentences under 20 words where possible.

One idea per sentence is best.

❌ Long sentence:

"To ensure your website content is found easily by users and featured in rich results, it is important to optimize it using structured data and clearly written content."

✅ AEO-optimized version:

"Use structured data. Write clearly so search engines can understand and feature your content."

4. Easy Readability (Grade 6–8 level)

Most people (and AI systems) prefer content written at a middle school reading level.

Tools like Hemingway Editor or Grammarly help check readability.

Tip: Use common words like:

“Start” instead of “commence”

“Help” instead of “assist”

“Use” instead of “utilize”

✅ Why This Helps AEO

Voice assistants and featured snippets favor quick, clear answers.

AI systems extract and present your content more accurately when it’s clean and direct.

Improves user experience, reducing bounce rates.

✅ 10. Keep Content Updated

Regularly refresh content with updated facts and figures.

Update answers to reflect the latest knowledge and guidelines.

[codingbitrecords]

HTML for Beginners Course Coding Bit

 HTML (HyperText Markup Language) is the standard language used to create and structure content on the web. It defines the structure of web pages using a system of tags and attributes. Every HTML document starts with a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body> sections. The content inside these tags is organized using elements like headings (<h1> to <h6>), paragraphs (<p>), links (<a>), images (<img>), lists (<ul>, <ol>, <li>), and more. HTML is not a programming language but a markup language, meaning it is used to "mark up" content to be displayed by web browsers. It works closely with CSS for styling and JavaScript for functionality, making it a fundamental building block of web development.        

Introduction to HTML (HyperText Markup Language)

Building the structure of web pages

Understanding tags, elements, and attributes

Creating headings, paragraphs, lists, links, images, and tables

Structuring content with divs and semantic tags

Forms and input elements                                                                                                                                                                                                                                                                                                                              📞 Phone Number: +91 9511803947

📧 Email Address: contact@codingbit.com         

[lord-html]

Efeito Wishlist 7.0

Olá pessoas queridas do meu s2.

Como o tumblr tava em reforma eu fui fazer oq? kkkk pesquisar tutos e fazer blends achei 2 tutos de efeitos wishlist ultra fofos ! vou postar os 2 separados ! 

PREVIEW DA WISHLIST

Então gostaram? Sim! Vamos aos códigos? Ah, vamos João!

Quase todos os tutos que eu posto eu sempre peço pra colar os scripts, mas esse não precisa ! ahaha ! então vamos colar logo o css do efeito, ou seja cole esse código abaixo logo depois de <style> e antes de </style>:

@font-face {font-family: "Pf Arma Five";src: url('http://static.tumblr.com/bigjj8s/1Tmm7vjp6/pf_arma_five.ttf');} ol{ counter-reset: li; /* Initiate a counter */ list-style: none; /* Remove default numbering */ *list-style: decimal; /* Keep using default numbering for IE6/7 */ font: 8px 'pf arma five'; padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255,255,255,.5); } ol ol{ margin: 0 0 0 2em; /* Add some left margin for inner lists */ } .rectangle-list a{ position: relative; display: block; padding: .4em .4em .4em .8em; *padding: .4em; margin: .5em 0 .5em 2.5em; background: #ddd; color: #444; text-decoration: none; transition: all .3s ease-out; } .rectangle-list a:hover{ background: #eee; } .rectangle-list a:before{ content: counter(li); counter-increment: li; position: absolute; left: -2.5em; top: 50%; margin-top: -1em; background: #fa8072; height: 2em; width: 2em; line-height: 2em; text-align: center; font-weight: bold; } .rectangle-list a:after{ position: absolute; content: ''; border: .5em solid transparent; left: -1em; top: 50%; margin-top: -.5em; transition: all .3s ease-out; } .rectangle-list a:hover:after{ left: -.5em; border-left-color: #fa8072; }

Logo depois de colar o css voce vai fazer as alterações que quiser como por exemplo a fonte, o tamanho da fonte, a cor do background etc… 

Agora que voce aplicou o css vamos para o html ou seja a aparição do efeito, cole esse código aonde quiser que o efeito apareça:

<ol class="rectangle-list"> <li><a href="http://land-of-designs.tumblr.com">Efeito Wishlist 6</a></li> <li><a href="http://land-of-designs.tumblr.com">Por João Netto</a></li> <li><a href="http://land-of-designs.tumblr.com">Dá like vai :3</a></li> <li><a href="http://land-of-designs.tumblr.com">Credita tbm </a></li> <li><a href="http://land-of-designs.tumblr.com">bjox <3</a></li> </ol>

Pronto, o efeito está funcionando já! adicione quantos quiser e lembre-se de nao tirar a tag <ol class=“rectangle-list>conteudo</ol> porque ele faz o efeito funcionar !

[jcmarchi]

Styling Counters in CSS

New Post has been published on https://thedigitalinsider.com/styling-counters-in-css/

Styling Counters in CSS

Yes, you are reading that correctly: This is indeed a guide to styling counters with CSS. Some of you are cheering, “Finally!”, but I understand that the vast majority of you are thinking, “Um, it’s just styling lists.” If you are part of the second group, I get it. Before learning and writing more and more about counters, I thought the same thing. Now I am part of the first group, and by the end of this guide, I hope you join me there.

There are many ways to create and style counters, which is why I wanted to write this guide and also how I plan to organize it: going from the most basic styling to the top-notch level of customization, sprinkling in between some sections about spacing and accessibility. It isn’t necessary to read the guide in order — each section should stand by itself, so feel free to jump to any part and start reading.

Customizing Counters in HTML

Lists elements were among the first 18 tags that made up HTML. Their representation wasn’t defined yet but deemed fitting a bulleted list for unordered lists, and a sequence of numbered paragraphs for an ordered list.

Cool but not enough; soon people needed more from HTML alone and new list attributes were added throughout the years to fill in the gaps.

start

The start attribute takes an integer and sets from where the list should start:

<ol start="2"> <li>Bread</li> <li>Milk</li> <li>Butter</li> <li>Apples</li> </ol>

Bread

Milk

Butter

Apples

Although, it isn’t limited to positive values; zero and negative integers are allowed as well:

<ol start="0"> <li>Bread</li> <li>Milk</li> <li>Butter</li> <li>Apples</li> </ol> <ol start="-2"> <li>Bread</li> <li>Milk</li> <li>Butter</li> <li>Apples</li> </ol>

Bread

Milk

Butter

Apples

Bread

Milk

Butter

Apples

type

We can use the type attribute to change the counter’s representation. It’s similar to CSS’s list-style-type, but it has its own limited uses and shouldn’t be used interchangeably*. Its possible values are:

1 for decimal numbers (default)

a for lowercase alphabetic

A for uppercase alphabetic

i for lowercase Roman numbers

I for uppercase Roman numbers

<ol type="a"> <li>Bread</li> <li>Milk</li> <li>Butter</li> <li>Apples</li> </ol> <ol type="i"> <li>Bread</li> <li>Milk</li> <li>Butter</li> <li>Apples</li> </ol>

Bread

Milk

Butter

Apples

Bread

Milk

Butter

Apples

It’s weird enough to use type on ol elements, but it still has some use cases*. However, usage with the ul element is downright deprecated.

value

The value attribute sets the value for a specific li element. This also affects the values of the li elements after it.

<ol> <li>Bread</li> <li value="4">Milk</li> <li>Butter</li> <li>Apples</li> </ol>

Bread

Milk

Butter

Apples

reversed

The reversed attribute will start counting elements in reverse order, so from highest to lowest.

<ol reversed> <li>Bread</li> <li>Milk</li> <li>Butter</li> <li>Apples</li> </ol>

Bread

Milk

Butter

Apples

All can be combined

If you ever feel the need, all list attributes can be combined in one (ordered) list.

<ol reversed start="2" type="i"> <li>Bread</li> <li value="4">Milk</li> <li>Butter</li> <li>Apples</li> </ol>

Bread

Milk

Butter

Apples

* Do we need them if we now have CSS?

Funny enough, the first CSS specification already included list-style-type and other properties to style lists, and it was released before HTML 3.2 — the first HTML spec that included some of the previous list attributes. This means that at least on paper, we had CSS list styling before HTML list attributes, so the answer isn’t as simple as “they were there before CSS.”

Without CSS, a static page (such as this guide) won’t be pretty, but at the very least, it should be readable. For example, the type attribute ensures that styled ordered lists won’t lose their meaning if CSS is missing, which is especially useful in legal or technical documents. Some attributes wouldn’t have a CSS equivalent until years later, including reversed, start and value.

Styling Simple Counters in CSS

For most use cases, styling lists in CSS doesn’t take more than a couple of rules, but even in that brevity, we can find different ways to style the same list.

::marker or ::before?

The ::marker pseudo-element represents the counter part of a list item. As a pseudo-element, we can set its content property to any string to change its counter representation:

li::marker content: "💜 ";

Bread

Milk

Butter

Apples

The content in pseudo-elements also accepts images, which allows us to create custom markers:

li::marker content: url("./logo.svg") " ";

bread

milk

butter

apples

By default, only li elements have a ::marker but we can give it to any element by setting its display property to list-item:

h4 display: list-item; h4::marker content: "◦ ";

This will give each h4 a ::marker which we can change to any string:

List Title

However, ::marker is an odd case: it was described in the CSS spec more than 20 years ago, but only gained somewhat reliable support in 2020 and still isn’t fully supported in Safari. What’s worst, only font-related properties (such as font-size or color) are allowed, so we can’t change its margin or background-color.

This has led many to use ::before instead of ::marker, so you’ll see a lot of CSS in which the author got rid of the ::marker using list-style-type: none and used ::before instead:

li /* removes ::marker */ list-style-type: none; li::before /* mimics ::marker */ content: "▸ ";

list-style-type

The list-style-type property can be used to replace the ::marker‘s string. Unlike ::marker, list-style-type has been around forever and is most people’s go-to option for styling lists. It can take a lot of different counter styles that are built-in in browsers, but you will probably use one of the following:

For unordered lists:

disc

circle

square

ul list-style-type: square; ul list-style-type: circle;

bread

milk

butter

apples

For ordered lists:

decimal

decimal-leading-zero

lower-roman

upper-roman

lower-alpha

upper-alpha

ol list-style-type: upper-roman; ol list-style-type: lower-alpha;

bread

milk

butter

apples

You can find a full list of valid counter styles here.

It can also take none to remove the marker altogether, and since not long ago, it can also take a <string> for ul elements.

ul list-style-type: none; ul list-style-type: "➡️ ";

Creating Custom Counters

For a long time, there wasn’t a CSS-equivalent to the HTML reverse, start or value attributes. So if we wanted to reverse or change the start of multiple lists, instead of a CSS class to rule them all, we had to change their HTML one by one. You can imagine how repetitive that would get.

Besides, list attributes simply had their limitations: we can’t change how they increment with each item and there isn’t an easy way to attach a prefix or suffix to the counter. And maybe the biggest reason of all is that there wasn’t a way to number things that weren’t lists!

Custom counters let us number any collection of elements with a whole new level of customization. The workflow is to:

Initiate the counter with the counter-reset property.

Increment the counter with the counter-increment property.

Individually set the counters with the counter-set property.

Output the counters with either the counter() and counters() functions.

As I mentioned, we can make a list out of any collection of elements, and while this has its accessibility concerns, just for demonstration’s sake, let’s try to turn a collection of headings like this…

<div class="index"> <h2>The Old Buccaneer</h2> <h2>The Sea Cook</h2> <h2>My Shore Adventure</h2> <h2>The Log Cabin</h2> <h2>My Sea Adventure</h2> <h2>Captain Silver</h2> </div>

…into something that looks list-like. But just because we can make an element look like a list doesn’t always mean we should do it. Be sure to consider how the list will be announced by assistive technologies, like screen readers, and see the Accessibility section for more information.

Initiate counters: counter-reset

The counter-reset property takes two things: the name of the counter as a custom ident and the initial count as an integer. If the initial count isn’t given, then it will start at 0 by default:

.index counter-reset: index; /* The same as */ counter-reset: index 0;

You can initiate several counters at once with a space-separated list and set a specific value for each one:

.index counter-reset: index another-counter 2;

This will start our index counter at 0 (the default) and another-counter at 2.

Set counters: counter-set

The counter-set works similar to counter-reset: it takes the counter’s name followed by an integer, but this time it will set the count for that element onwards. If the integer is omitted, it will set the counter to 0 by default.

h2:nth-child(2) counter-set: index; /* same as */ counter-set: index 0;

And we can set several counters at once, as well:

h2:nth-child(3) counter-set: index 5 another-counter 10;

This will set the third h2 element’s index count to 5 and another-counter to 10.

If there isn’t an active counter with that name, counter-set will initiate it at 0.

Increment counters: counter-increment

Right now, we have our counter, but it will stagnate at 0 since we haven’t set which elements should increment it. We can use the counter-increment property for that, which takes the name of the counter and how much it should be incremented by. If we only write the counter’s name, it will increment it by 1.

In this case, we want each h2 title to increment the counter by one, and that should be as easy as setting counter-increment to the counter’s name:

h2 counter-increment: index; /* same as */ counter-increment: index 1;

Just like with counter-reset, we can increment several counters at once in a space-separated list:

h2 counter-increment: index another-counter 2;

This will increment index by one and another-counter by two on each h2 element.

If there isn’t an active counter with that name, counter-increment will initiate it at 0.

Output simple lists: counter()

So far, we won’t see any change in the counter representation. The counters are counting but not showing, so to output the counter’s result we use the counter() and counters() functions. Yes, those are two functions with similar names but important differences.

The counter() function takes the name of a counter and outputs its content as a string. If many active counters have the same name, it will select the one that is defined closest to the element, so we can only output one counter at a time.

As mentioned earlier, we can set an element’s display to list-item to work with its ::marker pseudo-element:

h2 display: list-item;

Then, we can use counter() in its content property to output the current count. This allows us to prefix and suffix the counter by writing a string before or after the counter() function:

h2::marker content: "Part " counter(index) ": ";

Alternatively, we can use the everyday ::before pseudo-element to the same effect:

h2::before content: "Part " counter(index) ": ";

Output nested lists: counters()

counter() works great for most situations, but what if we wanted to do a nested list like this:

1. Paradise Beaches 1.1. Hawaiian Islands 1.2. Caribbean Getaway 1.2.1. Aruba 1.2.2. Barbados 2. Outdoor Escapades 2.1 National Park Hike 2.2. Mountain Skiing Trip

We would need to initiate individual counters and write different counter() functions for each level of nesting, and that’s only possible if we know how deep the nesting goes, which we simply don’t at times.

In this case, we use the counters() function, which also takes the name of a counter as an argument but instead of just outputting its content, it will join all active counters with that name into a single string and output it. To do so, it takes a string as a second argument, usually something like a dot (".") or dash ("-") that will be used between counters to join them.

We can use counter-reset and counter-increment to initiate a counter for each ol element, while each li will increment its closest counter by 1:

ol counter-reset: item; li counter-increment: item;

But this time, instead of using counter() (which would only display one counter per item), we will use counters() to join all active counters by a string (e.g. ".“) and output them at once:

li::marker content: counters(item, ".") ". ";

Styling Counters

Both the counter() and counters() functions accept one additional, yet optional, last argument representing the counter style, the same ones we use in the list-style-type property. So in our last two examples, we could change the counter styles to Roman numbers and alphabetic letters, respectively:

h2::marker content: "Part " counter(index, upper-roman) ": ";

li::marker content: counters(item, ".", lower-alpha) ". ";

Reverse Counters

It’s possible to count backward using custom counters, but we need to know beforehand the number of elements we’ll count. So for example, if we want to make a Top Five list in reversed order:

<h1>Best rated animation movies</h1> <ol> <li>Toy Story 2</li> <li>Toy Story 1</li> <li>Finding Nemo</li> <li>How to Train your Dragon</li> <li>Inside Out</li> </ol>

We have to initiate our counter at the total number of elements plus one (so it doesn’t end at 0):

ol counter-reset: movies 6;

And then set the increment to a negative integer:

li counter-increment: movies -1;

To output the count we use counter() as we did before:

li::marker content: counter(movies) ". ";

There is also a way to write reversed counters supported in Firefox, but it hasn’t shipped to any other browser. Using the reversed() functional notation, we can wrap the counter name while initiating it to say it should be reversed.

ol counter-reset: reversed(movies); li counter-increment: movies; li::marker content: counter(movies) " .";

Styling Custom Counters

The last section was all about custom counters: we changed from where they started and how they increased, but at the end of the day, their output was styled in one of the browser’s built-in counter styles, usually decimal. Now using @counter-style, we’ll build our own counter styles to style any list.

The @counter-style at-rule, as its name implies, lets you create custom counter styles. After writing the at-rule it takes a custom ident as a name:

@counter-style my-counter-style /* etc. */

That name can be used inside the properties and functions that take a counter style, such as list-style-type or the last argument in counter() and counters():

ul list-style-type: my-counter-style; li::marker content: counter(my-counter, my-counter-style) ". ";

What do we write inside @counter-style? Descriptors! How many descriptors? Honestly, a lot. Just look at this quick review of all of them:

system: specifies which algorithm will be used to construct the counter’s string representation. (Obligatory)

negative: specifies the counter representation if the counter value is negative. (Optional)

prefix: specifies a character that will be attached before the marker representation and any negative sign. (Optional)

suffix: specifies a character that will be attached after the marker representation and any negative sign. (Optional)

range: specifies the range in which the custom counter is used. Counter values outside the range will drop to their fallback counter style. (Optional)

pad: specifies a minimum width all representations have to reach. Representations shorter than the minimum are padded with a character. (Optional)

fallback: specifies a fallback counter used whenever a counter style can’t represent a counter value. (Optional)

symbols: specifies the symbols used by the construction system algorithm. It’s obligatory unless the system is set to additive or extends.

additive-symbols: specifies the symbols used by the construction algorithm when the system descriptor is set to additive.

speak-as: specifies how screen readers should read the counter style. (Optional)

However, I’ll focus on the required descriptors first: system, symbols and additive-symbols.

The system descriptor

The symbols or additive-symbols descriptors define the characters used for the counter style, while system says how to use them.

The valid system values are:

cyclic

alphabetic

symbolic

additive

fixed

extends

cyclic will go through the characters set on symbols and repeat them. We can use just one character in the symbols to mimic a bullet list:

@counter-style cyclic-example system: cyclic; symbols: "⏵"; suffix: " ";

bread

butter

milk

apples

Or alternate between two or more characters:

@counter-style cyclic-example system: cyclic; symbols: "🔸" "🔹"; suffix: " ";

fixed will write the characters in symbols descriptor just one time. In the last example, only the first two items will have a custom counter if set to fixed, while the others will drop to their fallback, which is decimal by default.

@counter-style multiple-example system: fixed; symbols: "🔸" "🔹"; suffix: " ";

We can set when the custom counters start by appending an <integer> to the fixed value. For example, the following custom counter will start at the fourth item:

@counter-style fixed-example system: fixed 4; symbols: "💠"; suffix: " ";

numeric will numerate list items using a custom positional system (base-2, base-8, base-16, etc.). Positional systems start at 0, so the first character at symbols will be used as 0, the next as 1, and so on. Knowing this, we can make an ordered list using non-decimal numerical systems like hexadecimal:

@counter-style numeric-example system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "A" "B" "C" "D" "E" "F"; suffix: ". ";

bread

butter

milk

apples

alphabetic will enumerate the list items using a custom alphabetical system. It’s similar to the numeric system but with the key difference that it doesn’t have a character for 0, so the next digits are just repeated. For example, if our symbols are "A" "B" "C" they will wrap to "AA", "AB", "AC", then BA, BB, BC and so on.

Since there is no equivalent for 0 and negative values, they will drop down to their fallback.

@counter-style alphabetic-example system: alphabetic; symbols: "A" "B" "C"; suffix: ". ";

bread

butter

milk

apples

cinnamon

symbolic will go through the characters in symbols repeating them one more time each iteration. So for example, if our symbols are "A", "B", "C", it will go “A”, “B”, and “C”, double them in the next iteration as “AA”, “BB”, and “CC”, then triple them as “AAA”, “BBB”, “CCC” and so on.

Since there is no equivalent for 0 and negative values, they will drop down to their fallback.

@counter-style symbolic-example system: symbolic; symbols: "A" "B" "C"; suffix: ". ";

bread

butter

milk

apples

cinnamon

additive will give characters a numerical value and add them together to get the counter representation. You can think of it as the way we usually count bills: if we have only $5, $2, and $1 bills, we will add them together to get the desired quantity, trying to keep the number of bills used at a minimum. So to represent 10, we will use two $5 bills instead of ten $1 bills.

Since there is no equivalent for negative values, they will drop down to their fallback.

@counter-style additive -example system: additive; additive-symbols: 5 "5️⃣", 2 "2️⃣", 1 "1️⃣"; suffix: " ";

Notice how we use additive-symbols when the system is additive, while we use just symbols for the previous systems.

extends will create a custom style from another one but with modifications. To do so, it takes a <counter-style-name> after the extends value. For example, we could change the decimal counter style default’s suffix to a closing parenthesis (")")`:

@counter-style extends-example system: extends decimal; suffix: ") ";

bread

butter

milk

cinnamon

Per spec, “If a @counter-style uses the extends system, it must not contain a symbols or additive-symbols descriptor, or else the @counter-style rule is invalid.”

The other descriptors

The negative descriptor allows us to create a custom representation for a list’s negative values. It can take one or two characters: The first one is prepended to the counter, and by default it’s the hyphen-minus ("-"). The second one is appended to the symbol. For example, we could enclose negative representations into parenthesis (2), (1), 0, 1, 2:

@counter-style negative-example system: extends decimal; negative: "(" ")";

bread

butter

milk

apples

The prefix and suffix descriptors allow us to prepend and append, respectively, a character to the counter representation. We can use it to add a character at the beginning of each counter using prefix:

@counter-style prefix-suffix-example system: extends decimal; prefix: "("; suffix: ") ";

bread

butter

milk

apples

The range descriptor defines an inclusive range in which the counter style is used. We can define a bounded range by writing one <integer> next to another. For example, a range of 2 4 will affect elements 2, 3, and 4:

@counter-style range-example system: cyclic; symbols: "‣"; suffix: " "; range: 2 4;

bread

butter

milk

apples

cinnamon

On the other hand, using the infinite value we can unbound the range to one side. For example, we could write infinite 3 so all items up to 3 have a counter style:

@counter-style range-example system: alphabetic; symbols: "A" "B" "C"; suffix: ". "; range: infinite 3;

bread

butter

milk

apples

cinnamon

The pad descriptor takes an <integer> that represents the minimum width for the counter and a character to pad it. For example, a zero-padded counter style would look like the following:

@counter-style pad-example system: extends decimal; pad: 3 "0";

bread

butter

milk

apples

The fallback descriptor allows you to define which counter style should be used as a fallback whenever we can’t represent a specific count. For example, the following counter style is fixed and will fallback to lower-roman after the sixth item:

@counter-style fallback-example system: fixed; symbols: "⚀" "⚁" "⚂" "⚃"; fallback: lower-roman;

bread

butter

milk

apples

cinnamon

Lastly, the speak-as descriptor hints to speech readers on how the counter style should be read. It can be:

auto Uses the system default.

bullets reads an unordered list. By default, cyclic systems are read as bullets

numbers reads the counter’s numeric value in the content language. By default, additive, fixed, numeric, and, symbolic are read as numbers.

words reads the counter representation as words.

spell-out reads the counter representation letter by letter. By default, alphabetic is read as spell-out.

<counter-style-name> It will use that counter’s speak-as value.

@counter-style speak-as-example system: extends decimal; prefix: "Item "; suffix: " is "; speak-as: words;

symbols()

The symbols() function defines an only-use counter style without the need to do a whole @counter-style, but at the cost of missing some features. It can be used inside the list-style-type property and the counter() and counters() functions.

ol list-style-type: symbols(cyclic "🥬");

However, its browser support is appalling since it’s only supported in Firefox.

Images in Counters

In theory, there are four ways to add images to lists:

list-style-image property

content property

symbols descriptor in @counter-style

symbols() function.

In practice, the only supported ways are using list-style-image and content, since support for images in @counter-style and support in general for symbols() isn’t the best (it’s pretty bad).

list-style-image

The list-style-image can take an image or a gradient. In this case, we want to focus on images but gradients can also be used to create custom square bullets:

li list-style-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

bread

butter

milk

apples

Sadly, changing the shape would require styling more the ::marker and this isn’t currently possible.

To use an image, we pass its url(), make sure is small enough to work as a counter:

li list-style-image: url("./logo.svg");

bread

milk

butter

apples

content

The content property works similar to list-style-image: we pass the image’s url() and provide a little padding on the left as an empty string:

li::marker content: url("./logo.svg") " ";

Spacing Things Out

You may notice in the last part how the image — depending on its size — isn’t completely centered on the text, and also that we provide an empty string on content properties for spacing instead of giving things either a padding or margin. Well, there’s an explanation for all of this, as since spacing is one of the biggest pain points when it comes to styling lists.

Margins and paddings are wacky

Spacing the ::marker from the list item should be as easy as increasing the marker’s or list margin, but in reality, it takes a lot more work.

First, the padding and margin properties aren’t allowed in ::marker. While lists have two types of elements: the list wrapper (usually ol or ul) and the list item (li), each with a default padding and margin. Which should we use?

You can test each property in this demo by Šime Vidas in his article dedicated to the gap after the list marker:

You’ll notice how the only property that affects the spacing within ::marker and the text is the li item’s padding property, while the rest of the spacing properties will move the entire list item. Another thing to note is even when the padding is set to 0px, there is a space after the ::marker. This is set by browsers and will vary depending on which browser you’re using.

list-style-position

One last thing you may notice in the demo is a checkbox for the list-style-position property, and how once you set it to inside, the ::marker will move to the inside of the box, at the cost of removing any spacing given by the list item’s padding.

By default, markers are rendered outside the ul element’s box. A lot of times, this isn’t the best behavior: markers sneak out of elements, text-align won’t align the marker, and paradoxically, centered lists with flex or grid won’t look completely centered since the markers are outside the box.

To change this we can use the list-style-position property, it can be either outside (default) and inside to define where to position the list marker: either outside or the outside of the ul box.

ul border: solid 2px red; .inside list-style-position: inside; .outside list-style-position: outside;

bread

butter

milk

apple

content with empty strings

In the same article, Šime says:

Appending a space to content feels more like a workaround than the optimal solution.

And I completely agree that’s true, but just using ::marker there isn’t a correct way to add spacing between the ::marker and the list text, especially since most people prefer to set list-style-position to inside. So, as much as it pains me to say it, the simplest way to increase the gap after the marker is to suffix the content property with an empty string:

li::marker content: "• ";

bread

milk

butter

apples

BUT! This is only if we want to be purists and stick with the ::marker pseudo-element because, in reality, there is a much better way to position that marker: not using it at all.

Just use ::before

There is a reason people love using the ::before more than ::marker. First, we can’t use something like CSS Grid or Flexbox since changing the display of li to something other than list-item will remove the ::marker, and we can set the ::marker‘s height or width properties to better align it.

Let’s be real, ::marker works fine when we just want simple styling. But we are not here for simple styling! Once we want something more involved, ::marker will fall short and we’ll have to use the ::before pseudo-element.

Using ::before means we can use Flexbox, which allows for two things we couldn’t do before:

Vertically center the marker with the text

Easily increase the gap after the marker

Both can be achieved with Flexbox:

li display: flex; align-items: center; /* Vertically center the marker */ gap: 20px; /* Increases the gap */ list-style-type: none;

The original ::marker is removed by changing the display.

Accesibility

In a previous section we turned things that weren’t lists into seemingly looking lists, so the question arises: should we actually do that? Doesn’t it hurt accessibility to make something look like a list when it isn’t one? As always, it depends. For a visual user, all the examples in this entry look all right, but for assistive technology users, some examples lack the necessary markup for accessible navigation.

Take for example our initial demo. Here, listing titles serves as decoration since the markup structure is given by the titles themselves. It’s the same deal for the counting siblings demo from earlier, as assistive technology users can read the document through the title structure.

However, this is the exception rather than the norm. That means a couple of the examples we looked at would fail if we need the list to be announced as a list in assistive technology, like screen readers. For example this list we looked at earlier:

<div class="index"> <h2>The Old Buccaneer</h2> <h2>The Sea Cook</h2> <h2>My Shore Adventure</h2> <h2>The Log Cabin</h2> <h2>My Sea Adventure</h2> <h2>Captain Silver</h2> </div>

…should be written as a list instead:

<ul class="index"> <li>The Old Buccaneer</li> <li>The Sea Cook</li> <li>My Shore Adventure</li> <li>The Log Cabin</li> <li>My Sea Adventure</li> <li>Captain Silver</li> </ul>

Listing elements is rarely used just as decoration, so as a rule of thumb, use lists in the markup even if you are planning to change them with CSS.

Almanac References

List Properties

Counters

Custom Counter Styles

Pseudo-Elements

More Tutorials & Tricks!

[priyanaik]

Mastering HTML: A Beginner’s Guide

HTML (HyperText Markup Language) is the foundation of every website. It structures web pages using elements like headings, paragraphs, images, and links. Learning HTML is essential for anyone looking to build a website or understand front-end development.

One of the first things to grasp in HTML is the use of tags. Tags like <h1> for headings, <p> for paragraphs, and <a> for links define how content appears on a webpage. Lists, both ordered (<ol>) and unordered (<ul>), help organize information neatly.

Another important aspect is forms. Forms allow users to input data using fields like text boxes, radio buttons, and checkboxes. Combined with CSS and JavaScript, HTML creates dynamic and visually appealing web pages.

If you're preparing for a job in web development, it's crucial to practice HTML Interview Questions to strengthen your knowledge. Common topics include semantic HTML, forms, tables, and multimedia elements. Understanding the difference between block and inline elements can also give you an edge.

Mastering HTML is the first step toward becoming a skilled web developer. Once you're comfortable, you can explore CSS and JavaScript to enhance your designs and add interactivity.

[beingdusmamud]

What is HTML?

HTML means Hyper Text Markup Language. and it is a widely used programming language used to develop web pages.

Current version of HTML is HTML 5 and the first version is HTML 1.0. HTML is one of the easiest coding language to learn.

HTML tags are used to define HTML elements. An HTML element usually consists of a start tag and an end tag, with the content inserted in between. HTML tags are used to create HTML documents and render their content on web browsers.

Some of the basic HTML tags include <html>, <head>, <title>, <body>, <h1> to <h6>, <p>, <br>, <hr>, <ul>, <ol>, <li>, <a>, <img> and many more .

Why to Learn HTML?

Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.

HTML is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Web Development Domain. I will list down some of the key advantages of learning HTML:

[skilluptolearn]

HTML

HTML Course Content

HTML, or *HyperText Markup Language*, is the standard language used for creating and structuring content on the web. It defines the structure of web pages through the use of elements and tags, which dictate how text, images, links, and other multimedia are displayed in a web browser. HTML provides the foundation for web documents, allowing developers to format content, organize sections, and create interactive features. It consists of a series of elements enclosed in angle brackets, such as <p> for paragraphs, <a> for links, and <img> for images, which together build the content and layout of a webpage.

 HTML Contents

HTML (HyperText Markup Language) is the foundation of web pages and web applications. It structures content on the web, defining elements like headings, paragraphs, links, images, and other multimedia. Here’s a breakdown of key HTML contents:

1. *Basic Structure*:

   *<!DOCTYPE html>*: Declares the document type and version of HTML.

    *<html>*: The root element that encompasses the entire HTML document.

    *<head>*: Contains meta-information about the document, such as title, character set, and links to CSS or JavaScript files.

    *<body>*: Contains the content that is visible on the web page, including text, images, and interactive elements.

2. *Text Elements*:

    *<h1> to <h6>*: Heading tags, with <h1> being the most important.

    *<p>*: Paragraph tag for regular text.

    *<a>*: Anchor tag for creating hyperlinks.

    *<span>* and *<div>*: Generic containers for grouping inline and block content, respectively.

3. *Lists*:

    *<ul>*: Unordered list.

    *<ol>*: Ordered list.

    *<li>*: List item, used within <ul> or <ol>.

4. *Images and Media*:

    *<img>*: Embeds images.

    *<video>* and *<audio>*: Embeds video and audio files.

    *<figure>* and *<figcaption>*: For adding images or media with captions.

5. *Forms*:

    *<form>*: Contains form elements for user input.

    *<input>*: Various input fields (text, password, checkbox, radio, etc.).

    *<textarea>*: For multi-line text input.

    *<button>* and *<select>*: Buttons and dropdown menus.

6. *Tables*:

    *<table>*: Defines a table.

    *<tr>*: Table row.

    *<th>*: Table header cell.

    *<td>*: Table data cell.

7.*Semantic Elements*:

    *<header>, *<footer>**: Defines the header and footer sections.

    *<nav>*: Navigation section.

    *<article>*: Independent content item.

    *<section>*: Thematic grouping of content.

    *<aside>*: Sidebar or additional content.

    *<main>*: Main content of the document.

8. *Metadata and Links*:

    *<meta>*: Provides metadata such as descriptions, keywords, and viewport settings.

    *<link>*: Links external resources like CSS files.

    *<script>*: Embeds or links JavaScript files.

 Importance of HTML

HTML is critically important for several reasons:

1. *Foundation of Web Pages*:

    HTML is the core language that structures content on the web. Without HTML, web pages wouldn’t exist as we know them. It organizes text, images, links, and other media into a cohesive and navigable format.

2. *Accessibility*:

    Proper use of HTML ensures that web content is accessible to all users, including those with disabilities. Semantic HTML elements provide context to assistive technologies, making it easier for screen readers to interpret the content.

3. *SEO (Search Engine Optimization)*:

   Search engines rely on HTML to understand the content of web pages. Properly structured HTML with relevant tags and attributes improves a website’s visibility in search engine results, driving more traffic to the site.

4. *Interoperability*:

   HTML is universally supported by all web browsers, ensuring that content can be displayed consistently across different devices and platforms. This cross-compatibility makes HTML the most reliable way to share content on the web.

5. *Foundation for CSS and JavaScript*:

   HTML is the backbone that supports styling and interactivity through CSS and JavaScript. It provides the structure that CSS styles and JavaScript enhances, creating dynamic, interactive, and visually appealing web experiences.

6. *Web Standards Compliance*:

   HTML is maintained by the World Wide Web Consortium (W3C), which sets standards to ensure the web remains open, accessible, and usable. Following these standards helps developers create web content that is robust and future-proof.

7. *Ease of Learning and Use*:

   HTML is relatively simple to learn, making it accessible to beginners and non-programmers. Its simplicity also allows for rapid development and prototyping of web pages.

In summary, HTML is essential because it structures and defines web content, ensuring it is accessible, searchable, and interoperable across various platforms. It is the foundation upon which modern web design and development are built.

[html-tute]

Basics of HTML

HTML (HyperText Markup Language) is the standard language used to create web pages. It provides the structure and content of a webpage, which is then styled with CSS and made interactive with JavaScript. Let’s go through the basics of HTML:

1. HTML Document Structure

An HTML document starts with a declaration and is followed by a series of elements enclosed in tags:<!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a paragraph of text on my first webpage.</p> </body> </html>

<!DOCTYPE html>: Declares the document type and version of HTML. It helps the browser understand that the document is written in HTML5.

<html>: The root element that contains all other HTML elements on the page.

<head>: Contains meta-information about the document, like its title and links to stylesheets or scripts.

<title>: Sets the title of the webpage, which is displayed in the browser's title bar or tab.

<body>: Contains the content of the webpage, like text, images, and links.

2. HTML Tags and Elements

Tags: Keywords enclosed in angle brackets, like <h1> or <p>. Tags usually come in pairs: an opening tag (<h1>) and a closing tag (</h1>).

Elements: Consist of a start tag, content, and an end tag. For example:

<h1>Hello, World!</h1>

3. HTML Attributes

Attributes provide additional information about HTML elements. They are always included in the opening tag and are written as name="value" pairs:<a href="https://www.example.com">Visit Example</a> <img src="image.jpg" alt="A descriptive text">

href: Used in the <a> (anchor) tag to specify the link's destination.

src: Specifies the source of an image in the <img> tag.

alt: Provides alternative text for images, used for accessibility and if the image cannot be displayed.

4. HTML Headings

Headings are used to create titles and subtitles on your webpage:<h1>This is a main heading</h1> <h2>This is a subheading</h2> <h3>This is a smaller subheading</h3>

<h1> to <h6>: Represents different levels of headings, with <h1> being the most important and <h6> the least.

5. HTML Paragraphs

Paragraphs are used to write blocks of text:<p>This is a paragraph of text. HTML automatically adds some space before and after paragraphs.</p>

<p>: Wraps around blocks of text to create paragraphs.

6. HTML Line Breaks and Horizontal Lines

Line Break (<br>): Used to create a line break (new line) within text.

Horizontal Line (<hr>): Used to create a thematic break or a horizontal line:

<p>This is the first line.<br>This is the second line.</p> <hr> <p>This is text after a horizontal line.</p>

7. HTML Comments

Comments are not displayed in the browser and are used to explain the code:<!-- This is a comment --> <p>This text will be visible.</p>

<!-- Comment -->: Wraps around text to make it a comment.

8. HTML Links

Links allow users to navigate from one page to another:<a href="https://www.example.com">Click here to visit Example</a>

<a>: The anchor tag creates a hyperlink. The href attribute specifies the URL to navigate to when the link is clicked.

9. HTML Images

Images can be embedded using the <img> tag:<img src="image.jpg" alt="Description of the image">

<img>: Used to embed images. The src attribute specifies the image source, and alt provides descriptive text.

10. HTML Lists

HTML supports ordered and unordered lists:

Unordered List (<ul>):

. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

Ordered List (<ol>):

<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>

<ul>: Creates an unordered list with bullet points.

<ol>: Creates an ordered list with numbers.

<li>: Represents each item in a list.

11. HTML Metadata

Metadata is data that provides information about other data. It is placed within the <head> section and includes information like character set, author, and page description:<meta charset="UTF-8"> <meta name="description" content="An example of HTML basics"> <meta name="keywords" content="HTML, tutorial, basics"> <meta name="author" content="Saide Hossain">

12. HTML Document Structure Summary

Here’s a simple HTML document combining all the basic elements:<!DOCTYPE html> <html> <head> <title>My First HTML Page</title> <meta charset="UTF-8"> <meta name="description" content="Learning HTML Basics"> <meta name="keywords" content="HTML, basics, tutorial"> <meta name="author" content="Saide Hossain"> </head> <body> <h1>Welcome to My Website</h1> <p>This is my first webpage. I'm learning HTML!</p> <p>HTML is easy to learn and fun to use.</p> <hr> <h2>Here are some of my favorite websites:</h2> <ul> <li><a href="https://www.example.com">Example.com</a></li> <li><a href="https://www.anotherexample.com">Another Example</a></li> </ul> <h2>My Favorite Image:</h2> <img src="https://images.pexels.com/photos/287240/pexels-photo-287240.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" width="300" alt="A beautiful view"> <hr> <p>Contact me at <a href="mailto:saide2857@gmail.com">saide2857@gmail.com</a></p> </body> </html>

Key Takeaways

HTML is all about using tags to structure content.

The basic building blocks include headings, paragraphs, lists, links, images, and more.

Every HTML document needs a proper structure, starting with <!DOCTYPE html> and wrapping content within <html>, <head>, and <body> tags.

With these basics, you can start building your web pages!

Source: HTML TUTE BLOG